X-Git-Url: https://eleni.mutantstargoat.com/git/?a=blobdiff_plain;f=codecamp.tex;h=447ba569c0df9efbfca395fbe61ad4ac680bd73c;hb=bf49abc6231d45116dd295bc102ff897fa062bbd;hp=6c41365b0ddee763b5c1dd880a1177e34b253844;hpb=da72bf859e2bddc8876f2f7d705479c19c77eddf;p=webkit_codecamp diff --git a/codecamp.tex b/codecamp.tex index 6c41365..447ba56 100644 --- a/codecamp.tex +++ b/codecamp.tex @@ -111,7 +111,8 @@ \put(0,-110.7){% \begin{minipage}[b][38mm][t]{220mm} - \usebeamerfont{title}{\inserttitle\par} + \usebeamerfont{title}{\textbf{Adoption of ANGLE in + WPE/WebKitGTK}\par} \usebeamerfont{author}{\insertauthor\par} \end{minipage} } @@ -129,7 +130,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 +167,7 @@ \end{comment} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% -\section[Introduction]{Introduction: Using ANGLE in WebGL2} +\section[Introduction]{Introduction: Using ANGLE in WebGL2 (WebKit)} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \begin{frame}[fragile,c] @@ -259,29 +260,32 @@ {\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.} + \item {\color{coolblack}\textbf{Similar to WebKit: I've + used ANGLE and EGL in the same program (created 2 X11 windows, and + rendered 2 images from 2 different contexts by 2 different + drivers on them.} \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.} + \item {\color{coolblack}\textbf{Shared context: Filled a shared texture with ANGLE, + displayed it with the native driver. (REJECTED)} \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.} + \item {\color{coolblack}\textbf{DMA-buffers: Filled two textures + from two drivers simultaneously by using a shared Linux kernel + dma-buf buffer. (ADOPTED)} - \tiny{{(drivers must support some EGL/GL extensions, but both mesa and + \tiny{{(drivers should support some EGL/GL extensions: both mesa and ANGLE support them)}} } - \item {\color{coolblack}\textbf{Solve the multiple processes case.} + \item {\color{coolblack}\textbf{Investigated the multiple processes + case. (FUTURE)} \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}} } @@ -309,17 +313,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 +333,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 +343,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,15 +360,14 @@ 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} \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: + I've first written a program where both ANGLE and the native system driver render + images on X11 windows: } \vspace{-0.1cm} \begin{center} @@ -373,7 +375,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.} @@ -406,7 +408,8 @@ program} \vspace{-0.1cm} \begin{center} - \textbf{\color{coolblack}More on Makefile changes and dynamic loading:} + \textbf{\color{coolblack}Read more about invalidation and dynamic + loading:} \end{center} \setbeamertemplate{itemize/enumerate body begin}{\tiny} @@ -464,7 +467,7 @@ program} \\ \rowcolor{platinum} \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config, - \textbf{native\_ctx}, new\_ctx\_attrib);\\ + \textbf{shared\_ctx}, new\_ctx\_attrib);\\ \rowcolor{platinum}\\ \hline \end{tabular} @@ -474,8 +477,9 @@ program} \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!}} + \textbf{\color{coolblack}{Each texture created by the + \texttt{shared\_ctx} can + be bound and used by the \texttt{new\_ctx} while it stays in the GPU!}} } \vspace{0.01cm} @@ -728,11 +732,202 @@ 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 for that + purpose:}} + \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 two native EGL contexts\\ + 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 created 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} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -745,7 +940,6 @@ program} \begin{frame}[fragile,c] \frametitle{What if WebGL and Graphics pipeline were separate processes?} - \setbeamertemplate{blocks}[rounded] \vspace{0.3cm} \center{ @@ -770,7 +964,6 @@ program} } \end{block} - \vspace{0.3cm} \end{frame} @@ -790,24 +983,7 @@ program} \frametitle{WIP WebKit:} \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}} - \vspace{0.3cm} - - {\footnotesize{ - \begin{block}{DONE/WIP/TODO} - \begin{itemize} - \item{Use the right CMake options (one can't simply enable - \texttt{USE\_ANGLE\_WEBGL} ☺): - \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{WIP/TODO}}} - \end{itemize} - \end{block} - }} - - \vspace{0.2cm} + \vspace{0.1cm} \begin{center} \setbeamertemplate{itemize/enumerate body begin}{\scriptsize} \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny} @@ -822,6 +998,22 @@ program} something else (libgbm? copying?)} \end{itemize} \end{center} + \vspace{0.05cm} + {\scriptsize{ + \begin{block}{DONE/WIP/TODO} + \begin{itemize} + \item{Use the right CMake options (one can't simply enable + \texttt{USE\_ANGLE\_WEBGL}!): + \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{WIP/TODO}}} + \end{itemize} + \end{block} + }} + \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -852,5 +1044,32 @@ program} \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +\section[TheEnd]{Closing} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +\begin{frame}[plain] +\begin{minipage}[b][0.6\textheight]{\linewidth} + \begin{picture}(0, 0) + \put(0, -76){% + \pgfuseimage{igaliabglight} + } + \begin{minipage}[b][0.4\textheight]{\linewidth} + \begin{figure} + \includegraphics[scale=0.6]{data/mesa.png} + \end{figure} + \end{minipage} + \put(-200, 0) { + \hfill \huge{\textbf{\color{coolblack}Thank you!}}\\ + } + \end{picture} +\end{minipage} +\end{frame} +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \end{document} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%