more
[webkit_codecamp] / codecamp.tex
index 898b8dd..a89b2a9 100644 (file)
@@ -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{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{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{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}
 \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}}}
 
     \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{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}
                \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}
             \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}
                \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 
                 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.
                 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}
                 lacking it.
         \end{itemize}
        \end{block}
     \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
        \vspace{0.2cm}
 
     \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{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}
                \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}
         \end{itemize}
        \end{block}
-    \begin{block}{\color{afblue}{\footnotesize\textbf{Problem}:}}
+       \vspace{0.3cm}
+    \begin{block}{\color{afblue}{\scriptsize\textbf{Problem}:}}
                \begin{itemize}
                \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}
 
             \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!}}}
 
     \center{\textbf{\color{coolblack}{We need to replace this copy with
     something better!}}}
 
 \end{frame}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \end{frame}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \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}
 
 \begin{frame}[fragile,c]
     \frametitle{Step 1: Setting up to debug ANGLE with GDB}
+
+       \vspace{0.2cm}
+
     \begin{center}
     \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}
     \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
 \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}
     \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}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
     \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}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \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}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \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.}
        \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:
             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{itemize}
 
         }
@@ -349,40 +929,64 @@ program}
 \end{frame}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \end{frame}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \section[WebKit Integration]{WebKit Integration}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 \begin{frame}[fragile,c]
     \frametitle{WIP WebKit:}
 \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}
 
 
        \vspace{0.3cm}
 
+       {\footnotesize{
        \begin{block}{DONE/WIP/TODO}
        \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 }}}
             \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{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{itemize}
-                       }
        \end{block}
        \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}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \end{frame}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \section[References]{References}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %\setbeamertemplate{bibliography entry title}{}
 \section[References]{References}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %\setbeamertemplate{bibliography entry title}{}