\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}
\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}
\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}
\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!}}}
\end{frame}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
\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}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\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}
}
\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}{}
projects / webkit_codecamp / blobdiff