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 across EGL 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 (WebKit)}
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,\\
312 and I had to modify the default set up to step into ANGLE calls with GDB:
318 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
319 \begin{block}{\scriptsize{Things that need attention when building ANGLE for
320 debugging:}}\scriptsize{
325 \item {{Default \textbf{gn} configuration redirects debugging
326 symbols into separate files where GDB can't find them.}}
327 \item {\textbf{GDB} doesn't know where to find the ANGLE
328 installation directories.}
329 \item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's
330 impossible to step without errors when it's enabled.}}
331 \item {\textbf{Debugging symbols} aren't enabled by default.}
339 \setbeamertemplate{itemize item}[circle]
341 \item {\textbf{Blog post} on how to set up
342 {\color{black}{ANGLE}} and {\color{black}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
343 \item {\textbf{Gist} with the {\color{black}{GN args}}
344 I've used: \url{https://gistof.com/gnargs}}
349 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
351 \begin{frame}[fragile,c]
352 \frametitle{Step 2: Contexts from two drivers in the same
355 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
356 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
357 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
358 \setbeamertemplate{itemize items}[triangle]
361 \textbf{\color{coolblack}First Test}
364 \scriptsize{\color{coolblack}
365 I've first written a program where both ANGLE and native system driver render
366 images on two different X11 windows and displayed them side by side:
370 \adjustbox{valign=t, margin=1ex,
371 padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
374 \begin{block}{\footnotesize{Some parts that needed attention:}}
376 \item {Set ANGLE \textbf{library paths} in Makefile and link
377 with native system EGL.}
378 \item {\textbf{Dynamically open} ANGLE EGL and load its functions prefixed with
379 \texttt{angle\_} to distinguish them from native EGL ones.}
380 \item {Do the same for GLESv2.}
381 \item {\textbf{Invalidate the ANGLE context} at every display call.\\
382 (\textit{When ANGLE is not the only
383 implementation available \texttt{MakeCurrent} is not working as
389 \begin{frame}[fragile,c]
390 \frametitle{Step 2: Contexts from two drivers in the same
394 \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
397 \begin{tabularx}{\textwidth}{l X}
398 \tiny{\textbf{\color{mediumred-violet}Context is cached in ANGLE!}} &
399 \adjustbox{valign=c, margin=0.1ex,
400 padding=0.1ex}{\includegraphics[height=2cm]{data/makecurrent.png}} \\
407 \textbf{\color{coolblack}More on Makefile changes and dynamic loading:}
410 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
411 \setbeamertemplate{itemize items}[circle]
414 \textbf{\texttt{\color{black}{Blog post:}}}
415 {Sharing texture data between ANGLE and the native system driver:\\
416 \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}}\\
421 {\color{black}Step 1: Using
422 both libraries in the same program.}
424 {\color{black}{About ANGLE MakeCurrent.}}
429 \color{black}{\textbf{\texttt{Code:}}}
430 {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}
435 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
437 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
438 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
439 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
440 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
441 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
443 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
444 \section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
445 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
447 \begin{frame}[fragile,c]
448 \frametitle{Shared Context}
451 \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or
452 GLESv2 contexts when these contexts are \textit{shared}:}}
458 \begin{adjustbox}{max width=\textwidth}
464 \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
465 \textbf{native\_ctx}, new\_ctx\_attrib);\\
466 \rowcolor{platinum}\\
475 \textbf{\color{coolblack}{A texture generated by each context can be bound and used by the
476 other\\ without ever leaving the GPU!}}
484 \begin{adjustbox}{max width=\textwidth}
491 glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
493 {\color{darkgray}/* ... gl operations ... */}\\
497 angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
499 {\color{darkgray}/* ... angle\_gl operations ... */}\\
508 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
509 \setbeamertemplate{itemize items}[triangle]
511 %\setbeamertemplate{blocks}
512 \scriptsize{ \textbf{\color{coolblack}{Shared context restrictions:}}}
515 \item Contexts must be created by the \textbf{same API} (both OpenGL,
516 or both GLESv2, same driver).
517 \item Contexts must be created by the \textbf{same
519 {\color{coolblack}{not
520 suitable for every project!}}})
525 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
527 \begin{frame}[fragile,c]
528 \frametitle{Could we use shared context in WebKit?}
530 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
531 \setbeamertemplate{itemize items}[triangle]
534 \textbf{\color{coolblack} Could we use shared context in WebKit?}\\
538 \textbf{Short answer:} Currently yes (with some workaround) but not in the
543 \begin{block}{Requirements to use shared context/textures in \textbf{WebKit}:}
545 \item We should use the \textbf{ANGLE EGL/OpenGL backend in
547 match the main Graphics Pipeline API/driver (both contexts
548 should be OpenGL or GLESv2 and from the same driver!)
549 \item We'd need an \textbf{ANGLE extension} to allow passing
550 native shared context to ANGLE's eglCreateContext instead of
551 ANGLE shared context.
552 \item We should never move WebGL2 and Graphics Pipeline in
553 different processes. Shared contexts should be created by
554 the same process! (\textbf{Reason we've rejected this
563 \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
564 \texttt{EGL\_ANGLE\_native\_shared\_context}
569 \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed
570 to \texttt{\color{afblue}eglCreateContext}:\\
571 \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}
575 This attribute indicates that the shared context in
576 \texttt{\color{deepjunglegreen}eglCreateContext}
577 is \textbf{not ANGLE} and should be used as native in the internal
584 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
585 \begin{frame}[fragile,c]
586 \frametitle{EGL\_ANGLE\_native\_shared\_context}
588 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
589 \setbeamertemplate{itemize items}[triangle]{\tiny}
590 \setbeamercolor{block body}{bg=white}
594 \begin{block}{This is how we create shared OpenGL
595 context using EGL (system or ANGLE):}
597 \begin{adjustbox}{max width=\textwidth}
598 \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
605 \begin{adjustbox}{max width=\textwidth}
607 · In case of system EGL \texttt{ctx\_A} and
608 \texttt{ctx\_B} are native
610 · In case of ANGLE they are ANGLE EGL contexts.\\
620 \begin{block}{This is how we'd create shared
621 OpenGL context between native EGL and ANGLE EGL using
622 \texttt{EGL\_ANGLE\_native\_shared\_context}:}
626 \item \tiny{We'd pass the native EGL context (created by the native system
627 driver) as {\color{black}shared context} to the
628 native OpenGL context that is created {\color{black}in the ANGLE
629 OpenGL backend} using the native system driver!}
630 \item \tiny{We'd need use the {\color{black}new EGL attribute
631 (\texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE})} to let ANGLE know
632 that the shared context \textit{\color{coolblack}is not ANGLE but native}
640 \begin{adjustbox}{max width=\textwidth}
641 \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
652 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
653 \begin{frame}[fragile,c]
654 \frametitle{Some work on the shared context approach}
655 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
656 \setbeamertemplate{itemize items}[triangle]{\tiny}
657 \setbeamercolor{block body}{bg=white}
660 \begin{block}{\tiny{Extension
661 \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}:}}
666 Worked on the extension implementation (draft state, there are
671 \begin{adjustbox}{max width=\textwidth}
672 \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
678 \begin{block}{\tiny{Experimental programs (to test the extension and
679 familiarize with the shared context concept):}}
681 \item A test program that uses EGL ctxA to create a texture and
682 EGL ctxB to display it on an X11 window.
683 \item The same program written in ANGLE (there were
685 \item A test program that uses EGL ctxA to create a texture and
686 ANGLE EGL ctxB to display it on an X11 window.
687 \item Variations of the above:
688 \url{https://github.com/hikiko/shctx/branches}
694 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
696 \frametitle{Abandoned!}
698 \textbf{\color{coolblack} Why not shared context?}
703 \item Shared context would be a nice and clean approach if we wanted to use
704 it with our current WebKit code.
705 \item But there is a plan to use \textbf{separate processes} for WebGL2 and
706 the main graphics pipeline!! (Žan Doberšek)
711 \textbf{\color{coolblack} But there was a \textit{better} approach!}
714 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
716 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
717 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
718 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
719 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
721 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
722 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
723 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
726 \frametitle{DMA buffers for the win!}
729 \textbf{\color{coolblack}Fortunately we are on Linux!}
731 \setbeamercolor{block body}{bg=white}
732 \setbeamercolor{block title}{bg=white, fg=coolblack}
733 \begin{block}{\scriptsize{There is a Linux kernel framework that can be used for
734 content sharing across different Linux drivers!}}
740 \begin{adjustbox}{max width=\textwidth}
741 \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
746 \textbf{\scriptsize{\color{coolblack}A few interesting things about
747 content sharing with dma buffers:}}\\
750 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
752 \item There are {\color{coolblack}EGL and OpenGL/GLESv2
753 extensions} to make it easier!
754 \item It's a {\color{coolblack}driver independent} method!
755 \item It works with {\color{coolblack}multiple processes}!
756 \item As long as ANGLE can expose the required extensions to
757 import a dma\_buf file descriptor this method is also
758 {\color{coolblack}"ANGLE backend
760 \item DMA buffers are a {\color{coolblack}Linux-only} thing...
761 but we won't need to support other systems! (Žan Doberšek)
767 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
770 \frametitle{Extensions and new approach}
772 \setbeamercolor{block body}{bg=white}
773 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
775 \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
776 the WebGL texture data?}}
780 \item Each texture is backed by a Linux kernel dma\_buffer.
781 \item Multiple textures can use the same dma buffer as backing
782 storage if they meet some requirements.
783 \item We can export the file descriptor of one buffer from one
784 driver and use it to access the buffer from the other
786 \item So we can export the fd that corresponds to the compositor
787 texture, import it in WebGL when we create the render target
788 and when the WebGL texture is filled, the compositor texture
789 will be also filled, as they share the backing storage!
794 \begin{block}{\scriptsize{EGL and GL extensions that can be used for that
799 \href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}:
800 \\ This extension allows creating one or multiple Linux dma\_buf
801 file descriptors from the EGLImage that corresponds to a texture.
802 \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}:
803 \\ This extension allows creating an EGLImage (that will be used to create a
804 texture) from one or multiple Linux dma\_buf file
806 \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}:
807 \\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support
808 format modifiers used for tiling, compression, and additional non-linear
810 \item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}:
811 \\ This extension provides a mechanism for creating EGLImage texture targets
818 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
821 \frametitle{Example:}
823 \setbeamercolor{block body}{bg=white}{\scriptsize}
824 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
826 \begin{block}{\scriptsize{I've written an example:}}
829 \item First using two native EGL contexts\\
830 Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
831 Code: \url{https://gistof.com/dma-egl-version}
832 \item Then using a native EGL context and a context created from
834 Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
835 Code: \url{https://gistof.com/dmaangleeglversion}
840 \begin{block}{\scriptsize{Snippet from the exporter:}}
846 {\color{coolblack}Exporting a dma buffer from a texture
848 \begin{adjustbox}{max width=\textwidth}
849 \adjustbox{valign=t}{\includegraphics[height=4cm]{data/dma_export_and_struct.png}}
857 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
860 \frametitle{Example continued}
861 \setbeamercolor{block body}{bg=white}{\scriptsize}
862 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
864 \begin{block}{\scriptsize{Snippets from the importer:}}
870 {\color{coolblack}Creating an EGLImage from the dma buffer using
871 the exported fd and the exported modifiers:}\\
873 \begin{adjustbox}{max width=\textwidth}
874 \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
878 {\color{coolblack}Creating a texture using that external
881 \begin{adjustbox}{max width=\textwidth}
882 \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
890 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
892 \frametitle{Test program}
894 \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
896 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
900 \item First context is EGL/OpenGL like the one in main graphics
902 \item Second is ANGLE with EGL/GLESv2 backend like the one in
904 \item EGL/OpenGL context creates an empty texture and exports the dma\_buf
905 fd and all other information about the buffer.
906 \item ANGLE context creates another empty texture using the same
907 dma\_buf and the import mechanism.
908 \item ANGLE context fills the emty ANGLE texture.
909 \item EGL/OpenGL context displays the previously empty OpenGL/EGL
911 \item EGL/OpenGL texture contains what ANGLE texture had.
912 \item \textbf{We shared the ANGLE data without copying them!}
919 \textbf{\color{coolblack}Check the blog posts for more details!}
923 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
925 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
926 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
927 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
928 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
929 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
931 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
932 \section[Multiple Processes]{Multiple Processes}
933 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
935 \begin{frame}[fragile,c]
936 \frametitle{What if WebGL and Graphics pipeline were separate processes?}
937 \setbeamertemplate{blocks}[rounded]
941 \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
942 pipeline in two processes. (Žan Doberšek)}}}
945 \begin{block}{Can we still use shared DMA buffers?}
950 \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
952 \item {\color{coolblack} But we need some sort of \textbf{\textit{interprocess
953 communication}} to exchange the file descriptor.}
954 \item {\color{coolblack} This is a client-server
955 \textbf{\textit{example}} that uses unix
956 sockets to pass the dma-buf FD from one process to the other:
957 \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.}
965 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
967 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
968 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
969 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
970 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
971 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
973 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
974 \section[WebKit Integration]{WebKit Integration}
975 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
977 \begin{frame}[fragile,c]
978 \frametitle{WIP WebKit:}
979 \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
983 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
984 \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
987 \item The extensions to import dma-buf buffers in ANGLE are
988 implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline
989 DMA buf when we create the render target!}
990 \item The extension to export dma-buf buffers from EGL is
991 supported on mesa => {\color{coolblack}we could run a check before creating
992 the shared dma buffer and use either use it or fallback to
993 something else (libgbm? copying?)}
998 \begin{block}{DONE/WIP/TODO}
1000 \item{Use the right CMake options (one can't simply enable
1001 \texttt{USE\_ANGLE\_WEBGL}!):
1002 \color{coolblack}{\textbf{FIXED }}}
1003 \item{There were compile errors when ANGLE was used:
1004 \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
1005 \item{Link errors when ANGLE is used:
1006 \color{coolblack}{\textbf{WIP/Partially FIXED}}}
1007 \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
1014 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1016 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1017 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1018 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1019 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1020 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1022 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1023 \section[References]{References}
1024 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1025 %\setbeamertemplate{bibliography entry title}{}
1026 %\setbeamertemplate{bibliography entry location}{}
1027 %\setbeamertemplate{bibliography entry note}{}
1028 \setbeamerfont{bibliography item}{size=\footnotesize}
1029 \setbeamerfont{bibliography entry author}{size=\footnotesize}
1030 \setbeamerfont{bibliography entry title}{size=\footnotesize}
1031 \setbeamerfont{bibliography entry year}{size=\footnotesize}
1032 \setbeamerfont{bibliography entry note}{size=\footnotesize}
1034 \begin{frame}[allowframebreaks]
1036 \bibliographystyle{unsrt}
1037 \bibliography{bib/references.bib}
1041 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1043 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%