X-Git-Url: http://git.mutantstargoat.com?a=blobdiff_plain;f=codecamp.tex;h=24cfebb7a98599cca33b43a9ecdb5b55441c50d5;hb=70b34c2424b01ce1fb33f8eed9acf1f09bd1be9e;hp=f6bed1e780d54905af8f5b5a088d99ce113ba1f8;hpb=6f56d1d56bab927adbddb8f2a70f0b1b69b71860;p=webkit_codecamp diff --git a/codecamp.tex b/codecamp.tex index f6bed1e..24cfebb 100644 --- a/codecamp.tex +++ b/codecamp.tex @@ -129,7 +129,7 @@ \setbeamertemplate{blocks}[default] \setbeamercolor{block title}{fg=amber,bg=black} -\title{\textbf{Sharing texture data between drivers}} +\title{\textbf{Sharing texture data across EGL drivers}} \author[Eleni Maria Stea ]{\small{Eleni Maria Stea }\\\\\includegraphics{data/igalia.eps}} \date{\tiny{WebKit Codecamp}} @@ -166,7 +166,7 @@ \end{comment} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% -\section[Introduction]{Introduction: Using ANGLE in WebGL2} +\section[Introduction]{Introduction: Using ANGLE in WebGL2 (WebKit)} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \begin{frame}[fragile,c] @@ -309,17 +309,16 @@ program} \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: + and I had to modify the default set up to step into ANGLE calls with GDB: } \end{center} \vspace{0.1cm} - \setbeamertemplate{blocks}[rounded] - - \begin{block}{\footnotesize{\textbf{Problems when building ANGLE:}}}\scriptsize{\texttt{ + \setbeamertemplate{itemize/enumerate body begin}{\scriptsize} + \begin{block}{\scriptsize{Things that need attention when building ANGLE for + debugging:}}\scriptsize{ + \vspace{0.2cm} \begin{itemize} \itemsep0.1cm \color{coolblack} @@ -330,7 +329,7 @@ program} \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}}} + \end{itemize}} \vspace{0.2cm} \end{block} @@ -340,8 +339,8 @@ program} \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}} + {\color{black}{ANGLE}} and {\color{black}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}} + \item {\textbf{Gist} with the {\color{black}{GN args}} I've used: \url{https://gistof.com/gnargs}} \end{itemize}} \vspace{0.2cm} @@ -357,7 +356,6 @@ program} \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} @@ -373,7 +371,7 @@ program} 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{block}{\footnotesize{Some parts that needed attention:}} \begin{itemize} \item {Set ANGLE \textbf{library paths} in Makefile and link with native system EGL.} @@ -705,7 +703,7 @@ program} \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. + the main graphics pipeline!! (Žan Doberšek) \end{itemize} }} @@ -728,11 +726,199 @@ program} \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 across 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 interesting things about + content sharing with dma buffers:}}\\ + \vspace{0.1cm} + + \setbeamertemplate{itemize/enumerate body begin}{\tiny} + \begin{itemize} + \item There are {\color{coolblack}EGL and OpenGL/GLESv2 + extensions} to make it easier! + \item It's a {\color{coolblack}driver independent} method! + \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 also + {\color{coolblack}"ANGLE backend + independent"}! + \item DMA buffers are a {\color{coolblack}Linux-only} thing... + but 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} + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\begin{frame} + \frametitle{Test program} + + \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native + EGL}} + \setbeamertemplate{itemize/enumerate body begin}{\scriptsize} + \begin{itemize} + \itemsep0.3cm + \itemsep0.2cm + \item First context is EGL/OpenGL like the one in main graphics + pipeline. + \item Second is ANGLE with EGL/GLESv2 backend like the one in + WebGL2. + \item EGL/OpenGL context creates an empty texture and exports the dma\_buf + fd and all other information about the buffer. + \item ANGLE context creates another empty texture using the same + dma\_buf and the import mechanism. + \item ANGLE context fills the emty ANGLE texture. + \item EGL/OpenGL context displays the previously empty OpenGL/EGL + texture. + \item EGL/OpenGL texture contains what ANGLE texture had. + \item \textbf{We shared the ANGLE data without copying them!} + \end{itemize} + + \end{block} + \vspace{0.2cm} + \scriptsize{ + \begin{center} + \textbf{\color{coolblack}Check the blog posts for more details!} + \end{center} + } +\end{frame} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -770,7 +956,6 @@ program} } \end{block} - \vspace{0.3cm} \end{frame} @@ -788,32 +973,39 @@ program} \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} + \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}} + \vspace{0.1cm} + \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} + \vspace{0.05cm} + {\scriptsize{ \begin{block}{DONE/WIP/TODO} - \footnotesize{ \begin{itemize} \item{Use the right CMake options (one can't simply enable - \texttt{USE\_ANGLE\_WEBGL} ☺): + \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} + }} + \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%