X-Git-Url: https://eleni.mutantstargoat.com/git/?p=webkit_codecamp;a=blobdiff_plain;f=codecamp.tex;h=a89b2a92cac58e7a31f4104849251cd671b8763c;hp=898b8ddb880d4c0153801930955f88a182300965;hb=00fff1064313e541fe72c536c8304788a9d4c8a2;hpb=1ee175dc1a7fce50d0b0f59eb5d9aa74c23a21ce diff --git a/codecamp.tex b/codecamp.tex index 898b8dd..a89b2a9 100644 --- a/codecamp.tex +++ b/codecamp.tex @@ -27,7 +27,7 @@ \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{afblue}{rgb}{0.36, 0.54, 0.66} \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} @@ -35,7 +35,7 @@ \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{mediumred-violet}{rgb}{0.63, 0.1, 0.42} \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} @@ -173,29 +173,32 @@ \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 body begin}{\scriptsize} \setbeamertemplate{itemize/enumerate subbody begin}{\tiny} \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny} \setbeamertemplate{itemize items}[triangle] - \setbeamertemplate{blocks}[rounded][shadow] + \setbeamertemplate{blocks}[rounded] - \begin{block}{\color{afblue}{\footnotesize\textbf{EGL/GLESv2}:}} + \vspace{0.3cm} + \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}} \begin{itemize} + \itemsep0.2cm \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} + \vspace{0.3cm} - - \begin{block}{\color{afblue}{\footnotesize\textbf{ANGLE EGL/GLESv2}:}} + \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}} \begin{itemize} - \item GLESv2 is implemented on top of other APIs (OpenGL, + \itemsep0.2cm + \item GLESv2 is implemented \textbf{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 + \textbf{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 + \item Primary \textbf{purpose} of ANGLE is to provide EGL/GLESv2 to systems lacking it. \end{itemize} \end{block} @@ -211,31 +214,36 @@ \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}} \vspace{0.2cm} - \setbeamertemplate{itemize/enumerate body begin}{\footnotesize} + \setbeamertemplate{itemize/enumerate body begin}{\scriptsize} \setbeamertemplate{itemize/enumerate subbody begin}{\tiny} \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny} \setbeamertemplate{itemize items}[triangle] - \setbeamertemplate{blocks}[rounded][shadow] + \setbeamertemplate{blocks}[rounded] + \vspace{0.1cm} - \begin{block}{\color{afblue}{\footnotesize\textbf{Reasons}:}} + \begin{block}{\color{afblue}{\scriptsize\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*) + \item better performance in some cases (Žan Doberšek) + \item it'll be mostly an optimized wrapper around the native driver (libGLES* + is available on Linux desktop!) \end{itemize} \end{block} - \begin{block}{\color{afblue}{\footnotesize\textbf{Problem}:}} + \vspace{0.3cm} + \begin{block}{\color{afblue}{\scriptsize\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 \textbf{ANGLE} renders on a \textbf{GLESv2 texture} created by ANGLE context + \item {\color{coolblack}WebKit \textbf{graphics pipeline} components use + \textbf{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} + \vspace{0.1cm} + \center{\textbf{\color{coolblack}{We need to replace this copy with something better!}}} @@ -282,7 +290,11 @@ \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% - +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same @@ -291,28 +303,596 @@ program} \begin{frame}[fragile,c] \frametitle{Step 1: Setting up to debug ANGLE with GDB} + + \vspace{0.2cm} + \begin{center} + \scriptsize{ + I've ran my experiments using test programs and ANGLE,\\ + and I had to + \textbf{\color{mediumred-violet}modify the default set up} to + debug/explore ANGLE calls with GDB: + } \end{center} + + \vspace{0.1cm} + + \setbeamertemplate{blocks}[rounded] + + \begin{block}{\footnotesize{\textbf{Problems when building ANGLE:}}}\scriptsize{\texttt{ + \begin{itemize} + \itemsep0.1cm + \color{coolblack} + \item {{Default \textbf{gn} configuration redirects debugging + symbols into separate files where GDB can't find them.}} + \item {\textbf{GDB} doesn't know where to find the ANGLE + installation directories.} + \item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's + impossible to step without errors when it's enabled.}} + \item {\textbf{Debugging symbols} aren't enabled by default.} + \end{itemize}}} + \vspace{0.2cm} + \end{block} + + \vspace{0.3cm} + + \scriptsize{ + \setbeamertemplate{itemize item}[circle] + \begin{itemize} + \item {\textbf{Blog post} on how to set up + \textbf{\color{mediumred-violet}{ANGLE}} and \textbf{\color{mediumred-violet}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}} + \item {\textbf{Gist} with the \textbf{\color{mediumred-violet}{GN args}} + I've used: \url{https://gistof.com/gnargs}} + \end{itemize}} + \vspace{0.2cm} \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \begin{frame}[fragile,c] \frametitle{Step 2: Contexts from two drivers in the same - program} + program 1/2} + + \setbeamertemplate{itemize/enumerate body begin}{\scriptsize} + \setbeamertemplate{itemize/enumerate subbody begin}{\tiny} + \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny} + \setbeamertemplate{itemize items}[triangle] + \setbeamertemplate{blocks}[rounded] + + \begin{center} + \textbf{\color{coolblack}First Test} + \end{center} + \vspace{-0.1cm} + \scriptsize{\color{coolblack} + I've first written a program where both ANGLE and native system driver render + images on two different X11 windows and displayed them side by side: + } + \vspace{-0.1cm} + \begin{center} + \adjustbox{valign=t, margin=1ex, + padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}} + \end{center} + \vspace{-0.1cm} + \begin{block}{\footnotesize{Things I had to take care of:}} + \begin{itemize} + \item {Set ANGLE \textbf{library paths} in Makefile and link + with native system EGL.} + \item {\textbf{Dynamically open} ANGLE EGL and load its functions prefixed with + \texttt{angle\_} to distinguish them from native EGL ones.} + \item {Do the same for GLESv2.} + \item {\textbf{Invalidate the ANGLE context} at every display call.\\ + (\textit{When ANGLE is not the only + implementation available \texttt{MakeCurrent} is not working as + expected!!!})} + \end{itemize} + \end{block} +\end{frame} + +\begin{frame}[fragile,c] + \frametitle{Step 2: Contexts from two drivers in the same + program 2/2} + \vspace{0.1cm} + \begin{center} + \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?} + \\ + \begin{table}[c] + \begin{tabularx}{\textwidth}{l X} + \tiny{\textbf{\color{mediumred-violet}Context is cached in ANGLE!}} & + \adjustbox{valign=c, margin=0.1ex, + padding=0.1ex}{\includegraphics[height=2cm]{data/makecurrent.png}} \\ + \end{tabularx} + \end{table} + \end{center} + + \vspace{-0.1cm} + \begin{center} + \textbf{\color{coolblack}More on Makefile changes and dynamic loading:} + \end{center} + + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \setbeamertemplate{itemize items}[circle] + + \tiny{ + \textbf{\texttt{\color{black}{Blog post:}}} + {Sharing texture data between ANGLE and the native system driver:\\ + \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}}\\ + \vspace{0.1cm} + \begin{itemize} + \itemsep0.1cm + \item + {\color{black}Step 1: Using + both libraries in the same program.} + \item + {\color{black}{About ANGLE MakeCurrent.}} + \end{itemize} + + \vspace{0.3cm} + + \color{black}{\textbf{\texttt{Code:}}} + {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}} + + } +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{Shared Context} \begin{center} + \scriptsize{ + \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or + GLESv2 contexts when these contexts are \textit{shared}:}} + } + \vspace{0.001cm} + \texttt{ + \begin{table}[h] + \centering + \begin{adjustbox}{max width=\textwidth} + \begin{tabular}{|l|} + \hline + \rowcolor{platinum} + \\ + \rowcolor{platinum} + \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config, + \textbf{native\_ctx}, new\_ctx\_attrib);\\ + \rowcolor{platinum}\\ + \hline + \end{tabular} + \end{adjustbox} + \end{table} + } + + \vspace{0.1cm} + \scriptsize{ + \textbf{\color{coolblack}{A texture generated by each context can be bound and used by the + other\\ without ever leaving the GPU!}} + } + \vspace{0.01cm} + + \tiny{ + \texttt{ + \begin{table}[h] + \centering + \begin{adjustbox}{max width=\textwidth} + \begin{tabular}{|l|} + \rowcolor{platinum} + \hline + \rowcolor{platinum} + \\ + \rowcolor{platinum} + glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\ + \rowcolor{platinum} + {\color{darkgray}/* ... gl operations ... */}\\ + \rowcolor{platinum} + \\ + \rowcolor{platinum} + angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\ + \rowcolor{platinum} + {\color{darkgray}/* ... angle\_gl operations ... */}\\ + \rowcolor{platinum} + \\\hline + \end{tabular} + \end{adjustbox} + \end{table} + }} + + \vspace{0.2cm} + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \setbeamertemplate{itemize items}[triangle] + + %\setbeamertemplate{blocks} + \scriptsize{ \textbf{\color{coolblack}{Shared context restrictions:}}} + \vspace{0.1cm} + \begin{itemize} + \item Contexts must be created by the \textbf{same API} (both OpenGL, + or both GLESv2, same driver). + \item Contexts must be created by the \textbf{same + process}.(\textbf{=> + {\color{coolblack}{not + suitable for every project!}}}) + \end{itemize} \end{center} \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[fragile,c] + \frametitle{Could we use shared context in WebKit?} + + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \setbeamertemplate{itemize items}[triangle] + \begin{center} + \scriptsize{ + \textbf{\color{coolblack} Could we use shared context in WebKit?}\\ + + \vspace{0.2cm} + + \textbf{Short answer:} Currently yes (with some workaround) but not in the + future. + + \vspace{0.3cm} + + \begin{block}{Requirements to use shared context/textures in \textbf{WebKit}:} + \begin{itemize} + \item We should use the \textbf{ANGLE EGL/OpenGL backend in + WebGL2} to + match the main Graphics Pipeline API/driver (both contexts + should be OpenGL or GLESv2 and from the same driver!) + \item We'd need an \textbf{ANGLE extension} to allow passing + native shared context to ANGLE's eglCreateContext instead of + ANGLE shared context. + \item We should never move WebGL2 and Graphics Pipeline in + different processes. Shared contexts should be created by + the same process! (\textbf{Reason we've rejected this + method}). + \end{itemize} + \end{block} + } + + \vspace{0.3cm} + + \tiny{ + \textbf{\color{coolblack}{NEW}} ANGLE extension:\\ + \texttt{EGL\_ANGLE\_native\_shared\_context} + + \vspace{0.2cm} + + + \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed + to \texttt{\color{afblue}eglCreateContext}:\\ + \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE} + + \vspace{0.3cm} + {\color{coolblack} + This attribute indicates that the shared context in + \texttt{\color{deepjunglegreen}eglCreateContext} + is \textbf{not ANGLE} and should be used as native in the internal + implementation. + } + } + \end{center} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\begin{frame}[fragile,c] + \frametitle{EGL\_ANGLE\_native\_shared\_context} + + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \setbeamertemplate{itemize items}[triangle]{\tiny} + \setbeamercolor{block body}{bg=white} + + \begin{center} + \tiny{ + \begin{block}{This is how we create shared OpenGL + context using EGL (system or ANGLE):} + \centering + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}} + \end{adjustbox} + + \begin{comment} + {\color{coolblack} + \begin{table}[t] + \centering + \begin{adjustbox}{max width=\textwidth} + \begin{tabular}{l} + · In case of system EGL \texttt{ctx\_A} and + \texttt{ctx\_B} are native + EGL contexts.\\ + · In case of ANGLE they are ANGLE EGL contexts.\\ + \end{tabular} + \end{adjustbox} + \end{table} + } + \end{comment} + \end{block} + } + + \tiny{ + \begin{block}{This is how we'd create shared + OpenGL context between native EGL and ANGLE EGL using + \texttt{EGL\_ANGLE\_native\_shared\_context}:} + + \vspace{0.2cm} + \begin{itemize} + \item \tiny{We'd pass the native EGL context (created by the native system + driver) as {\color{black}shared context} to the + native OpenGL context that is created {\color{black}in the ANGLE + OpenGL backend} using the native system driver!} + \item \tiny{We'd need use the {\color{black}new EGL attribute + (\texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE})} to let ANGLE know + that the shared context \textit{\color{coolblack}is not ANGLE but native} + context!} + \end{itemize} + \vspace{-0.2cm} + + \begin{table}[t] + \centering + \begin{tabular}{l} + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}} + \end{adjustbox} + \end{tabular} + \end{table} + \end{block} + } + + + \end{center} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\begin{frame}[fragile,c] + \frametitle{Some work on the shared context approach} + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \setbeamertemplate{itemize items}[triangle]{\tiny} + \setbeamercolor{block body}{bg=white} + + \begin{center} + \begin{block}{\tiny{Extension + \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}:}} + \vspace{0.2cm} + \tiny{ + \begin{table}[h] + \centering + Worked on the extension implementation (draft state, there are + bugs).\\ + \begin{tabular}{l} + \\ + \textbf{Concept:}\\ + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}} + \end{adjustbox}\\ + \end{tabular} + \end{table} + } + \end{block} + \begin{block}{\tiny{Experimental programs (to test the extension and + familiarize with the shared context concept):}} + \begin{itemize} + \item A test program that uses EGL ctxA to create a texture and + EGL ctxB to display it on an X11 window. + \item The same program written in ANGLE (there were + differences!) + \item A test program that uses EGL ctxA to create a texture and + ANGLE EGL ctxB to display it on an X11 window. + \item Variations of the above: + \url{https://github.com/hikiko/shctx/branches} + \end{itemize} + \end{block} + \end{center} + \end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + \begin{frame} + \frametitle{Abandoned!} + \begin{center} + \textbf{\color{coolblack} Why not shared context?} + \vspace{0.5cm} + + {\footnotesize{ + \begin{itemize} + \item Shared context would be a nice and clean approach if we wanted to use + it with our current WebKit code. + \item But there is a plan to use \textbf{separate processes} for WebGL2 and + the main graphics pipeline!! (Žan Doberšek) + \end{itemize} + }} + + \vspace{0.5cm} + \textbf{\color{coolblack} But there was a \textit{better} approach!} + \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} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\begin{frame} + \frametitle{DMA buffers for the win!} + + \begin{center} + \textbf{\color{coolblack}Fortunately we are on Linux!} + + \setbeamercolor{block body}{bg=white} + \setbeamercolor{block title}{bg=white, fg=coolblack} + \begin{block}{\scriptsize{There is a Linux kernel framework that can be used for + content sharing between different Linux drivers!}} + + \vspace{-0.1cm} + \begin{table}[t] + \centering + \begin{tabular}{l} + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}} + \end{adjustbox} + \end{tabular} + \end{table} + + \textbf{\scriptsize{\color{coolblack}A few things that need our attention:}}\\ + \vspace{0.1cm} + + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \begin{itemize} + \item There are {\color{coolblack}EGL and OpenGL/GLESv2 + extensions} to make this content sharing easier! + \item It's {\color{coolblack}driver independent}! + \item It works with {\color{coolblack}multiple processes}! + \item As long as ANGLE can expose the required extensions to + import a dma\_buf file descriptor this method is + {\color{coolblack}"ANGLE backend + independent"}! + \item Works {\color{coolblack}only on Linux}... but in case of + WPE we won't need to support other systems! (Žan Doberšek) + \end{itemize} + \end{block} + \end{center} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame} + \frametitle{Extensions and new approach} + + \setbeamercolor{block body}{bg=white} + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + + \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying + the WebGL texture data?}} + + \begin{center} + \begin{itemize} + \item Each texture is backed by a Linux kernel dma\_buffer. + \item Multiple textures can use the same dma buffer as backing + storage if they meet some requirements. + \item We can export the file descriptor of one buffer from one + driver and use it to access the buffer from the other + driver. + \item So we can export the FD that corresponds to the compositor + texture, import it in WebGL when we create the render target + and when the WebGL texture is filled, the compositor texture + will be also filled, as they share the backing storage! + \end{itemize} + \end{center} + \end{block} + \begin{block}{\scriptsize{EGL and GL extensions that can be used:}} + \begin{center} + \begin{itemize} + \item + \href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}: + \\ This extension allows creating one or multiple Linux dma\_buf + file descriptors from the EGLImage that corresponds to a texture. + \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}: + \\ This extension allows creating an EGLImage (that will be used to create a + texture) from one or multiple Linux dma\_buf file + descriptors. + \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import\_modifiers.txt}{EGL\_EXT\_image\_dma\_buf\_import\_modifiers}: + \\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support + format modifiers used for tiling, compression, and additional non-linear + modes. + \item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}: + \\ This extension provides a mechanism for creating EGLImage texture targets + from EGLImages. + \end{itemize} + \end{center} + \end{block} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame} + \frametitle{Example:} + + \setbeamercolor{block body}{bg=white}{\scriptsize} + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + + \begin{block}{\scriptsize{I've written an example:}} + \begin{center} + \begin{itemize} + \item First using EGL!\\ + Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\ + Code: \url{https://gistof.com/dma-egl-version} + \item Then using a native EGL context and a context from ANGLE!\\ + Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\ + Code: \url{https://gistof.com/dmaangleeglversion} + \end{itemize} + \end{center} + \end{block} + \vspace{-0.3cm} + \begin{block}{\scriptsize{Snippet from the exporter:}} + \vspace{-0.1cm} + \tiny{ + \begin{table}[t] + \centering + \begin{tabular}{l} + {\color{coolblack}Exporting a dma buffer from a texture + \texttt{texA}:}\\ + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[height=4cm]{data/dma_export_and_struct.png}} + \end{adjustbox}\\ + \end{tabular} + \end{table} + } + \end{block} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame} + \frametitle{Example continued} + \setbeamercolor{block body}{bg=white}{\scriptsize} + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + + \begin{block}{\scriptsize{Snippets from the importer:}} + \vspace{-0.1cm} + \tiny{ + \begin{table}[t] + \centering + \begin{tabular}{l} + {\color{coolblack}Creating an EGLImage from the dma buffer using + the exported fd and the exported modifiers:}\\ + \\ + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}} + \end{adjustbox}\\ +\\ +\\ + {\color{coolblack}Creating a texture using that external + EGLImage:}\\ + \\ + \begin{adjustbox}{max width=\textwidth} + \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}} + \end{adjustbox}\\ + \end{tabular} + \end{table} + } + \end{block} +\end{frame} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[Multiple Processes]{Multiple Processes} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -334,12 +914,12 @@ program} \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 + \item {\color{coolblack} But we need some sort of \textbf{\textit{interprocess + communication}} to exchange the file descriptor.} + \item {\color{coolblack} This is a client-server + \textbf{\textit{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.} + \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.} \end{itemize} } @@ -349,40 +929,64 @@ program} \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:}} + \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}} \vspace{0.3cm} + {\footnotesize{ \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{There were compile errors when ANGLE was used: + \color{coolblack}{\textbf{FIXED/Pending to send the patches}}} \item{Link errors when ANGLE is used: \color{coolblack}{\textbf{WIP/Partially FIXED}}} - \item{Copy replacement: \color{coolblack}{\textbf{TODO}}} + \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}} \end{itemize} - } \end{block} + }} + + \vspace{0.2cm} + \begin{center} + \setbeamertemplate{itemize/enumerate body begin}{\scriptsize} + \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny} + \begin{itemize} + \itemsep0.2cm + \item The extensions to import dma-buf buffers in ANGLE are + implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline + DMA buf when we create the render target!} + \item The extension to export dma-buf buffers from EGL is + supported on mesa => {\color{coolblack}we could run a check before creating + the shared dma buffer and use either use it or fallback to + something else (libgbm? copying?)} + \end{itemize} + \end{center} \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[References]{References} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %\setbeamertemplate{bibliography entry title}{}