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}{\textbf{Adoption of ANGLE in
116 \usebeamerfont{author}{\insertauthor\par}
121 \usebeamerfont{date}{\huge{{\insertdate}}\par}
126 \setbeamertemplate{itemize items}[triangle]
127 \setbeamertemplate{itemize subitem}[circle]
128 \setbeamerfont{frametitle}{size=\small}
130 \setbeamertemplate{blocks}[default]
131 \setbeamercolor{block title}{fg=amber,bg=black}
133 \title{\textbf{Sharing texture data across EGL drivers}}
134 \author[Eleni Maria Stea <estea@igalia.com>]{\small{Eleni Maria Stea
135 <estea@igalia.com>}\\\\\includegraphics{data/igalia.eps}}
136 \date{\tiny{WebKit Codecamp}}
142 \tableofcontents[currentsection]
146 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
148 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
159 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
162 \begin{frame}[fragile,c]
169 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
170 \section[Introduction]{Introduction: Using ANGLE in WebGL2 (WebKit)}
171 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
173 \begin{frame}[fragile,c]
174 \frametitle{A few words about ANGLE}
175 \center{\textbf{\color{coolblack}{ANGLE is an EGL/GLESv2 implementation}}}
177 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
178 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
179 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
180 \setbeamertemplate{itemize items}[triangle]
181 \setbeamertemplate{blocks}[rounded]
184 \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}}
187 \item GLESv2 is used to render graphics using the GPU (graphics
189 \item EGL is used to create a GLESv2 context.
194 \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}}
197 \item GLESv2 is implemented \textbf{on top of other APIs} (OpenGL,
198 Vulkan, GLESv2). EGL too (EGL, GLX, gbm, headless display).
199 \item Users can select the most convenient backend using some
200 \textbf{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that
201 provide extra attributes to some standard EGL API stucts.
202 \item Primary \textbf{purpose} of ANGLE is to provide EGL/GLESv2 to systems
210 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
212 \begin{frame}[fragile,c]
213 \frametitle{Using ANGLE in WebKit}
215 \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
218 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
219 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
220 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
221 \setbeamertemplate{itemize items}[triangle]
222 \setbeamertemplate{blocks}[rounded]
226 \begin{block}{\color{afblue}{\scriptsize\textbf{Reasons}:}}
228 \item better performance in some cases (Žan Doberšek)
229 \item it'll be mostly an optimized wrapper around the native driver (libGLES*
230 is available on Linux desktop!)
234 \begin{block}{\color{afblue}{\scriptsize\textbf{Problem}:}}
236 \item \textbf{ANGLE} renders on a \textbf{GLESv2 texture} created by ANGLE context
237 \item {\color{coolblack}WebKit \textbf{graphics pipeline} components use
238 \textbf{OpenGL textures} that
239 are composited by the WebKit compositor}
240 \item We are currently \textbf{\textit{copying}} the ANGLE texture data to
241 an OpenGL texture to assemble the final image and this is
242 \textbf{\textit{slow}}!
248 \center{\textbf{\color{coolblack}{We need to replace this copy with
254 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
256 \begin{frame}[fragile,c]
257 \frametitle{Experiments on Linux}
263 \item {\color{coolblack}\textbf{Similar to WebKit: I've
264 used ANGLE and EGL in the same program (created 2 X11 windows, and
265 rendered 2 images from 2 different contexts by 2 different
268 \tiny{{(In several cases ANGLE behaves
269 different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
270 call \texttt{eglMakeCurrent}!!).}}
272 \item {\color{coolblack}\textbf{Shared context: Filled a shared texture with ANGLE,
273 displayed it with the native driver. (REJECTED)}
276 modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
277 EGL/OpenGL backend, and it wouldn't work with multiple
280 \item {\color{coolblack}\textbf{DMA-buffers: Filled two textures
281 from two drivers simultaneously by using a shared Linux kernel
282 dma-buf buffer. (ADOPTED)}
284 \tiny{{(drivers should support some EGL/GL extensions: both mesa and
285 ANGLE support them)}}
287 \item {\color{coolblack}\textbf{Investigated the multiple processes
290 \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
296 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
297 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
298 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
299 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
300 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
301 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
303 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
304 \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
306 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
308 \begin{frame}[fragile,c]
309 \frametitle{Step 1: Setting up to debug ANGLE with GDB}
315 I've ran my experiments using test programs and ANGLE,\\
316 and I had to modify the default set up to step into ANGLE calls with GDB:
322 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
323 \begin{block}{\scriptsize{Things that need attention when building ANGLE for
324 debugging:}}\scriptsize{
329 \item {{Default \textbf{gn} configuration redirects debugging
330 symbols into separate files where GDB can't find them.}}
331 \item {\textbf{GDB} doesn't know where to find the ANGLE
332 installation directories.}
333 \item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's
334 impossible to step without errors when it's enabled.}}
335 \item {\textbf{Debugging symbols} aren't enabled by default.}
343 \setbeamertemplate{itemize item}[circle]
345 \item {\textbf{Blog post} on how to set up
346 {\color{black}{ANGLE}} and {\color{black}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
347 \item {\textbf{Gist} with the {\color{black}{GN args}}
348 I've used: \url{https://gistof.com/gnargs}}
353 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
355 \begin{frame}[fragile,c]
356 \frametitle{Step 2: Contexts from two drivers in the same
359 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
360 \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
361 \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
362 \setbeamertemplate{itemize items}[triangle]
365 \textbf{\color{coolblack}First Test}
368 \scriptsize{\color{coolblack}
369 I've first written a program where both ANGLE and the native system driver render
370 images on X11 windows:
374 \adjustbox{valign=t, margin=1ex,
375 padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
378 \begin{block}{\footnotesize{Some parts that needed attention:}}
380 \item {Set ANGLE \textbf{library paths} in Makefile and link
381 with native system EGL.}
382 \item {\textbf{Dynamically open} ANGLE EGL and load its functions prefixed with
383 \texttt{angle\_} to distinguish them from native EGL ones.}
384 \item {Do the same for GLESv2.}
385 \item {\textbf{Invalidate the ANGLE context} at every display call.\\
386 (\textit{When ANGLE is not the only
387 implementation available \texttt{MakeCurrent} is not working as
393 \begin{frame}[fragile,c]
394 \frametitle{Step 2: Contexts from two drivers in the same
398 \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
401 \begin{tabularx}{\textwidth}{l X}
402 \tiny{\textbf{\color{mediumred-violet}Context is cached in ANGLE!}} &
403 \adjustbox{valign=c, margin=0.1ex,
404 padding=0.1ex}{\includegraphics[height=2cm]{data/makecurrent.png}} \\
411 \textbf{\color{coolblack}Read more about invalidation and dynamic
415 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
416 \setbeamertemplate{itemize items}[circle]
419 \textbf{\texttt{\color{black}{Blog post:}}}
420 {Sharing texture data between ANGLE and the native system driver:\\
421 \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}}\\
426 {\color{black}Step 1: Using
427 both libraries in the same program.}
429 {\color{black}{About ANGLE MakeCurrent.}}
434 \color{black}{\textbf{\texttt{Code:}}}
435 {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}
440 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
442 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
443 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
444 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
445 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
446 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
448 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
449 \section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
450 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
452 \begin{frame}[fragile,c]
453 \frametitle{Shared Context}
456 \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or
457 GLESv2 contexts when these contexts are \textit{shared}:}}
463 \begin{adjustbox}{max width=\textwidth}
469 \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
470 \textbf{shared\_ctx}, new\_ctx\_attrib);\\
471 \rowcolor{platinum}\\
480 \textbf{\color{coolblack}{Each texture created by the
481 \texttt{shared\_ctx} can
482 be bound and used by the \texttt{new\_ctx} while it stays in the GPU!}}
490 \begin{adjustbox}{max width=\textwidth}
497 glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
499 {\color{darkgray}/* ... gl operations ... */}\\
503 angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
505 {\color{darkgray}/* ... angle\_gl operations ... */}\\
514 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
515 \setbeamertemplate{itemize items}[triangle]
517 %\setbeamertemplate{blocks}
518 \scriptsize{ \textbf{\color{coolblack}{Shared context restrictions:}}}
521 \item Contexts must be created by the \textbf{same API} (both OpenGL,
522 or both GLESv2, same driver).
523 \item Contexts must be created by the \textbf{same
525 {\color{coolblack}{not
526 suitable for every project!}}})
531 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
533 \begin{frame}[fragile,c]
534 \frametitle{Could we use shared context in WebKit?}
536 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
537 \setbeamertemplate{itemize items}[triangle]
540 \textbf{\color{coolblack} Could we use shared context in WebKit?}\\
544 \textbf{Short answer:} Currently yes (with some workaround) but not in the
549 \begin{block}{What would we need to change in \textbf{WebKit} for
550 shared context to work?}
552 \item Force the \textbf{ANGLE EGL/OpenGL backend in
554 match the main Graphics Pipeline API/driver (both contexts
555 should be OpenGL or GLESv2 and from the same driver!)
556 \item We'd need an \textbf{ANGLE extension} to allow passing
557 native shared context to ANGLE's eglCreateContext instead of
558 ANGLE shared context.
559 \item We should never split WebGL2 and Graphics Pipeline in
560 different processes. Shared contexts should be created by
561 the same process! (\textbf{Reason we've rejected this
570 \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
571 \texttt{EGL\_ANGLE\_native\_shared\_context}
576 \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed
577 to \texttt{\color{afblue}eglCreateContext}:\\
578 \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}
582 This attribute indicates that the shared context in
583 \texttt{\color{deepjunglegreen}eglCreateContext}
584 is \textbf{not ANGLE} and should be used as native in the internal
591 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
592 \begin{frame}[fragile,c]
593 \frametitle{EGL\_ANGLE\_native\_shared\_context}
595 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
596 \setbeamertemplate{itemize items}[triangle]{\tiny}
597 \setbeamercolor{block body}{bg=white}
601 \begin{block}{This is how we create shared OpenGL
602 context using EGL (system or ANGLE):}
604 \begin{adjustbox}{max width=\textwidth}
605 \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
612 \begin{adjustbox}{max width=\textwidth}
614 · In case of system EGL \texttt{ctx\_A} and
615 \texttt{ctx\_B} are native
617 · In case of ANGLE they are ANGLE EGL contexts.\\
627 \begin{block}{This is how we'd create shared
628 OpenGL context between native EGL and ANGLE EGL using
629 \texttt{EGL\_ANGLE\_native\_shared\_context}:}
635 \begin{adjustbox}{max width=\textwidth}
636 \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
647 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
648 \begin{frame}[fragile,c]
649 \frametitle{Some work on the shared context approach}
650 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
651 \setbeamertemplate{itemize items}[triangle]{\tiny}
652 \setbeamercolor{block body}{bg=white}
655 \begin{block}{\tiny{What happens inside ANGLE
656 (with \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}):}}
662 \begin{adjustbox}{max width=\textwidth}
663 \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
669 \begin{block}{\tiny{Experimental programs (to test the extension and
670 familiarize with the shared context concept):}}
672 \item A test program that uses EGL ctxA to create a texture and
673 EGL ctxB to display it on an X11 window.
674 \item The same program written in ANGLE (there were
676 \item A test program that uses EGL ctxA to create a texture and
677 ANGLE EGL ctxB to display it on an X11 window.
678 \item Variations of the above:
679 \url{https://github.com/hikiko/shctx/branches}
685 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
687 \frametitle{Abandoned!}
689 \textbf{\color{coolblack} Why not shared context?}
694 \item Shared context would be a nice and clean approach if we wanted to use
695 it with our current WebKit code.
696 \item But there is a plan to use \textbf{separate processes} for WebGL2 and
697 the main graphics pipeline!! (Žan Doberšek)
702 \textbf{\color{coolblack} But there was a \textit{better} approach!}
705 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
707 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
708 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
709 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
710 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
712 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
713 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
714 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
717 \frametitle{DMA buffers for the win!}
720 \textbf{\color{coolblack}Fortunately we are on Linux!}
722 \setbeamercolor{block body}{bg=white}
723 \setbeamercolor{block title}{bg=white, fg=coolblack}
724 \begin{block}{\scriptsize{There is a Linux kernel framework that can be used for
725 content sharing across different Linux drivers!}}
731 \begin{adjustbox}{max width=\textwidth}
732 \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
737 \textbf{\scriptsize{\color{coolblack}A few interesting things about
738 content sharing with dma buffers:}}\\
741 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
743 \item There are {\color{coolblack}EGL and OpenGL/GLESv2
744 extensions} to make it easier!
745 \item It's a {\color{coolblack}driver independent} method!
746 \item It works with {\color{coolblack}multiple processes}!
747 \item As long as ANGLE can expose the required extensions to
748 import a dma\_buf file descriptor this method is also
749 {\color{coolblack}"ANGLE backend
751 \item DMA buffers are a {\color{coolblack}Linux-only} thing...
752 but we won't need to support other systems! (Žan Doberšek)
758 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
761 \frametitle{Extensions and new approach}
763 \setbeamercolor{block body}{bg=white}
764 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
767 % \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
768 % the WebGL texture data?}}
772 % \item Each texture is backed by a Linux kernel dma\_buffer.
773 % \item Multiple textures can use the same dma buffer as backing
774 % storage if they meet some requirements.
775 % \item We can export the file descriptor of one buffer from one
776 % driver and use it to access the buffer from the other
778 % \item So we can export the fd that corresponds to the compositor
779 % texture, import it in WebGL when we create the render target
780 % and when the WebGL texture is filled, the compositor texture
781 % will be also filled, as they share the backing storage!
787 \begin{block}{\scriptsize{EGL and GL extensions to share content across
788 drivers using dma\_buf buffers:}}
792 \href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}:
793 \\ This extension allows creating one or multiple Linux dma\_buf
794 file descriptors from the EGLImage that corresponds to a texture.
795 \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}:
796 \\ This extension allows creating an EGLImage (that will be used to create a
797 texture) from one or multiple Linux dma\_buf file
799 \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}:
800 \\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support
801 format modifiers used for tiling, compression, and additional non-linear
803 \item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}:
804 \\ This extension provides a mechanism for creating EGLImage texture targets
809 \begin{block}{\scriptsize{Example Programs:}}
812 \item Associating two textures with the contents of the same
813 buffer without copy taking place.\\
814 Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
815 Code: \url{https://gistof.com/dma-egl-version}
816 \item Sharing texture data between ANGLE and the native system
817 driver using DMA buffers and EGL. \\
818 Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
819 Code: \url{https://gistof.com/dmaangleeglversion}
826 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
829 \frametitle{Example:}
831 \setbeamercolor{block body}{bg=white}{\scriptsize}
832 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
834 \begin{block}{\scriptsize{Snippet from the exporter:}}
839 {\color{coolblack}Exporting a dma buffer from a texture
842 \begin{adjustbox}{max width=\textwidth}
843 \adjustbox{valign=t}{\includegraphics[height=6.5cm]{data/dma_export_and_struct.png}}
851 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
854 \frametitle{Example continued}
855 \setbeamercolor{block body}{bg=white}{\scriptsize}
856 \setbeamertemplate{itemize/enumerate body begin}{\tiny}
858 \begin{block}{\scriptsize{Snippets from the importer:}}
864 {\color{coolblack}Creating an EGLImage from the dma buffer using
865 the exported fd and the exported modifiers:}\\
867 \begin{adjustbox}{max width=\textwidth}
868 \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
872 {\color{coolblack}Creating a texture using that external
875 \begin{adjustbox}{max width=\textwidth}
876 \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
884 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
886 \frametitle{Final test program (WORKS!)}
888 \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
890 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
893 \item First context is EGL/OpenGL like the one in main graphics
895 \item Second is ANGLE with EGL/GLESv2 backend like the one in
897 \item EGL/OpenGL context creates an empty texture and exports the dma\_buf
898 fd and all other information about the buffer.
899 \item ANGLE context creates another empty texture using the same
900 dma\_buf and the import mechanism.
901 \item ANGLE context fills the emty ANGLE texture.
902 \item EGL/OpenGL context displays the previously empty OpenGL/EGL
904 \item EGL/OpenGL texture contains what ANGLE texture had.
905 \item \textbf{We shared the ANGLE data without copying them!}
912 \textbf{\color{coolblack}Check the blog posts for more details!}
916 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
918 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
919 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
920 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
921 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
922 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
924 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
925 \section[Multiple Processes]{Multiple Processes}
926 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
928 \begin{frame}[fragile,c]
929 \frametitle{What if WebGL and Graphics pipeline were separate processes?}
933 \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
934 pipeline in two processes. (Žan Doberšek)}}}
937 \setbeamercolor{block body}{bg=white}{\scriptsize}
938 \begin{block}{Can we still use shared DMA buffers?}
943 \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
945 \item {\color{coolblack} But we need some sort of \textbf{\textit{interprocess
946 communication}} to exchange the file descriptor.}
947 \item {\color{coolblack} This is a client-server
948 \textbf{\textit{example}} that uses unix
949 sockets to pass the dma-buf FD from one process to the other:
950 \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.}
958 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
960 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
961 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
962 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
963 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
964 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
966 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
967 \section[WebKit Integration]{WebKit Integration}
968 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
970 \begin{frame}[fragile,c]
971 \frametitle{WIP WebKit:}
972 \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
976 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
977 \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
980 \item The extensions to import dma-buf buffers in ANGLE are
981 implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline
982 DMA buf when we create the render target!}
983 \item The extension to export dma-buf buffers from EGL is
984 supported on mesa => {\color{coolblack}we could run a check before creating
985 the shared dma buffer and use either use it or fallback to
986 something else (libgbm? copying?)}
991 \begin{block}{DONE/WIP/TODO}
993 \item{Use the right CMake options (one can't simply enable
994 \texttt{USE\_ANGLE\_WEBGL}!):
995 \color{coolblack}{\textbf{FIXED }}}
996 \item{There were compile errors when ANGLE was used:
997 \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
998 \item{Link errors when ANGLE is used:
999 \color{coolblack}{\textbf{WIP/Partially FIXED}}}
1000 \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
1007 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1009 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1010 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1011 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1012 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1013 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1015 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1016 \section[References]{References}
1017 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1018 %\setbeamertemplate{bibliography entry title}{}
1019 %\setbeamertemplate{bibliography entry location}{}
1020 %\setbeamertemplate{bibliography entry note}{}
1021 \setbeamerfont{bibliography item}{size=\footnotesize}
1022 \setbeamerfont{bibliography entry author}{size=\footnotesize}
1023 \setbeamerfont{bibliography entry title}{size=\footnotesize}
1024 \setbeamerfont{bibliography entry year}{size=\footnotesize}
1025 \setbeamerfont{bibliography entry note}{size=\footnotesize}
1027 \begin{frame}[allowframebreaks]
1029 \bibliographystyle{unsrt}
1030 \bibliography{bib/references.bib}
1034 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1035 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1036 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1037 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1038 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1040 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1041 \section[TheEnd]{Closing}
1042 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1044 \begin{frame}[plain]
1045 \begin{minipage}[b][0.6\textheight]{\linewidth}
1046 \begin{picture}(0, 0)
1048 \pgfuseimage{igaliabglight}
1050 \begin{minipage}[b][0.4\textheight]{\linewidth}
1052 \includegraphics[scale=0.6]{data/mesa.png}
1056 \hfill \huge{\textbf{\color{coolblack}Thank you!}}\\
1061 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1063 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%