\put(0,-110.7){%
\begin{minipage}[b][38mm][t]{220mm}
- \usebeamerfont{title}{\inserttitle\par}
+ \usebeamerfont{title}{\textbf{Adoption of ANGLE in
+ WPE/WebKitGTK}\par}
\usebeamerfont{author}{\insertauthor\par}
\end{minipage}
}
\setbeamertemplate{blocks}[default]
\setbeamercolor{block title}{fg=amber,bg=black}
-\title{\textbf{Sharing texture data between drivers}}
+\title{\textbf{Sharing texture data across EGL drivers}}
\author[Eleni Maria Stea <estea@igalia.com>]{\small{Eleni Maria Stea
<estea@igalia.com>}\\\\\includegraphics{data/igalia.eps}}
\date{\tiny{WebKit Codecamp}}
\end{comment}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\section[Introduction]{Introduction: Using ANGLE in WebGL2}
+\section[Introduction]{Introduction: Using ANGLE in WebGL2 (WebKit)}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{frame}[fragile,c]
{\footnotesize{
\begin{enumerate}
\itemsep0.3cm
- \item {\color{coolblack}\textbf{Use ANGLE and EGL in the same program:
- create 2 X11 windows, and draw 2 images from 2 different contexts
- by 2 different drivers.}
+ \item {\color{coolblack}\textbf{Similar to WebKit: I've
+ used ANGLE and EGL in the same program (created 2 X11 windows, and
+ rendered 2 images from 2 different contexts by 2 different
+ drivers on them.}
\tiny{{(In several cases ANGLE behaves
different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
call \texttt{eglMakeCurrent}!!).}}
}
- \item {\color{coolblack}\textbf{Fix the problem with shared
- context and shared textures.}
+ \item {\color{coolblack}\textbf{Shared context: Filled a shared texture with ANGLE,
+ displayed it with the native driver. (REJECTED)}
\tiny{{(required
modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
EGL/OpenGL backend, and it wouldn't work with multiple
processes)}}
}
- \item {\color{coolblack}\textbf{Fix the problem by sharing a Linux kernel
- dma-buf buffer across drivers.}
+ \item {\color{coolblack}\textbf{DMA-buffers: Filled two textures
+ from two drivers simultaneously by using a shared Linux kernel
+ dma-buf buffer. (ADOPTED)}
- \tiny{{(drivers must support some EGL/GL extensions, but both mesa and
+ \tiny{{(drivers should support some EGL/GL extensions: both mesa and
ANGLE support them)}}
}
- \item {\color{coolblack}\textbf{Solve the multiple processes case.}
+ \item {\color{coolblack}\textbf{Investigated the multiple processes
+ case. (FUTURE)}
\tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
}
\begin{center}
\scriptsize{
I've ran my experiments using test programs and ANGLE,\\
- and I had to
- \textbf{\color{mediumred-violet}modify the default set up} to
- debug/explore ANGLE calls with GDB:
+ and I had to modify the default set up to step into ANGLE calls with GDB:
}
\end{center}
\vspace{0.1cm}
- \setbeamertemplate{blocks}[rounded]
-
- \begin{block}{\footnotesize{\textbf{Problems when building ANGLE:}}}\scriptsize{\texttt{
+ \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
+ \begin{block}{\scriptsize{Things that need attention when building ANGLE for
+ debugging:}}\scriptsize{
+ \vspace{0.2cm}
\begin{itemize}
\itemsep0.1cm
\color{coolblack}
\item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's
impossible to step without errors when it's enabled.}}
\item {\textbf{Debugging symbols} aren't enabled by default.}
- \end{itemize}}}
+ \end{itemize}}
\vspace{0.2cm}
\end{block}
\setbeamertemplate{itemize item}[circle]
\begin{itemize}
\item {\textbf{Blog post} on how to set up
- \textbf{\color{mediumred-violet}{ANGLE}} and \textbf{\color{mediumred-violet}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
- \item {\textbf{Gist} with the \textbf{\color{mediumred-violet}{GN args}}
+ {\color{black}{ANGLE}} and {\color{black}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
+ \item {\textbf{Gist} with the {\color{black}{GN args}}
I've used: \url{https://gistof.com/gnargs}}
\end{itemize}}
\vspace{0.2cm}
\setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
\setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
\setbeamertemplate{itemize items}[triangle]
- \setbeamertemplate{blocks}[rounded]
\begin{center}
\textbf{\color{coolblack}First Test}
\end{center}
\vspace{-0.1cm}
\scriptsize{\color{coolblack}
- I've first written a program where both ANGLE and native system driver render
- images on two different X11 windows and displayed them side by side:
+ I've first written a program where both ANGLE and the native system driver render
+ images on X11 windows:
}
\vspace{-0.1cm}
\begin{center}
padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
\end{center}
\vspace{-0.1cm}
- \begin{block}{\footnotesize{Things I had to take care of:}}
+ \begin{block}{\footnotesize{Some parts that needed attention:}}
\begin{itemize}
\item {Set ANGLE \textbf{library paths} in Makefile and link
with native system EGL.}
\vspace{-0.1cm}
\begin{center}
- \textbf{\color{coolblack}More on Makefile changes and dynamic loading:}
+ \textbf{\color{coolblack}Read more about invalidation and dynamic
+ loading:}
\end{center}
\setbeamertemplate{itemize/enumerate body begin}{\tiny}
\\
\rowcolor{platinum}
\textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
- \textbf{native\_ctx}, new\_ctx\_attrib);\\
+ \textbf{shared\_ctx}, new\_ctx\_attrib);\\
\rowcolor{platinum}\\
\hline
\end{tabular}
\vspace{0.1cm}
\scriptsize{
- \textbf{\color{coolblack}{A texture generated by each context can be bound and used by the
- other\\ without ever leaving the GPU!}}
+ \textbf{\color{coolblack}{Each texture created by the
+ \texttt{shared\_ctx} can
+ be bound and used by the \texttt{new\_ctx} while it stays in the GPU!}}
}
\vspace{0.01cm}
\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!}}
+ content sharing across different Linux drivers!}}
\vspace{-0.1cm}
\begin{table}[t]
\end{tabular}
\end{table}
- \textbf{\scriptsize{\color{coolblack}A few things that need our attention:}}\\
+ \textbf{\scriptsize{\color{coolblack}A few interesting things about
+ content sharing with dma buffers:}}\\
\vspace{0.1cm}
\setbeamertemplate{itemize/enumerate body begin}{\tiny}
\begin{itemize}
\item There are {\color{coolblack}EGL and OpenGL/GLESv2
- extensions} to make this content sharing easier!
- \item It's {\color{coolblack}driver independent}!
+ extensions} to make it easier!
+ \item It's a {\color{coolblack}driver independent} method!
\item It works with {\color{coolblack}multiple processes}!
\item As long as ANGLE can expose the required extensions to
- import a dma\_buf file descriptor this method is
+ import a dma\_buf file descriptor this method is also
{\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)
+ \item DMA buffers are a {\color{coolblack}Linux-only} thing...
+ but we won't need to support other systems! (Žan Doberšek)
\end{itemize}
\end{block}
\end{center}
\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
+ \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{block}{\scriptsize{EGL and GL extensions that can be used for that
+ purpose:}}
\begin{center}
\begin{itemize}
\item
\begin{block}{\scriptsize{I've written an example:}}
\begin{center}
\begin{itemize}
- \item First using EGL!\\
+ \item First using two native EGL contexts\\
Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
Code: \url{https://gistof.com/dma-egl-version}
- \item Then using a native EGL context and a context from ANGLE!\\
+ \item Then using a native EGL context and a context created from
+ ANGLE\\
Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
Code: \url{https://gistof.com/dmaangleeglversion}
\end{itemize}
\end{frame}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\begin{frame}
+ \frametitle{Test program}
+
+ \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
+ EGL}}
+ \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
+ \begin{itemize}
+ \itemsep0.3cm
+ \itemsep0.2cm
+ \item First context is EGL/OpenGL like the one in main graphics
+ pipeline.
+ \item Second is ANGLE with EGL/GLESv2 backend like the one in
+ WebGL2.
+ \item EGL/OpenGL context creates an empty texture and exports the dma\_buf
+ fd and all other information about the buffer.
+ \item ANGLE context creates another empty texture using the same
+ dma\_buf and the import mechanism.
+ \item ANGLE context fills the emty ANGLE texture.
+ \item EGL/OpenGL context displays the previously empty OpenGL/EGL
+ texture.
+ \item EGL/OpenGL texture contains what ANGLE texture had.
+ \item \textbf{We shared the ANGLE data without copying them!}
+ \end{itemize}
+
+ \end{block}
+ \vspace{0.2cm}
+ \scriptsize{
+ \begin{center}
+ \textbf{\color{coolblack}Check the blog posts for more details!}
+ \end{center}
+ }
+\end{frame}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{frame}[fragile,c]
\frametitle{What if WebGL and Graphics pipeline were separate processes?}
- \setbeamertemplate{blocks}[rounded]
\vspace{0.3cm}
\center{
}
\end{block}
-
\vspace{0.3cm}
\end{frame}
\frametitle{WIP WebKit:}
\center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
- \vspace{0.3cm}
-
- {\footnotesize{
- \begin{block}{DONE/WIP/TODO}
- \begin{itemize}
- \item{Use the right CMake options (one can't simply enable
- \texttt{USE\_ANGLE\_WEBGL} ☺):
- \color{coolblack}{\textbf{FIXED }}}
- \item{There were compile errors when ANGLE was used:
- \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
- \item{Link errors when ANGLE is used:
- \color{coolblack}{\textbf{WIP/Partially FIXED}}}
- \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
- \end{itemize}
- \end{block}
- }}
-
- \vspace{0.2cm}
+ \vspace{0.1cm}
\begin{center}
\setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
\setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
something else (libgbm? copying?)}
\end{itemize}
\end{center}
+ \vspace{0.05cm}
+ {\scriptsize{
+ \begin{block}{DONE/WIP/TODO}
+ \begin{itemize}
+ \item{Use the right CMake options (one can't simply enable
+ \texttt{USE\_ANGLE\_WEBGL}!):
+ \color{coolblack}{\textbf{FIXED }}}
+ \item{There were compile errors when ANGLE was used:
+ \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
+ \item{Link errors when ANGLE is used:
+ \color{coolblack}{\textbf{WIP/Partially FIXED}}}
+ \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
+ \end{itemize}
+ \end{block}
+ }}
+
\end{frame}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\end{frame}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[TheEnd]{Closing}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[plain]
+\begin{minipage}[b][0.6\textheight]{\linewidth}
+ \begin{picture}(0, 0)
+ \put(0, -76){%
+ \pgfuseimage{igaliabglight}
+ }
+ \begin{minipage}[b][0.4\textheight]{\linewidth}
+ \begin{figure}
+ \includegraphics[scale=0.6]{data/mesa.png}
+ \end{figure}
+ \end{minipage}
+ \put(-200, 0) {
+ \hfill \huge{\textbf{\color{coolblack}Thank you!}}\\
+ }
+ \end{picture}
+\end{minipage}
+\end{frame}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\end{document}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
projects / webkit_codecamp / blobdiff