more
[webkit_codecamp] / codecamp.tex
index 4818161..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{afblue}{rgb}{0.46, 0.64, 0.76}
+\definecolor{afblue}{rgb}{0.36, 0.54, 0.66}
 \definecolor{coolblack}{rgb}{0.0, 0.18, 0.39}
 \definecolor{paleaqua}{rgb}{0.74, 0.83, 0.9}
 \definecolor{platinum}{rgb}{0.9, 0.89, 0.89}
@@ -35,7 +35,7 @@
 \definecolor{carolinablue}{rgb}{0.6, 0.73, 0.89}
 \definecolor{amber}{rgb}{1.0, 0.75, 0.0}
 \definecolor{deepjunglegreen}{rgb}{0.0, 0.29, 0.29}
-\definecolor{mediumred-violet}{rgb}{0.73, 0.2, 0.52}
+\definecolor{mediumred-violet}{rgb}{0.63, 0.1, 0.42}
 \definecolor{babypink}{rgb}{0.96, 0.76, 0.76}
 \definecolor{beaublue}{rgb}{0.74, 0.83, 0.9}
 \definecolor{bananayellow}{rgb}{1.0, 0.88, 0.21}
        \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.3cm}
     \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}}
        \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}
 
@@ -317,7 +317,7 @@ program}
 
        \vspace{0.1cm}
 
-       \setbeamertemplate{blocks}[rounded][shadow]
+       \setbeamertemplate{blocks}[rounded]
 
        \begin{block}{\footnotesize{\textbf{Problems when building ANGLE:}}}\scriptsize{\texttt{
                \begin{itemize}
@@ -357,7 +357,7 @@ program}
        \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
        \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
        \setbeamertemplate{itemize items}[triangle]
-       \setbeamertemplate{blocks}[rounded][shadow]
+       \setbeamertemplate{blocks}[rounded]
 
        \begin{center}
        \textbf{\color{coolblack}First Test}
@@ -375,7 +375,7 @@ program}
        \vspace{-0.1cm}
        \begin{block}{\footnotesize{Things I had to take care of:}}
        \begin{itemize}
-               \item {Configure Makefile to find ANGLE \textbf{library paths} and link
+               \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.}
@@ -391,9 +391,9 @@ program}
 \begin{frame}[fragile,c]
     \frametitle{Step 2: Contexts from two drivers in the same
     program 2/2}
-       \vspace{-0.1cm}
+       \vspace{0.1cm}
        \begin{center}
-               \textbf{\color{coolblack}Why invalidate MakeCurrent?}
+               \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
                \\
                \begin{table}[c]
                        \begin{tabularx}{\textwidth}{l X}
@@ -412,23 +412,24 @@ program}
        \setbeamertemplate{itemize/enumerate body begin}{\tiny}
        \setbeamertemplate{itemize items}[circle]
        
-       \scriptsize{
-
-       \textbf{Blog post:}\\
-       Sharing texture data between ANGLE and the native system driver:\\
-       \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}
-       \begin{itemize}
-               \item \texttt{Makefile changes and dynamic loading:}\\
-               {\color{mediumred-violet}Step 1: Using
-                       both libraries in the same program.}
-               \item \texttt{ANGLE MakeCurrent problem:}\\
-               {\color{mediumred-violet}{About ANGLE MakeCurrent.}}
-       \end{itemize}
+       \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.1cm}
+        \vspace{0.3cm}
 
-       \textbf{Code:}\\
-       \url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}
+        \color{black}{\textbf{\texttt{Code:}}}
+        {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}
 
        }
 \end{frame}
@@ -446,14 +447,274 @@ program}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 \begin{frame}[fragile,c]
-    \frametitle{}
+    \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}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -463,6 +724,167 @@ program}
 \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}
+
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -520,32 +942,40 @@ 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:}}
+       \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}
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%