eleni.mutantstargoat.com Git - webkit_codecamp/blob - codecamp.tex

   1 \documentclass[usenames,dvipsnames]{beamer}
   2 \usepackage[font=small,skip=-1pt]{caption}
   3 \usepackage{xcolor}
   4 \usepackage{color, colortbl}
   5 \usepackage{caption}
   6 \usepackage{listings}
   7 \usepackage{graphicx}
   8 \usepackage{hyperref}
   9 \usepackage{comment}
  10 \usepackage{textpos}
  11 \usepackage{tgpagella}
  12 \usepackage[utf8]{inputenc}
  13 \usepackage{fontspec}
  14 \usepackage{tabularx, array, booktabs}
  15 \usepackage{cite}
  16 \usepackage{verbatim}
  17 \usepackage{comment}
  18 \usepackage{adjustbox}
  19
  20 \newcommand\topalign[1]{%
  21   \setbox0\hbox{#1}%
  22   \raisebox{\dimexpr-\ht0+\dp0\relax}{\usebox0}}
  23
  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}
  44
  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,
  50     breaklines=true,
  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},
  65 }
  66
  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
  70
  71 \usetheme{Warsaw}
  72 \useoutertheme{infolines}
  73 \usecolortheme{crane}
  74
  75 \captionsetup[figure]{labelformat=empty}
  76
  77 \addtobeamertemplate{headline}{}{\vskip2pt}
  78 \addtobeamertemplate{headline}{}{%
  79         \begin{textblock*}{5mm}(.9\textwidth,-0.6cm)
  80         \includegraphics[height=0.67cm]{data/igalia-logo.png}
  81 \end{textblock*}}
  82
  83 \definecolor{links}{rgb}{0.1, 0.3, 0.6}
  84 \hypersetup{colorlinks,linkcolor=,urlcolor=links}
  85
  86 \pgfdeclareimage[height=\paperheight]{igaliabglight}{data/igalia_bg_light.eps}
  87 \pgfdeclareimage[height=\paperheight]{igaliabg}{data/igaliabg.eps}
  88
  89 %\setbeamertemplate{title page}{
  90 %        \begin{picture}(-90, 180)
  91 %                       \put(-200, -74){%
  92 %                \pgfuseimage{igaliabg}
  93 %            }
  94 %
  95 %            \put(55,19){%
  96 %                               \begin{minipage}[b][36mm][t]{240mm}
  97 %                    \usebeamerfont{title}{\inserttitle\par}
  98 %                    \usebeamerfont{author}{\insertauthor\par}
  99 %                    \usebeamerfont{title}{\insertinstitute\par}
 100 %                \end{minipage}
 101 %            }
 102 %               \end{picture}
 103 %}
 104
 105 \setbeamertemplate{navigation symbols}{}
 106 \setbeamertemplate{title page}{
 107         \begin{picture}(0,0)
 108             \put(-30,-164){%
 109                 \pgfuseimage{igaliabg}
 110             }
 111
 112             \put(0,-110.7){%
 113                 \begin{minipage}[b][38mm][t]{220mm}
 114                     \usebeamerfont{title}{\textbf{Adoption of ANGLE in
 115                     WPE/WebKitGTK}\par}
 116                     \usebeamerfont{author}{\insertauthor\par}
 117                 \end{minipage}
 118             }
 119
 120                         \put(240, -138){
 121                                 \usebeamerfont{date}{\huge{{\insertdate}}\par}
 122                                 }
 123                 \end{picture}
 124 }
 125
 126 \setbeamertemplate{itemize items}[triangle]
 127 \setbeamertemplate{itemize subitem}[circle]
 128 \setbeamerfont{frametitle}{size=\small}
 129
 130 \setbeamertemplate{blocks}[default]
 131 \setbeamercolor{block title}{fg=amber,bg=black}
 132
 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}}
 137
 138 \AtBeginSection[]
 139 {
 140   \begin{frame}
 141     \frametitle{Outline}
 142         \tableofcontents[currentsection]
 143   \end{frame}
 144 }
 145
 146 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 147 \begin{document}
 148 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 149
 150 \begin{frame}[plain]
 151 \titlepage
 152 \end{frame}
 153
 154 \begin{frame}
 155         \frametitle{Outline}
 156         \tableofcontents
 157 \end{frame}
 158
 159 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 160
 161 \begin{comment}
 162 \begin{frame}[fragile,c]
 163     \frametitle{}
 164     \begin{center}
 165     \end{center}
 166 \end{frame}
 167 \end{comment}
 168
 169 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 170 \section[Introduction]{Introduction: Using ANGLE in WebGL2 (WebKit)}
 171 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 172
 173 \begin{frame}[fragile,c]
 174     \frametitle{A few words about ANGLE}
 175         \center{\textbf{\color{coolblack}{ANGLE is an EGL/GLESv2 implementation}}}
 176
 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]
 182
 183         \vspace{0.3cm}
 184     \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}}
 185                 \begin{itemize}
 186                         \itemsep0.2cm
 187             \item GLESv2 is used to render graphics using the GPU (graphics
 188                 API).
 189             \item EGL is used to create a GLESv2 context.
 190         \end{itemize}
 191         \end{block}
 192         \vspace{0.3cm}
 193
 194     \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}}
 195                 \begin{itemize}
 196                         \itemsep0.2cm
 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
 203                 lacking it.
 204         \end{itemize}
 205         \end{block}
 206
 207         \vspace{0.2cm}
 208 \end{frame}
 209
 210 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 211
 212 \begin{frame}[fragile,c]
 213     \frametitle{Using ANGLE in WebKit}
 214
 215     \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
 216         \vspace{0.2cm}
 217
 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]
 223
 224         \vspace{0.1cm}
 225
 226     \begin{block}{\color{afblue}{\scriptsize\textbf{Reasons}:}}
 227                 \begin{itemize}
 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!)
 231         \end{itemize}
 232         \end{block}
 233         \vspace{0.3cm}
 234     \begin{block}{\color{afblue}{\scriptsize\textbf{Problem}:}}
 235                 \begin{itemize}
 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}}!
 243         \end{itemize}
 244         \end{block}
 245
 246         \vspace{0.1cm}
 247
 248     \center{\textbf{\color{coolblack}{We need to replace this copy with
 249     something better!}}}
 250
 251         \vspace{0.2cm}
 252 \end{frame}
 253
 254 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 255
 256 \begin{frame}[fragile,c]
 257     \frametitle{Experiments on Linux}
 258
 259     \vspace{0.3cm}
 260     {\footnotesize{
 261         \begin{enumerate}
 262         \itemsep0.3cm
 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
 266                 drivers on them.}
 267
 268                 \tiny{{(In several cases ANGLE behaves
 269                 different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
 270                 call \texttt{eglMakeCurrent}!!).}}
 271                 }
 272             \item {\color{coolblack}\textbf{Shared context: Filled a shared texture with ANGLE,
 273                 displayed it with the native driver. (REJECTED)}
 274
 275                 \tiny{{(required
 276                 modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
 277                 EGL/OpenGL backend, and it wouldn't work with multiple
 278                 processes)}}
 279                 }
 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)}
 283
 284                 \tiny{{(drivers should support some EGL/GL extensions: both mesa and
 285                 ANGLE support them)}}
 286                 }
 287             \item {\color{coolblack}\textbf{Investigated the multiple processes
 288                 case. (FUTURE)}
 289
 290                 \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
 291                 }
 292         \end{enumerate}
 293     }}
 294 \end{frame}
 295
 296 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 297 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 298 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 299 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 300 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 301 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 302
 303 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 304 \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
 305 program}
 306 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 307
 308 \begin{frame}[fragile,c]
 309     \frametitle{Step 1: Setting up to debug ANGLE with GDB}
 310
 311         \vspace{0.2cm}
 312
 313     \begin{center}
 314                 \scriptsize{
 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:
 317                 }
 318     \end{center}
 319
 320         \vspace{0.1cm}
 321
 322         \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 323         \begin{block}{\scriptsize{Things that need attention when building ANGLE for
 324         debugging:}}\scriptsize{
 325             \vspace{0.2cm}
 326                 \begin{itemize}
 327                         \itemsep0.1cm
 328                                 \color{coolblack}
 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.}
 336                 \end{itemize}}
 337         \vspace{0.2cm}
 338         \end{block}
 339
 340         \vspace{0.3cm}
 341
 342         \scriptsize{
 343                 \setbeamertemplate{itemize item}[circle]
 344         \begin{itemize}
 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}}
 349         \end{itemize}}
 350         \vspace{0.2cm}
 351 \end{frame}
 352
 353 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 354
 355 \begin{frame}[fragile,c]
 356     \frametitle{Step 2: Contexts from two drivers in the same
 357     program 1/2}
 358
 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]
 363
 364         \begin{center}
 365         \textbf{\color{coolblack}First Test}
 366         \end{center}
 367         \vspace{-0.1cm}
 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:
 371         }
 372         \vspace{-0.1cm}
 373         \begin{center}
 374         \adjustbox{valign=t, margin=1ex,
 375         padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
 376         \end{center}
 377         \vspace{-0.1cm}
 378         \begin{block}{\footnotesize{Some parts that needed attention:}}
 379         \begin{itemize}
 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
 388                         expected!!!})}
 389         \end{itemize}
 390         \end{block}
 391 \end{frame}
 392
 393 \begin{frame}[fragile,c]
 394     \frametitle{Step 2: Contexts from two drivers in the same
 395     program 2/2}
 396         \vspace{0.1cm}
 397         \begin{center}
 398                 \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
 399                 \\
 400                 \begin{table}[c]
 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}} \\
 405                         \end{tabularx}
 406                 \end{table}
 407         \end{center}
 408
 409         \vspace{-0.1cm}
 410         \begin{center}
 411                 \textbf{\color{coolblack}Read more about invalidation and dynamic
 412         loading:}
 413         \end{center}
 414
 415         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 416         \setbeamertemplate{itemize items}[circle]
 417
 418         \tiny{
 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/}}\\
 422         \vspace{0.1cm}
 423         \begin{itemize}
 424             \itemsep0.1cm
 425             \item
 426                 {\color{black}Step 1: Using
 427                 both libraries in the same program.}
 428             \item
 429                 {\color{black}{About ANGLE MakeCurrent.}}
 430         \end{itemize}
 431
 432         \vspace{0.3cm}
 433
 434         \color{black}{\textbf{\texttt{Code:}}}
 435         {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}
 436
 437         }
 438 \end{frame}
 439
 440 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 441
 442 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 443 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 444 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 445 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 446 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 447
 448 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 449 \section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
 450 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 451
 452 \begin{frame}[fragile,c]
 453     \frametitle{Shared Context}
 454     \begin{center}
 455         \scriptsize{
 456             \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or
 457             GLESv2 contexts when these contexts are \textit{shared}:}}
 458         }
 459         \vspace{0.001cm}
 460         \texttt{
 461             \begin{table}[h]
 462                 \centering
 463                 \begin{adjustbox}{max width=\textwidth}
 464                     \begin{tabular}{|l|}
 465                         \hline
 466                         \rowcolor{platinum}
 467                         \\
 468                         \rowcolor{platinum}
 469                         \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
 470                         \textbf{shared\_ctx}, new\_ctx\_attrib);\\
 471                         \rowcolor{platinum}\\
 472                         \hline
 473                     \end{tabular}
 474                 \end{adjustbox}
 475             \end{table}
 476         }
 477
 478         \vspace{0.1cm}
 479         \scriptsize{
 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!}}
 483         }
 484         \vspace{0.01cm}
 485
 486         \tiny{
 487             \texttt{
 488                 \begin{table}[h]
 489                     \centering
 490                     \begin{adjustbox}{max width=\textwidth}
 491                         \begin{tabular}{|l|}
 492                             \rowcolor{platinum}
 493                             \hline
 494                             \rowcolor{platinum}
 495                             \\
 496                             \rowcolor{platinum}
 497                         glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
 498                             \rowcolor{platinum}
 499                         {\color{darkgray}/* ... gl operations ... */}\\
 500                             \rowcolor{platinum}
 501                         \\
 502                             \rowcolor{platinum}
 503                         angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
 504                             \rowcolor{platinum}
 505                         {\color{darkgray}/* ... angle\_gl operations ... */}\\
 506                             \rowcolor{platinum}
 507                         \\\hline
 508                     \end{tabular}
 509                     \end{adjustbox}
 510                 \end{table}
 511             }}
 512
 513     \vspace{0.2cm}
 514         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 515         \setbeamertemplate{itemize items}[triangle]
 516
 517         %\setbeamertemplate{blocks}
 518         \scriptsize{  \textbf{\color{coolblack}{Shared context restrictions:}}}
 519         \vspace{0.1cm}
 520         \begin{itemize}
 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
 524                 process}.(\textbf{=>
 525                 {\color{coolblack}{not
 526                 suitable for every project!}}})
 527         \end{itemize}
 528     \end{center}
 529 \end{frame}
 530
 531 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 532
 533 \begin{frame}[fragile,c]
 534     \frametitle{Could we use shared context in WebKit?}
 535
 536         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 537         \setbeamertemplate{itemize items}[triangle]
 538     \begin{center}
 539         \scriptsize{
 540             \textbf{\color{coolblack} Could we use shared context in WebKit?}\\
 541
 542             \vspace{0.2cm}
 543
 544             \textbf{Short answer:} Currently yes (with some workaround) but not in the
 545             future.
 546
 547             \vspace{0.3cm}
 548
 549             \begin{block}{Requirements to use shared context/textures in \textbf{WebKit}:}
 550                 \begin{itemize}
 551                     \item We should use the \textbf{ANGLE EGL/OpenGL backend in
 552                         WebGL2} to
 553                         match the main Graphics Pipeline API/driver (both contexts
 554                         should be OpenGL or GLESv2 and from the same driver!)
 555                     \item We'd need an \textbf{ANGLE extension} to allow passing
 556                         native shared context to ANGLE's eglCreateContext instead of
 557                         ANGLE shared context.
 558                     \item We should never move WebGL2 and Graphics Pipeline in
 559                         different processes. Shared contexts should be created by
 560                         the same process! (\textbf{Reason we've rejected this
 561                         method}).
 562                 \end{itemize}
 563             \end{block}
 564         }
 565
 566         \vspace{0.3cm}
 567
 568         \tiny{
 569             \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
 570             \texttt{EGL\_ANGLE\_native\_shared\_context}
 571
 572             \vspace{0.2cm}
 573
 574
 575             \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed
 576             to \texttt{\color{afblue}eglCreateContext}:\\
 577             \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}
 578
 579             \vspace{0.3cm}
 580             {\color{coolblack}
 581             This attribute indicates that the shared context in
 582             \texttt{\color{deepjunglegreen}eglCreateContext}
 583             is \textbf{not ANGLE} and should be used as native in the internal
 584             implementation.
 585             }
 586         }
 587     \end{center}
 588 \end{frame}
 589
 590 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 591 \begin{frame}[fragile,c]
 592     \frametitle{EGL\_ANGLE\_native\_shared\_context}
 593
 594         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 595     \setbeamertemplate{itemize items}[triangle]{\tiny}
 596     \setbeamercolor{block body}{bg=white}
 597
 598     \begin{center}
 599         \tiny{
 600             \begin{block}{This is how we create shared OpenGL
 601                 context using EGL (system or ANGLE):}
 602                 \centering
 603                 \begin{adjustbox}{max width=\textwidth}
 604                     \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
 605                 \end{adjustbox}
 606
 607                 \begin{comment}
 608                 {\color{coolblack}
 609                 \begin{table}[t]
 610                     \centering
 611                     \begin{adjustbox}{max width=\textwidth}
 612                         \begin{tabular}{l}
 613                             · In case of system EGL \texttt{ctx\_A} and
 614                             \texttt{ctx\_B} are native
 615                             EGL contexts.\\
 616                             · In case of ANGLE they are ANGLE EGL contexts.\\
 617                         \end{tabular}
 618                     \end{adjustbox}
 619                 \end{table}
 620                 }
 621                 \end{comment}
 622             \end{block}
 623         }
 624
 625         \tiny{
 626         \begin{block}{This is how we'd create shared
 627         OpenGL context between native EGL and ANGLE EGL using
 628             \texttt{EGL\_ANGLE\_native\_shared\_context}:}
 629
 630             \vspace{0.2cm}
 631             \begin{itemize}
 632                 \item \tiny{We'd pass the native EGL context (created by the native system
 633                     driver) as {\color{black}shared context} to the
 634                     native OpenGL context that is created {\color{black}in the ANGLE
 635                     OpenGL backend} using the native system driver!}
 636                 \item \tiny{We'd need use the {\color{black}new EGL attribute
 637                     (\texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE})} to let ANGLE know
 638                     that the shared context \textit{\color{coolblack}is not ANGLE but native}
 639                     context!}
 640             \end{itemize}
 641             \vspace{-0.2cm}
 642
 643         \begin{table}[t]
 644             \centering
 645             \begin{tabular}{l}
 646                 \begin{adjustbox}{max width=\textwidth}
 647                     \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
 648                 \end{adjustbox}
 649             \end{tabular}
 650         \end{table}
 651         \end{block}
 652     }
 653
 654
 655     \end{center}
 656 \end{frame}
 657
 658 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 659 \begin{frame}[fragile,c]
 660     \frametitle{Some work on the shared context approach}
 661         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 662     \setbeamertemplate{itemize items}[triangle]{\tiny}
 663     \setbeamercolor{block body}{bg=white}
 664
 665     \begin{center}
 666         \begin{block}{\tiny{Extension
 667             \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}:}}
 668             \vspace{0.2cm}
 669             \tiny{
 670                 \begin{table}[h]
 671                     \centering
 672                         Worked on the extension implementation (draft state, there are
 673                         bugs).\\
 674                     \begin{tabular}{l}
 675                         \\
 676                         \textbf{Concept:}\\
 677                         \begin{adjustbox}{max width=\textwidth}
 678                             \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
 679                         \end{adjustbox}\\
 680                     \end{tabular}
 681                 \end{table}
 682             }
 683         \end{block}
 684         \begin{block}{\tiny{Experimental programs (to test the extension and
 685             familiarize with the shared context concept):}}
 686             \begin{itemize}
 687                 \item A test program that uses EGL ctxA to create a texture and
 688                     EGL ctxB to display it on an X11 window.
 689                 \item The same program written in ANGLE (there were
 690                     differences!)
 691                 \item A test program that uses EGL ctxA to create a texture and
 692                     ANGLE EGL ctxB to display it on an X11 window.
 693                 \item Variations of the above:
 694                     \url{https://github.com/hikiko/shctx/branches}
 695             \end{itemize}
 696         \end{block}
 697     \end{center}
 698    \end{frame}
 699
 700 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 701    \begin{frame}
 702        \frametitle{Abandoned!}
 703        \begin{center}
 704            \textbf{\color{coolblack} Why not shared context?}
 705            \vspace{0.5cm}
 706
 707            {\footnotesize{
 708                \begin{itemize}
 709                    \item Shared context would be a nice and clean approach if we wanted to use
 710                        it with our current WebKit code.
 711                    \item But there is a plan to use \textbf{separate processes} for WebGL2 and
 712                                            the main graphics pipeline!! (Žan Doberšek)
 713                \end{itemize}
 714            }}
 715
 716            \vspace{0.5cm}
 717            \textbf{\color{coolblack} But there was a \textit{better} approach!}
 718        \end{center}
 719    \end{frame}
 720 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 721
 722 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 723 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 724 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 725 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 726
 727 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 728 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
 729 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 730
 731 \begin{frame}
 732     \frametitle{DMA buffers for the win!}
 733
 734     \begin{center}
 735                 \textbf{\color{coolblack}Fortunately we are on Linux!}
 736
 737                 \setbeamercolor{block body}{bg=white}
 738                 \setbeamercolor{block title}{bg=white, fg=coolblack}
 739                 \begin{block}{\scriptsize{There is a Linux kernel framework that can be used for
 740                         content sharing across different Linux drivers!}}
 741
 742                         \vspace{-0.1cm}
 743                         \begin{table}[t]
 744                                 \centering
 745                                 \begin{tabular}{l}
 746                                         \begin{adjustbox}{max width=\textwidth}
 747                                                 \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
 748                                         \end{adjustbox}
 749                                 \end{tabular}
 750                         \end{table}
 751
 752                         \textbf{\scriptsize{\color{coolblack}A few interesting things about
 753             content sharing with dma buffers:}}\\
 754                         \vspace{0.1cm}
 755
 756                         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 757                         \begin{itemize}
 758                                 \item There are {\color{coolblack}EGL and OpenGL/GLESv2
 759                                         extensions} to make it easier!
 760                                 \item It's a {\color{coolblack}driver independent} method!
 761                                 \item It works with {\color{coolblack}multiple processes}!
 762                                 \item As long as ANGLE can expose the required extensions to
 763                                         import a dma\_buf file descriptor this method is also
 764                                         {\color{coolblack}"ANGLE backend
 765                                         independent"}!
 766                                 \item DMA buffers are a {\color{coolblack}Linux-only} thing...
 767                     but we won't need to support other systems! (Žan Doberšek)
 768                         \end{itemize}
 769                 \end{block}
 770     \end{center}
 771 \end{frame}
 772
 773 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 774
 775 \begin{frame}
 776         \frametitle{Extensions and new approach}
 777
 778         \setbeamercolor{block body}{bg=white}
 779         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 780
 781         \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
 782                 the WebGL texture data?}}
 783
 784                 \begin{center}
 785                         \begin{itemize}
 786                                 \item Each texture is backed by a Linux kernel dma\_buffer.
 787                                 \item Multiple textures can use the same dma buffer as backing
 788                                         storage if they meet some requirements.
 789                                 \item We can export the file descriptor of one buffer from one
 790                                         driver and use it to access the buffer from the other
 791                                         driver.
 792                                 \item So we can export the fd that corresponds to the compositor
 793                                         texture, import it in WebGL when we create the render target
 794                                         and when the WebGL texture is filled, the compositor texture
 795                                         will be also filled, as they share the backing storage!
 796                         \end{itemize}
 797                 \end{center}
 798         \end{block}
 799
 800         \begin{block}{\scriptsize{EGL and GL extensions that can be used for that
 801         purpose:}}
 802                 \begin{center}
 803                         \begin{itemize}
 804                                 \item
 805                                         \href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}:
 806                                         \\ This extension allows creating one or multiple Linux dma\_buf
 807                                         file descriptors from the EGLImage that corresponds to a texture.
 808                                 \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}:
 809                                         \\ This extension allows creating an EGLImage (that will be used to create a
 810                                         texture) from one or multiple Linux dma\_buf file
 811                                         descriptors.
 812                                 \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}:
 813                                         \\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support
 814                                         format modifiers used for tiling, compression, and additional non-linear
 815                                         modes.
 816                                 \item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}:
 817                                         \\ This extension provides a mechanism for creating EGLImage texture targets
 818                                         from EGLImages.
 819                         \end{itemize}
 820                 \end{center}
 821         \end{block}
 822 \end{frame}
 823
 824 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 825
 826 \begin{frame}
 827         \frametitle{Example:}
 828
 829         \setbeamercolor{block body}{bg=white}{\scriptsize}
 830         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 831
 832         \begin{block}{\scriptsize{I've written an example:}}
 833                 \begin{center}
 834                         \begin{itemize}
 835                                 \item First using two native EGL contexts\\
 836                                         Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
 837                                         Code: \url{https://gistof.com/dma-egl-version}
 838                                 \item Then using a native EGL context and a context created from
 839                     ANGLE\\
 840                                         Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
 841                                         Code: \url{https://gistof.com/dmaangleeglversion}
 842                         \end{itemize}
 843                 \end{center}
 844         \end{block}
 845         \vspace{-0.3cm}
 846         \begin{block}{\scriptsize{Snippet from the exporter:}}
 847                 \vspace{-0.1cm}
 848                 \tiny{
 849                 \begin{table}[t]
 850                         \centering
 851                         \begin{tabular}{l}
 852                                 {\color{coolblack}Exporting a dma buffer from a texture
 853                                 \texttt{texA}:}\\
 854                                 \begin{adjustbox}{max width=\textwidth}
 855                                         \adjustbox{valign=t}{\includegraphics[height=4cm]{data/dma_export_and_struct.png}}
 856                                 \end{adjustbox}\\
 857                         \end{tabular}
 858                 \end{table}
 859                 }
 860         \end{block}
 861 \end{frame}
 862
 863 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 864
 865 \begin{frame}
 866         \frametitle{Example continued}
 867         \setbeamercolor{block body}{bg=white}{\scriptsize}
 868         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 869
 870         \begin{block}{\scriptsize{Snippets from the importer:}}
 871                 \vspace{-0.1cm}
 872                 \tiny{
 873                 \begin{table}[t]
 874                         \centering
 875                         \begin{tabular}{l}
 876                                 {\color{coolblack}Creating an EGLImage from the dma buffer using
 877                                 the exported fd and the exported modifiers:}\\
 878                                 \\
 879                                 \begin{adjustbox}{max width=\textwidth}
 880                                         \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
 881                                 \end{adjustbox}\\
 882 \\
 883 \\
 884                                 {\color{coolblack}Creating a texture using that external
 885                                 EGLImage:}\\
 886                                 \\
 887                                 \begin{adjustbox}{max width=\textwidth}
 888                                         \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
 889                                 \end{adjustbox}\\
 890                         \end{tabular}
 891                 \end{table}
 892                 }
 893         \end{block}
 894 \end{frame}
 895
 896 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 897 \begin{frame}
 898         \frametitle{Test program}
 899
 900         \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
 901                 EGL}}
 902                 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 903                 \begin{itemize}
 904                         \itemsep0.3cm
 905                         \itemsep0.2cm
 906                         \item First context is EGL/OpenGL like the one in main graphics
 907                                 pipeline.
 908                         \item Second is ANGLE with EGL/GLESv2 backend like the one in
 909                                 WebGL2.
 910                         \item EGL/OpenGL context creates an empty texture and exports the dma\_buf
 911                                 fd and all other information about the buffer.
 912                         \item ANGLE context creates another empty texture using the same
 913                                 dma\_buf and the import mechanism.
 914                         \item ANGLE context fills the emty ANGLE texture.
 915                         \item EGL/OpenGL context displays the previously empty OpenGL/EGL
 916                                 texture.
 917                         \item EGL/OpenGL texture contains what ANGLE texture had.
 918                         \item \textbf{We shared the ANGLE data without copying them!}
 919                 \end{itemize}
 920
 921         \end{block}
 922         \vspace{0.2cm}
 923         \scriptsize{
 924                 \begin{center}
 925                         \textbf{\color{coolblack}Check the blog posts for more details!}
 926                 \end{center}
 927                 }
 928 \end{frame}
 929 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 930
 931 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 932 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 933 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 934 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 935 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 936
 937 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 938 \section[Multiple Processes]{Multiple Processes}
 939 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 940
 941 \begin{frame}[fragile,c]
 942     \frametitle{What if WebGL and Graphics pipeline were separate processes?}
 943
 944 \vspace{0.3cm}
 945     \center{
 946         \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
 947     pipeline in two processes. (Žan Doberšek)}}}
 948
 949 \vspace{0.5cm}
 950         \begin{block}{Can we still use shared DMA buffers?}
 951         \footnotesize{
 952
 953     \begin{itemize}
 954        \itemsep0.3cm
 955        \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
 956               multiple processes.}
 957                   \item {\color{coolblack} But we need some sort of \textbf{\textit{interprocess
 958                           communication}} to exchange the file descriptor.}
 959                   \item {\color{coolblack} This is a client-server
 960                           \textbf{\textit{example}} that uses unix
 961             sockets to pass the dma-buf FD from one process to the other:
 962                         \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.}
 963             \end{itemize}
 964
 965         }
 966     \end{block}
 967 \vspace{0.3cm}
 968 \end{frame}
 969
 970 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 971
 972 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 973 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 974 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 975 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 976 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 977
 978 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 979 \section[WebKit Integration]{WebKit Integration}
 980 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 981
 982 \begin{frame}[fragile,c]
 983     \frametitle{WIP WebKit:}
 984         \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
 985
 986         \vspace{0.1cm}
 987         \begin{center}
 988                 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 989                 \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
 990                         \begin{itemize}
 991                                 \itemsep0.2cm
 992                                 \item The extensions to import dma-buf buffers in ANGLE are
 993                                         implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline
 994                                         DMA buf when we create the render target!}
 995                                 \item The extension to export dma-buf buffers from EGL is
 996                                         supported on mesa => {\color{coolblack}we could run a check before creating
 997                                         the shared dma buffer and use either use it or fallback to
 998                                         something else (libgbm? copying?)}
 999                         \end{itemize}
