From: Eleni Maria Stea Date: Tue, 18 May 2021 09:15:23 +0000 (+0300) Subject: outline X-Git-Url: https://eleni.mutantstargoat.com/git/?p=webkit_codecamp;a=commitdiff_plain;h=1ee175dc1a7fce50d0b0f59eb5d9aa74c23a21ce outline --- 1ee175dc1a7fce50d0b0f59eb5d9aa74c23a21ce diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..56ba2db --- /dev/null +++ b/Makefile @@ -0,0 +1,10 @@ + +codecamp.pdf:codecamp.tex bib/references.bib + xelatex codecamp.tex + bibtex codecamp + xelatex codecamp.tex + xelatex codecamp.tex + +.PHONY: clean +clean: + rm -f *.aux *.bbl *.blg *.log *.nav *.out *.snm *.toc *.vrb *.pdf diff --git a/bib/references.bib b/bib/references.bib new file mode 100644 index 0000000..996a51e --- /dev/null +++ b/bib/references.bib @@ -0,0 +1,44 @@ +@manual{blog_posts, + title = {Blog posts with more details}, + note = {\url{https://eleni.mutantstargoat.com/hikiko/tag/angle}} +} + +@manual{examples, + title = {Example code (hikiko@github)}, + note = {\url{https://github.com/hikiko/shctx}}, +} + +@manual{ext_image_dma_buf_import, + title = {EXT\_image\_dma\_buf\_import}, + note = {\url{https://www.khronos.org/registry/EGL/extensions/EXT/EGL_EXT_image_dma_buf_import.txt}}, +} + +@manual{ext_image_dma_buf_import_modifiers, + title = {EXT\_image\_dma\_buf\_import\_modifiers}, + note = {\url{https://www.khronos.org/registry/EGL/extensions/EXT/EGL_EXT_image_dma_buf_import_modifiers.txt}}, +} + +@manual{mesa_image_dma_buf_export, + title = {MESA\_image\_dma\_buf\_export}, + note = {\url{https://www.khronos.org/registry/EGL/extensions/MESA/EGL_MESA_image_dma_buf_export.txt}}, +} + +@manual{oes_egl_image_external, + title = {GL\_OES\_EGL\_image\_external}, + note = {\url{https://www.khronos.org/registry/OpenGL/extensions/OES/OES_EGL_image_external.txt}}, +} + +@manual{dma_buf_doc, + title = {Buffer Sharing and Synchronization}, + note = {\url{https://01.org/linuxgraphics/gfx-docs/drm/driver-api/dma-buf.html}}, +} + +@manual{drm_fourcc, + title = {DRM fourcc.h (about modifiers)}, + note = {\url{https://raw.githubusercontent.com/torvalds/linux/master/include/uapi/drm/drm_fourcc.h}}, +} + +@manual{blaztinn, + title = {Blaztinn's client server example}, + note = {\url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}} +} diff --git a/codecamp.tex b/codecamp.tex new file mode 100644 index 0000000..898b8dd --- /dev/null +++ b/codecamp.tex @@ -0,0 +1,406 @@ +\documentclass[usenames,dvipsnames]{beamer} +\usepackage[font=small,skip=-1pt]{caption} +\usepackage{xcolor} +\usepackage{color, colortbl} +\usepackage{caption} +\usepackage{listings} +\usepackage{graphicx} +\usepackage{hyperref} +\usepackage{comment} +\usepackage{textpos} +\usepackage{tgpagella} +\usepackage[utf8]{inputenc} +\usepackage{fontspec} +\usepackage{tabularx, array, booktabs} +\usepackage{cite} +\usepackage{verbatim} +\usepackage{comment} +\usepackage{adjustbox} + +\newcommand\topalign[1]{% + \setbox0\hbox{#1}% + \raisebox{\dimexpr-\ht0+\dp0\relax}{\usebox0}} + +\definecolor{blond}{rgb}{0.98, 0.94, 0.75} +\definecolor{beige}{rgb}{0.96, 0.96, 0.86} +\definecolor{mGreen}{rgb}{0,0.6,0} +\definecolor{mGray}{rgb}{0.5,0.5,0.5} +\definecolor{mPurple}{rgb}{0.58,0,0.82} +\definecolor{bgcolor}{rgb}{0.8,0.8,0.8} +\definecolor{afblue}{rgb}{0.46, 0.64, 0.76} +\definecolor{coolblack}{rgb}{0.0, 0.18, 0.39} +\definecolor{paleaqua}{rgb}{0.74, 0.83, 0.9} +\definecolor{platinum}{rgb}{0.9, 0.89, 0.89} +\definecolor{whitesmoke}{rgb}{0.96, 0.96, 0.96} +\definecolor{carolinablue}{rgb}{0.6, 0.73, 0.89} +\definecolor{amber}{rgb}{1.0, 0.75, 0.0} +\definecolor{deepjunglegreen}{rgb}{0.0, 0.29, 0.29} +\definecolor{mediumred-violet}{rgb}{0.73, 0.2, 0.52} +\definecolor{babypink}{rgb}{0.96, 0.76, 0.76} +\definecolor{beaublue}{rgb}{0.74, 0.83, 0.9} +\definecolor{bananayellow}{rgb}{1.0, 0.88, 0.21} +\definecolor{bananamania}{rgb}{0.98, 0.91, 0.81} +\definecolor{crimsonglory}{rgb}{0.75, 0.0, 0.2} + +\lstdefinestyle{CStyle}{ + language=C++, % choose the language of the code +% basicstyle=\footnotesize, % the size of the fonts that are used for the code + basicstyle=\tt\color{afblue}, + breakatwhitespace=false, + breaklines=true, + backgroundcolor=\color{bgcolor}, % choose the background color. You must add \usepackage{color} + showspaces=false, % show spaces adding particular underscores + showstringspaces=false, % underline spaces within strings + showtabs=false, % show tabs within strings adding particular underscores + frame=single, % adds a frame around the code + tabsize=2, % sets default tabsize to 2 spaces + captionpos=b, % sets the caption-position to bottom + breaklines=true, % sets automatic line breaking + breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace + commentstyle=\color{mGreen}, + keywordstyle=\color{magenta}, + stringstyle=\color{mPurple}, + rulesepcolor=\color{gray}, + rulecolor=\color{black}, +} + +\setmainfont{Noto Sans} % substitute with any font that exists on your system +\setsansfont{Noto Sans} % substitute with any font that exists on your system +\setmonofont{Noto Sans Mono Medium} % substitute with any font that exists on your system + +\usetheme{Warsaw} +\useoutertheme{infolines} +\usecolortheme{crane} + +\captionsetup[figure]{labelformat=empty} + +\addtobeamertemplate{headline}{}{\vskip2pt} +\addtobeamertemplate{headline}{}{% + \begin{textblock*}{5mm}(.9\textwidth,-0.6cm) + \includegraphics[height=0.67cm]{data/igalia-logo.png} +\end{textblock*}} + +\definecolor{links}{rgb}{0.1, 0.3, 0.6} +\hypersetup{colorlinks,linkcolor=,urlcolor=links} + +\pgfdeclareimage[height=\paperheight]{igaliabglight}{data/igalia_bg_light.eps} +\pgfdeclareimage[height=\paperheight]{igaliabg}{data/igaliabg.eps} + +%\setbeamertemplate{title page}{ +% \begin{picture}(-90, 180) +% \put(-200, -74){% +% \pgfuseimage{igaliabg} +% } +% +% \put(55,19){% +% \begin{minipage}[b][36mm][t]{240mm} +% \usebeamerfont{title}{\inserttitle\par} +% \usebeamerfont{author}{\insertauthor\par} +% \usebeamerfont{title}{\insertinstitute\par} +% \end{minipage} +% } +% \end{picture} +%} + +\setbeamertemplate{navigation symbols}{} +\setbeamertemplate{title page}{ + \begin{picture}(0,0) + \put(-30,-164){% + \pgfuseimage{igaliabg} + } + + \put(0,-110.7){% + \begin{minipage}[b][38mm][t]{220mm} + \usebeamerfont{title}{\inserttitle\par} + \usebeamerfont{author}{\insertauthor\par} + \end{minipage} + } + + \put(240, -138){ + \usebeamerfont{date}{\huge{{\insertdate}}\par} + } + \end{picture} +} + +\setbeamertemplate{itemize items}[triangle] +\setbeamertemplate{itemize subitem}[circle] +\setbeamerfont{frametitle}{size=\small} + +\setbeamertemplate{blocks}[default] +\setbeamercolor{block title}{fg=amber,bg=black} + +\title{\textbf{Sharing texture data between drivers}} +\author[Eleni Maria Stea ]{\small{Eleni Maria Stea +}\\\\\includegraphics{data/igalia.eps}} +\date{\tiny{WebKit Codecamp}} + +\AtBeginSection[] +{ + \begin{frame} + \frametitle{Outline} + \tableofcontents[currentsection] + \end{frame} +} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\begin{document} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[plain] +\titlepage +\end{frame} + +\begin{frame} + \frametitle{Outline} + \tableofcontents +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{comment} +\begin{frame}[fragile,c] + \frametitle{} + \begin{center} + \end{center} +\end{frame} +\end{comment} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[Introduction]{Introduction: Using ANGLE in WebGL2} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{A few words about ANGLE} + \center{\textbf{\color{coolblack}{ANGLE is an EGL/GLESv2 implementation}}} + + \setbeamertemplate{itemize/enumerate body begin}{\footnotesize} + \setbeamertemplate{itemize/enumerate subbody begin}{\tiny} + \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny} + \setbeamertemplate{itemize items}[triangle] + \setbeamertemplate{blocks}[rounded][shadow] + + \begin{block}{\color{afblue}{\footnotesize\textbf{EGL/GLESv2}:}} + \begin{itemize} + \item GLESv2 is used to render graphics using the GPU (graphics + API). + \item EGL is used to create a GLESv2 context. + \end{itemize} + \end{block} + + + \begin{block}{\color{afblue}{\footnotesize\textbf{ANGLE EGL/GLESv2}:}} + \begin{itemize} + \item GLESv2 is implemented on top of other APIs (OpenGL, + Vulkan, GLESv2). EGL too (EGL, GLX, gbm, headless display). + \item Users can select the most convenient backend using some + \textit{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that + provide extra attributes to some standard EGL API stucts. + \item Primary purpose of ANGLE is to provide EGL/GLESv2 to systems + lacking it. + \end{itemize} + \end{block} + + \vspace{0.2cm} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{Using ANGLE in WebKit} + + \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}} + \vspace{0.2cm} + + \setbeamertemplate{itemize/enumerate body begin}{\footnotesize} + \setbeamertemplate{itemize/enumerate subbody begin}{\tiny} + \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny} + \setbeamertemplate{itemize items}[triangle] + \setbeamertemplate{blocks}[rounded][shadow] + + + \begin{block}{\color{afblue}{\footnotesize\textbf{Reasons}:}} + \begin{itemize} + \item better performance (Žan Doberšek) + \item it'll be mostly a wrapper around the native driver (Linux mesa + drivers implement GLESv2, Linux desktop provides libGLES*) + \end{itemize} + \end{block} + \begin{block}{\color{afblue}{\footnotesize\textbf{Problem}:}} + \begin{itemize} + \item ANGLE renders on a GLESv2 texture created by ANGLE context + \item WebKit graphics pipeline components use OpenGL textures that + are composited by the WebKit compositor + \item We are currently \textbf{\textit{copying}} the ANGLE texture data to + an OpenGL texture to assemble the final image and this is + \textbf{\textit{slow}}! + \end{itemize} + \end{block} + + \center{\textbf{\color{coolblack}{We need to replace this copy with + something better!}}} + + \vspace{0.2cm} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{Experiments on Linux} + + \vspace{0.3cm} + {\footnotesize{ + \begin{enumerate} + \itemsep0.3cm + \item {\color{coolblack}\textbf{Use ANGLE and EGL in the same program: + create 2 X11 windows, and draw 2 images from 2 different contexts + by 2 different drivers.} + + \tiny{{(In several cases ANGLE behaves + different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't + call \texttt{eglMakeCurrent}!!).}} + } + \item {\color{coolblack}\textbf{Fix the problem with shared + context and shared textures.} + + \tiny{{(required + modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the + EGL/OpenGL backend, and it wouldn't work with multiple + processes)}} + } + \item {\color{coolblack}\textbf{Fix the problem by sharing a Linux kernel + dma-buf buffer across drivers.} + + \tiny{{(drivers must support some EGL/GL extensions, but both mesa and + ANGLE support them)}} + } + \item {\color{coolblack}\textbf{Solve the multiple processes case.} + + \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}} + } + \end{enumerate} + }} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same +program} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{Step 1: Setting up to debug ANGLE with GDB} + \begin{center} + \end{center} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{Step 2: Contexts from two drivers in the same + program} + \begin{center} + \end{center} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[Multiple Processes]{Multiple Processes} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{What if WebGL and Graphics pipeline were separate processes?} + \setbeamertemplate{blocks}[rounded] + +\vspace{0.3cm} + \center{ + \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2 + pipeline in two processes. (Žan Doberšek)}}} + +\vspace{0.5cm} + \begin{block}{Can we still use shared DMA buffers?} + \footnotesize{ + + \begin{itemize} + \itemsep0.3cm + \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across + multiple processes.} + \item {\color{coolblack} But we need some sort of \textit{interprocess + communication} to exchange the file descriptor.} + \item {\color{coolblack} This is a client-server example that uses unix + sockets to pass the dma-buf FD from one process to the other: + \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}. It could + be adapted to our needs when we switch to multiple processes.} + \end{itemize} + + } + \end{block} + +\vspace{0.3cm} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[WebKit Integration]{WebKit Integration} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{WIP WebKit:} + \setbeamertemplate{blocks}[rounded] + \center{ + \normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}} + } + + \vspace{0.3cm} + + \small{\color{deepjunglegreen}{Building WebKit with ANGLE on Linux was problematic.\\ + Before starting the task some other fixes were necessary:}} + + \vspace{0.3cm} + + \begin{block}{DONE/WIP/TODO} + \footnotesize{ + \begin{itemize} + \item{Use the right CMake options (one can't simply enable + \texttt{USE\_ANGLE\_WEBGL} ☺): + \color{coolblack}{\textbf{FIXED }}} + \item{Compile errors when ANGLE is used: + \color{coolblack}{\textbf{FIXED}}} + \item{Link errors when ANGLE is used: + \color{coolblack}{\textbf{WIP/Partially FIXED}}} + \item{Copy replacement: \color{coolblack}{\textbf{TODO}}} + \end{itemize} + } + \end{block} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[References]{References} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%\setbeamertemplate{bibliography entry title}{} +%\setbeamertemplate{bibliography entry location}{} +%\setbeamertemplate{bibliography entry note}{} +\setbeamerfont{bibliography item}{size=\footnotesize} +\setbeamerfont{bibliography entry author}{size=\footnotesize} +\setbeamerfont{bibliography entry title}{size=\footnotesize} +\setbeamerfont{bibliography entry year}{size=\footnotesize} +\setbeamerfont{bibliography entry note}{size=\footnotesize} + +\begin{frame}[allowframebreaks] + \frametitle{Links} + \bibliographystyle{unsrt} + \bibliography{bib/references.bib} + \nocite{*} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\end{document} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%