1 \documentclass[usenames,dvipsnames]{beamer}
2 \usepackage[font=small,skip=-1pt]{caption}
4 \usepackage{color, colortbl}
11 \usepackage{tgpagella}
12 \usepackage[utf8]{inputenc}
14 \usepackage{tabularx, array, booktabs}
18 \usepackage{adjustbox}
20 \newcommand\topalign[1]{%
22 \raisebox{\dimexpr-\ht0+\dp0\relax}{\usebox0}}
24 \definecolor{blond}{rgb}{0.98, 0.94, 0.75}
25 \definecolor{beige}{rgb}{0.96, 0.96, 0.86}
26 \definecolor{mGreen}{rgb}{0,0.6,0}
27 \definecolor{mGray}{rgb}{0.5,0.5,0.5}
28 \definecolor{mPurple}{rgb}{0.58,0,0.82}
29 \definecolor{bgcolor}{rgb}{0.8,0.8,0.8}
30 \definecolor{afblue}{rgb}{0.36, 0.54, 0.66}
31 \definecolor{coolblack}{rgb}{0.0, 0.18, 0.39}
32 \definecolor{paleaqua}{rgb}{0.74, 0.83, 0.9}
33 \definecolor{platinum}{rgb}{0.9, 0.89, 0.89}
34 \definecolor{whitesmoke}{rgb}{0.96, 0.96, 0.96}
35 \definecolor{carolinablue}{rgb}{0.6, 0.73, 0.89}
36 \definecolor{amber}{rgb}{1.0, 0.75, 0.0}
37 \definecolor{deepjunglegreen}{rgb}{0.0, 0.29, 0.29}
38 \definecolor{mediumred-violet}{rgb}{0.63, 0.1, 0.42}
39 \definecolor{babypink}{rgb}{0.96, 0.76, 0.76}
40 \definecolor{beaublue}{rgb}{0.74, 0.83, 0.9}
41 \definecolor{bananayellow}{rgb}{1.0, 0.88, 0.21}
42 \definecolor{bananamania}{rgb}{0.98, 0.91, 0.81}
43 \definecolor{crimsonglory}{rgb}{0.75, 0.0, 0.2}
45 \lstdefinestyle{CStyle}{
46 language=C++, % choose the language of the code
47 % basicstyle=\footnotesize, % the size of the fonts that are used for the code
48 basicstyle=\tt\color{afblue},
49 breakatwhitespace=false,
51 backgroundcolor=\color{bgcolor}, % choose the background color. You must add \usepackage{color}
52 showspaces=false, % show spaces adding particular underscores
53 showstringspaces=false, % underline spaces within strings
54 showtabs=false, % show tabs within strings adding particular underscores
55 frame=single, % adds a frame around the code
56 tabsize=2, % sets default tabsize to 2 spaces
57 captionpos=b, % sets the caption-position to bottom
58 breaklines=true, % sets automatic line breaking
59 breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
60 commentstyle=\color{mGreen},
61 keywordstyle=\color{magenta},
62 stringstyle=\color{mPurple},
63 rulesepcolor=\color{gray},
64 rulecolor=\color{black},
67 \setmainfont{Noto Sans} % substitute with any font that exists on your system
68 \setsansfont{Noto Sans} % substitute with any font that exists on your system
69 \setmonofont{Noto Sans Mono Medium} % substitute with any font that exists on your system
72 \useoutertheme{infolines}
75 \captionsetup[figure]{labelformat=empty}
77 \addtobeamertemplate{headline}{}{\vskip2pt}
78 \addtobeamertemplate{headline}{}{%
79 \begin{textblock*}{5mm}(.9\textwidth,-0.6cm)
80 \includegraphics[height=0.67cm]{data/igalia-logo.png}
83 \definecolor{links}{rgb}{0.1, 0.3, 0.6}
84 \hypersetup{colorlinks,linkcolor=,urlcolor=links}
86 \pgfdeclareimage[height=\paperheight]{igaliabglight}{data/igalia_bg_light.eps}
87 \pgfdeclareimage[height=\paperheight]{igaliabg}{data/igaliabg.eps}
89 %\setbeamertemplate{title page}{
90 % \begin{picture}(-90, 180)
92 % \pgfuseimage{igaliabg}
96 % \begin{minipage}[b][36mm][t]{240mm}
97 % \usebeamerfont{title}{\inserttitle\par}
98 % \usebeamerfont{author}{\insertauthor\par}
99 % \usebeamerfont{title}{\insertinstitute\par}
105 \setbeamertemplate{navigation symbols}{}
106 \setbeamertemplate{title page}{
109 \pgfuseimage{igaliabg}
113 \begin{minipage}[b][38mm][t]{220mm}
114 \usebeamerfont{title}{\inserttitle\par}
115 \usebeamerfont{author}{\insertauthor\par}
120 \usebeamerfont{date}{\huge{{\insertdate}}\par}
125 \setbeamertemplate{itemize items}[triangle]
126 \setbeamertemplate{itemize subitem}[circle]
127 \setbeamerfont{frametitle}{size=\small}
129 \setbeamertemplate{blocks}[default]
130 \setbeamercolor{block title}{fg=amber,bg=black}
132 \title{\textbf{Sharing texture data between drivers}}
133 \author[Eleni Maria Stea <estea@igalia.com>]{\small{Eleni Maria Stea
134 <estea@igalia.com>}\\\\\includegraphics{data/igalia.eps}}
135 \date{\tiny{WebKit Codecamp}}
141 \tableofcontents[currentsection]
145 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
147 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
158 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
161 \begin{frame}[fragile,c]
168 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
169 \section[Introduction]{Introduction: Using ANGLE in WebGL2}
170 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
172 \begin{frame}[fragile,c]
173 \frametitle{A few words about ANGLE}
174 \center{\textbf{\color{coolblack}{ANGLE is an EGL/GLESv2 implementation}}}
176 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
177 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
178 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
179 \setbeamertemplate{itemize items}[triangle]
180 \setbeamertemplate{blocks}[rounded]
183 \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}}
186 \item GLESv2 is used to render graphics using the GPU (graphics
188 \item EGL is used to create a GLESv2 context.
193 \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}}
196 \item GLESv2 is implemented \textbf{on top of other APIs} (OpenGL,
197 Vulkan, GLESv2). EGL too (EGL, GLX, gbm, headless display).
198 \item Users can select the most convenient backend using some
199 \textbf{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that
200 provide extra attributes to some standard EGL API stucts.
201 \item Primary \textbf{purpose} of ANGLE is to provide EGL/GLESv2 to systems
209 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
211 \begin{frame}[fragile,c]
212 \frametitle{Using ANGLE in WebKit}
214 \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
217 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
218 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
219 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
220 \setbeamertemplate{itemize items}[triangle]
221 \setbeamertemplate{blocks}[rounded]
225 \begin{block}{\color{afblue}{\scriptsize\textbf{Reasons}:}}
227 \item better performance in some cases (Žan Doberšek)
228 \item it'll be mostly an optimized wrapper around the native driver (libGLES*
229 is available on Linux desktop!)
233 \begin{block}{\color{afblue}{\scriptsize\textbf{Problem}:}}
235 \item \textbf{ANGLE} renders on a \textbf{GLESv2 texture} created by ANGLE context
236 \item {\color{coolblack}WebKit \textbf{graphics pipeline} components use
237 \textbf{OpenGL textures} that
238 are composited by the WebKit compositor}
239 \item We are currently \textbf{\textit{copying}} the ANGLE texture data to
240 an OpenGL texture to assemble the final image and this is
241 \textbf{\textit{slow}}!
247 \center{\textbf{\color{coolblack}{We need to replace this copy with
253 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
255 \begin{frame}[fragile,c]
256 \frametitle{Experiments on Linux}
262 \item {\color{coolblack}\textbf{Use ANGLE and EGL in the same program:
263 create 2 X11 windows, and draw 2 images from 2 different contexts
264 by 2 different drivers.}
266 \tiny{{(In several cases ANGLE behaves
267 different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
268 call \texttt{eglMakeCurrent}!!).}}
270 \item {\color{coolblack}\textbf{Fix the problem with shared
271 context and shared textures.}
274 modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
275 EGL/OpenGL backend, and it wouldn't work with multiple
278 \item {\color{coolblack}\textbf{Fix the problem by sharing a Linux kernel
279 dma-buf buffer across drivers.}
281 \tiny{{(drivers must support some EGL/GL extensions, but both mesa and
282 ANGLE support them)}}
284 \item {\color{coolblack}\textbf{Solve the multiple processes case.}
286 \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
292 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
293 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
294 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
295 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
296 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
297 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
299 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
300 \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
302 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
304 \begin{frame}[fragile,c]
305 \frametitle{Step 1: Setting up to debug ANGLE with GDB}
311 I've ran my experiments using test programs and ANGLE,\\
313 \textbf{\color{mediumred-violet}modify the default set up} to
314 debug/explore ANGLE calls with GDB:
320 \setbeamertemplate{blocks}[rounded]
322 \begin{block}{\footnotesize{\textbf{Problems when building ANGLE:}}}\scriptsize{\texttt{
326 \item {{Default \textbf{gn} configuration redirects debugging
327 symbols into separate files where GDB can't find them.}}
328 \item {\textbf{GDB} doesn't know where to find the ANGLE
329 installation directories.}
330 \item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's
331 impossible to step without errors when it's enabled.}}
332 \item {\textbf{Debugging symbols} aren't enabled by default.}
340 \setbeamertemplate{itemize item}[circle]
342 \item {\textbf{Blog post} on how to set up
343 \textbf{\color{mediumred-violet}{ANGLE}} and \textbf{\color{mediumred-violet}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
344 \item {\textbf{Gist} with the \textbf{\color{mediumred-violet}{GN args}}
345 I've used: \url{https://gistof.com/gnargs}}
350 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
352 \begin{frame}[fragile,c]
353 \frametitle{Step 2: Contexts from two drivers in the same
356 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
357 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
358 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
359 \setbeamertemplate{itemize items}[triangle]
360 \setbeamertemplate{blocks}[rounded]
363 \textbf{\color{coolblack}First Test}
366 \scriptsize{\color{coolblack}
367 I've first written a program where both ANGLE and native system driver render
368 images on two different X11 windows and displayed them side by side:
372 \adjustbox{valign=t, margin=1ex,
373 padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
376 \begin{block}{\footnotesize{Things I had to take care of:}}
378 \item {Set ANGLE \textbf{library paths} in Makefile and link
379 with native system EGL.}
380 \item {\textbf{Dynamically open} ANGLE EGL and load its functions prefixed with
381 \texttt{angle\_} to distinguish them from native EGL ones.}
382 \item {Do the same for GLESv2.}
383 \item {\textbf{Invalidate the ANGLE context} at every display call.\\
384 (\textit{When ANGLE is not the only
385 implementation available \texttt{MakeCurrent} is not working as
391 \begin{frame}[fragile,c]
392 \frametitle{Step 2: Contexts from two drivers in the same
396 \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
399 \begin{tabularx}{\textwidth}{l X}
400 \tiny{\textbf{\color{mediumred-violet}Context is cached in ANGLE!}} &
401 \adjustbox{valign=c, margin=0.1ex,
402 padding=0.1ex}{\includegraphics[height=2cm]{data/makecurrent.png}} \\
409 \textbf{\color{coolblack}More on Makefile changes and dynamic loading:}
412 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
413 \setbeamertemplate{itemize items}[circle]
416 \textbf{\texttt{\color{black}{Blog post:}}}
417 {Sharing texture data between ANGLE and the native system driver:\\
418 \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}}\\
423 {\color{black}Step 1: Using
424 both libraries in the same program.}
426 {\color{black}{About ANGLE MakeCurrent.}}
431 \color{black}{\textbf{\texttt{Code:}}}
432 {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}
437 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
439 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
440 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
441 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
442 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
443 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
445 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
446 \section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
447 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
449 \begin{frame}[fragile,c]
450 \frametitle{Shared Context}
453 \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or
454 GLESv2 contexts when these contexts are \textit{shared}:}}
460 \begin{adjustbox}{max width=\textwidth}
466 \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
467 \textbf{native\_ctx}, new\_ctx\_attrib);\\
468 \rowcolor{platinum}\\
477 \textbf{\color{coolblack}{A texture generated by each context can be bound and used by the
478 other\\ without ever leaving the GPU!}}
486 \begin{adjustbox}{max width=\textwidth}
493 glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
495 {\color{darkgray}/* ... gl operations ... */}\\
499 angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
501 {\color{darkgray}/* ... angle\_gl operations ... */}\\
510 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
511 \setbeamertemplate{itemize items}[triangle]
513 %\setbeamertemplate{blocks}
514 \scriptsize{ \textbf{\color{coolblack}{Shared context restrictions:}}}
517 \item Contexts must be created by the \textbf{same API} (both OpenGL,
518 or both GLESv2, same driver).
519 \item Contexts must be created by the \textbf{same
521 {\color{coolblack}{not
522 suitable for every project!}}})
527 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
529 \begin{frame}[fragile,c]
530 \frametitle{Could we use shared context in WebKit?}
532 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
533 \setbeamertemplate{itemize items}[triangle]
536 \textbf{\color{coolblack} Could we use shared context in WebKit?}\\
540 \textbf{Short answer:} Currently yes (with some workaround) but not in the
545 \begin{block}{Requirements to use shared context/textures in \textbf{WebKit}:}
547 \item We should use the \textbf{ANGLE EGL/OpenGL backend in
549 match the main Graphics Pipeline API/driver (both contexts
550 should be OpenGL or GLESv2 and from the same driver!)
551 \item We'd need an \textbf{ANGLE extension} to allow passing
552 native shared context to ANGLE's eglCreateContext instead of
553 ANGLE shared context.
554 \item We should never move WebGL2 and Graphics Pipeline in
555 different processes. Shared contexts should be created by
556 the same process! (\textbf{Reason we've rejected this
565 \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
566 \texttt{EGL\_ANGLE\_native\_shared\_context}
571 \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed
572 to \texttt{\color{afblue}eglCreateContext}:\\
573 \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}
577 This attribute indicates that the shared context in
578 \texttt{\color{deepjunglegreen}eglCreateContext}
579 is \textbf{not ANGLE} and should be used as native in the internal
586 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
587 \begin{frame}[fragile,c]
588 \frametitle{EGL\_ANGLE\_native\_shared\_context}
590 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
591 \setbeamertemplate{itemize items}[triangle]{\tiny}
592 \setbeamercolor{block body}{bg=white}
596 \begin{block}{This is how we create shared OpenGL
597 context using EGL (system or ANGLE):}
599 \begin{adjustbox}{max width=\textwidth}
600 \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
607 \begin{adjustbox}{max width=\textwidth}
609 · In case of system EGL \texttt{ctx\_A} and
610 \texttt{ctx\_B} are native
612 · In case of ANGLE they are ANGLE EGL contexts.\\
622 \begin{block}{This is how we'd create shared
623 OpenGL context between native EGL and ANGLE EGL using
624 \texttt{EGL\_ANGLE\_native\_shared\_context}:}
628 \item \tiny{We'd pass the native EGL context (created by the native system
629 driver) as {\color{black}shared context} to the
630 native OpenGL context that is created {\color{black}in the ANGLE
631 OpenGL backend} using the native system driver!}
632 \item \tiny{We'd need use the {\color{black}new EGL attribute
633 (\texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE})} to let ANGLE know
634 that the shared context \textit{\color{coolblack}is not ANGLE but native}
642 \begin{adjustbox}{max width=\textwidth}
643 \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
654 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
655 \begin{frame}[fragile,c]
656 \frametitle{Some work on the shared context approach}
657 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
658 \setbeamertemplate{itemize items}[triangle]{\tiny}
659 \setbeamercolor{block body}{bg=white}
662 \begin{block}{\tiny{Extension
663 \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}:}}
668 Worked on the extension implementation (draft state, there are
673 \begin{adjustbox}{max width=\textwidth}
674 \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
680 \begin{block}{\tiny{Experimental programs (to test the extension and
681 familiarize with the shared context concept):}}
683 \item A test program that uses EGL ctxA to create a texture and
684 EGL ctxB to display it on an X11 window.
685 \item The same program written in ANGLE (there were
687 \item A test program that uses EGL ctxA to create a texture and
688 ANGLE EGL ctxB to display it on an X11 window.
689 \item Variations of the above:
690 \url{https://github.com/hikiko/shctx/branches}
696 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
698 \frametitle{Abandoned!}
700 \textbf{\color{coolblack} Why not shared context?}
705 \item Shared context would be a nice and clean approach if we wanted to use
706 it with our current WebKit code.
707 \item But there is a plan to use \textbf{separate processes} for WebGL2 and
708 the main graphics pipeline!! (Žan Doberšek)
713 \textbf{\color{coolblack} But there was a \textit{better} approach!}
716 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
718 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
719 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
720 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
721 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
723 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
724 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
725 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
728 \frametitle{DMA buffers for the win!}
731 \textbf{\color{coolblack}Fortunately we are on Linux!}
733 \setbeamercolor{block body}{bg=white}
734 \setbeamercolor{block title}{bg=white, fg=coolblack}
735 \begin{block}{\scriptsize{There is a Linux kernel framework that can be used for
736 content sharing between different Linux drivers!}}
742 \begin{adjustbox}{max width=\textwidth}
743 \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
748 \textbf{\scriptsize{\color{coolblack}A few things that need our attention:}}\\
751 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
753 \item There are {\color{coolblack}EGL and OpenGL/GLESv2
754 extensions} to make this content sharing easier!
755 \item It's {\color{coolblack}driver independent}!
756 \item It works with {\color{coolblack}multiple processes}!
757 \item As long as ANGLE can expose the required extensions to
758 import a dma\_buf file descriptor this method is
759 {\color{coolblack}"ANGLE backend
761 \item Works {\color{coolblack}only on Linux}... but in case of
762 WPE we won't need to support other systems! (Žan Doberšek)
768 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
771 \frametitle{Extensions and new approach}
773 \setbeamercolor{block body}{bg=white}
774 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
776 \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
777 the WebGL texture data?}}
781 \item Each texture is backed by a Linux kernel dma\_buffer.
782 \item Multiple textures can use the same dma buffer as backing
783 storage if they meet some requirements.
784 \item We can export the file descriptor of one buffer from one
785 driver and use it to access the buffer from the other
787 \item So we can export the FD that corresponds to the compositor
788 texture, import it in WebGL when we create the render target
789 and when the WebGL texture is filled, the compositor texture
790 will be also filled, as they share the backing storage!
794 \begin{block}{\scriptsize{EGL and GL extensions that can be used:}}
798 \href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}:
799 \\ This extension allows creating one or multiple Linux dma\_buf
800 file descriptors from the EGLImage that corresponds to a texture.
801 \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}:
802 \\ This extension allows creating an EGLImage (that will be used to create a
803 texture) from one or multiple Linux dma\_buf file
805 \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}:
806 \\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support
807 format modifiers used for tiling, compression, and additional non-linear
809 \item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}:
810 \\ This extension provides a mechanism for creating EGLImage texture targets
817 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
820 \frametitle{Example:}
822 \setbeamercolor{block body}{bg=white}{\scriptsize}
823 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
825 \begin{block}{\scriptsize{I've written an example:}}
828 \item First using EGL!\\
829 Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
830 Code: \url{https://gistof.com/dma-egl-version}
831 \item Then using a native EGL context and a context from ANGLE!\\
832 Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
833 Code: \url{https://gistof.com/dmaangleeglversion}
838 \begin{block}{\scriptsize{Snippet from the exporter:}}
844 {\color{coolblack}Exporting a dma buffer from a texture
846 \begin{adjustbox}{max width=\textwidth}
847 \adjustbox{valign=t}{\includegraphics[height=4cm]{data/dma_export_and_struct.png}}
855 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
858 \frametitle{Example continued}
859 \setbeamercolor{block body}{bg=white}{\scriptsize}
860 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
862 \begin{block}{\scriptsize{Snippets from the importer:}}
868 {\color{coolblack}Creating an EGLImage from the dma buffer using
869 the exported fd and the exported modifiers:}\\
871 \begin{adjustbox}{max width=\textwidth}
872 \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
876 {\color{coolblack}Creating a texture using that external
879 \begin{adjustbox}{max width=\textwidth}
880 \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
888 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
890 \frametitle{Test program}
892 \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
894 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
898 \item First context is EGL/OpenGL like the one in main graphics
900 \item Second is ANGLE with EGL/GLESv2 backend like the one in
902 \item EGL/OpenGL context creates an empty texture and exports the dma\_buf
903 fd and all other information about the buffer.
904 \item ANGLE context creates another empty texture using the same
905 dma\_buf and the import mechanism.
906 \item ANGLE context fills the emty ANGLE texture.
907 \item EGL/OpenGL context displays the previously empty OpenGL/EGL
909 \item EGL/OpenGL texture contains what ANGLE texture had.
910 \item \textbf{We shared the ANGLE data without copying them!}
917 \textbf{\color{coolblack}Check the blog posts for more details!}
921 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
923 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
924 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
925 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
926 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
927 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
929 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
930 \section[Multiple Processes]{Multiple Processes}
931 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
933 \begin{frame}[fragile,c]
934 \frametitle{What if WebGL and Graphics pipeline were separate processes?}
935 \setbeamertemplate{blocks}[rounded]
939 \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
940 pipeline in two processes. (Žan Doberšek)}}}
943 \begin{block}{Can we still use shared DMA buffers?}
948 \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
950 \item {\color{coolblack} But we need some sort of \textbf{\textit{interprocess
951 communication}} to exchange the file descriptor.}
952 \item {\color{coolblack} This is a client-server
953 \textbf{\textit{example}} that uses unix
954 sockets to pass the dma-buf FD from one process to the other:
955 \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.}
963 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
965 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
966 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
967 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
968 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
969 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
971 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
972 \section[WebKit Integration]{WebKit Integration}
973 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
975 \begin{frame}[fragile,c]
976 \frametitle{WIP WebKit:}
977 \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
982 \begin{block}{DONE/WIP/TODO}
984 \item{Use the right CMake options (one can't simply enable
985 \texttt{USE\_ANGLE\_WEBGL} ☺):
986 \color{coolblack}{\textbf{FIXED }}}
987 \item{There were compile errors when ANGLE was used:
988 \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
989 \item{Link errors when ANGLE is used:
990 \color{coolblack}{\textbf{WIP/Partially FIXED}}}
991 \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
998 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
999 \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
1002 \item The extensions to import dma-buf buffers in ANGLE are
1003 implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline
1004 DMA buf when we create the render target!}
1005 \item The extension to export dma-buf buffers from EGL is
1006 supported on mesa => {\color{coolblack}we could run a check before creating
1007 the shared dma buffer and use either use it or fallback to
1008 something else (libgbm? copying?)}
1013 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1015 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1016 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1017 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1018 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1019 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1021 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1022 \section[References]{References}
1023 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1024 %\setbeamertemplate{bibliography entry title}{}
1025 %\setbeamertemplate{bibliography entry location}{}
1026 %\setbeamertemplate{bibliography entry note}{}
1027 \setbeamerfont{bibliography item}{size=\footnotesize}
1028 \setbeamerfont{bibliography entry author}{size=\footnotesize}
1029 \setbeamerfont{bibliography entry title}{size=\footnotesize}
1030 \setbeamerfont{bibliography entry year}{size=\footnotesize}
1031 \setbeamerfont{bibliography entry note}{size=\footnotesize}
1033 \begin{frame}[allowframebreaks]
1035 \bibliographystyle{unsrt}
1036 \bibliography{bib/references.bib}
1040 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1042 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%