1000         \end{center}
1001         \vspace{0.05cm}
1002         {\scriptsize{
1003         \begin{block}{DONE/WIP/TODO}
1004             \begin{itemize}
1005                 \item{Use the right CMake options (one can't simply enable
1006                     \texttt{USE\_ANGLE\_WEBGL}!):
1007                     \color{coolblack}{\textbf{FIXED }}}
1008                 \item{There were compile errors when ANGLE was used:
1009                     \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
1010                 \item{Link errors when ANGLE is used:
1011                     \color{coolblack}{\textbf{WIP/Partially FIXED}}}
1012                 \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
1013             \end{itemize}
1014         \end{block}
1015         }}
1016
1017 \end{frame}
1018
1019 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1020
1021 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1022 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1023 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1024 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1025 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1026
1027 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1028 \section[References]{References}
1029 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1030 %\setbeamertemplate{bibliography entry title}{}
1031 %\setbeamertemplate{bibliography entry location}{}
1032 %\setbeamertemplate{bibliography entry note}{}
1033 \setbeamerfont{bibliography item}{size=\footnotesize}
1034 \setbeamerfont{bibliography entry author}{size=\footnotesize}
1035 \setbeamerfont{bibliography entry title}{size=\footnotesize}
1036 \setbeamerfont{bibliography entry year}{size=\footnotesize}
1037 \setbeamerfont{bibliography entry note}{size=\footnotesize}
1038
1039 \begin{frame}[allowframebreaks]
1040         \frametitle{Links}
1041         \bibliographystyle{unsrt}
1042         \bibliography{bib/references.bib}
1043         \nocite{*}
1044 \end{frame}
1045
1046 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1047 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1048 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1049 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1050 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1051
1052 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1053 \section[TheEnd]{Closing}
1054 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1055
1056 \begin{frame}[plain]
1057 \begin{minipage}[b][0.6\textheight]{\linewidth}
1058         \begin{picture}(0, 0)
1059                 \put(0, -76){%
1060                         \pgfuseimage{igaliabglight}
1061                         }
1062                         \begin{minipage}[b][0.4\textheight]{\linewidth}
1063                                 \begin{figure}
1064                                         \includegraphics[scale=0.6]{data/mesa.png}
1065                                 \end{figure}
1066                         \end{minipage}
1067                 \put(-200, 0) {
1068                         \hfill \huge{\textbf{\color{coolblack}Thank you!}}\\
1069                         }
1070         \end{picture}
1071 \end{minipage}
1072 \end{frame}
1073 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1074 \end{document}
1075 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%