git.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}{What would we need to change in \textbf{WebKit} for
 550                 shared context to work?}
 551                 \begin{itemize}
 552                     \item Force the \textbf{ANGLE EGL/OpenGL backend in
 553                         WebGL2} to
 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
 562                         method}).
 563                 \end{itemize}
 564             \end{block}
 565         }
 566
 567         \vspace{0.3cm}
 568
 569         \tiny{
 570             \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
 571             \texttt{EGL\_ANGLE\_native\_shared\_context}
 572
 573             \vspace{0.2cm}
 574
 575
 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}
 579
 580             \vspace{0.3cm}
 581             {\color{coolblack}
 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
 585             implementation.
 586             }
 587         }
 588     \end{center}
 589 \end{frame}
 590
 591 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 592 \begin{frame}[fragile,c]
 593     \frametitle{EGL\_ANGLE\_native\_shared\_context}
 594
 595         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 596     \setbeamertemplate{itemize items}[triangle]{\tiny}
 597     \setbeamercolor{block body}{bg=white}
 598
 599     \begin{center}
 600         \tiny{
 601             \begin{block}{This is how we create shared OpenGL
 602                 context using EGL (system or ANGLE):}
 603                 \centering
 604                 \begin{adjustbox}{max width=\textwidth}
 605                     \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
 606                 \end{adjustbox}
 607
 608                 \begin{comment}
 609                 {\color{coolblack}
 610                 \begin{table}[t]
 611                     \centering
 612                     \begin{adjustbox}{max width=\textwidth}
 613                         \begin{tabular}{l}
 614                             · In case of system EGL \texttt{ctx\_A} and
 615                             \texttt{ctx\_B} are native
 616                             EGL contexts.\\
 617                             · In case of ANGLE they are ANGLE EGL contexts.\\
 618                         \end{tabular}
 619                     \end{adjustbox}
 620                 \end{table}
 621                 }
 622                 \end{comment}
 623             \end{block}
 624         }
 625
 626         \tiny{
 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}:}
 630
 631             \vspace{0.5cm}
 632         \begin{table}[t]
 633             \centering
 634             \begin{tabular}{l}
 635                 \begin{adjustbox}{max width=\textwidth}
 636                     \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
 637                 \end{adjustbox}
 638             \end{tabular}
 639         \end{table}
 640         \end{block}
 641     }
 642
 643
 644     \end{center}
 645 \end{frame}
 646
 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}
 653
 654     \begin{center}
 655         \begin{block}{\tiny{What happens inside ANGLE
 656             (with \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}):}}
 657             \vspace{0.2cm}
 658             \tiny{
 659                 \begin{table}[h]
 660                     \centering
 661                     \begin{tabular}{l}
 662                         \begin{adjustbox}{max width=\textwidth}
 663                             \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
 664                         \end{adjustbox}
 665                     \end{tabular}
 666                 \end{table}
 667             }
 668         \end{block}
 669         \begin{block}{\tiny{Experimental programs (to test the extension and
 670             familiarize with the shared context concept):}}
 671             \begin{itemize}
 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
 675                     differences!)
 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}
 680             \end{itemize}
 681         \end{block}
 682     \end{center}
 683    \end{frame}
 684
 685 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 686    \begin{frame}
 687        \frametitle{Abandoned!}
 688        \begin{center}
 689            \textbf{\color{coolblack} Why not shared context?}
 690            \vspace{0.5cm}
 691
 692            {\footnotesize{
 693                \begin{itemize}
 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)
 698                \end{itemize}
 699            }}
 700
 701            \vspace{0.5cm}
 702            \textbf{\color{coolblack} But there was a \textit{better} approach!}
 703        \end{center}
 704    \end{frame}
 705 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 706
 707 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 708 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 709 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 710 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 711
 712 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 713 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
 714 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 715
 716 \begin{frame}
 717     \frametitle{DMA buffers for the win!}
 718
 719     \begin{center}
 720                 \textbf{\color{coolblack}Fortunately we are on Linux!}
 721
 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!}}
 726
 727                         \vspace{-0.1cm}
 728                         \begin{table}[t]
 729                                 \centering
 730                                 \begin{tabular}{l}
 731                                         \begin{adjustbox}{max width=\textwidth}
 732                                                 \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
 733                                         \end{adjustbox}
 734                                 \end{tabular}
 735                         \end{table}
 736
 737                         \textbf{\scriptsize{\color{coolblack}A few interesting things about
 738             content sharing with dma buffers:}}\\
 739                         \vspace{0.1cm}
 740
 741                         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 742                         \begin{itemize}
 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
 750                                         independent"}!
 751                                 \item DMA buffers are a {\color{coolblack}Linux-only} thing...
 752                     but we won't need to support other systems! (Žan Doberšek)
 753                         \end{itemize}
 754                 \end{block}
 755     \end{center}
 756 \end{frame}
 757
 758 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 759
 760 \begin{frame}
 761         \frametitle{Extensions and new approach}
 762
 763         \setbeamercolor{block body}{bg=white}
 764         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 765
 766 %    \begin{comment}
 767 %       \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
 768 %               the WebGL texture data?}}
 769 %
 770 %               \begin{center}
 771 %                       \begin{itemize}
 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
 777 %                                       driver.
 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!
 782 %                       \end{itemize}
 783 %               \end{center}
 784 %       \end{block}
 785 %    \end{comment}
 786
 787         \begin{block}{\scriptsize{EGL and GL extensions to share content across
 788         drivers using dma\_buf buffers:}}
 789                 \begin{center}
 790                         \begin{itemize}
 791                                 \item
 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
 798                                         descriptors.
 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
 802                                         modes.
 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
 805                                         from EGLImages.
 806                         \end{itemize}
 807                 \end{center}
 808         \end{block}
 809         \begin{block}{\scriptsize{Example Programs:}}
 810                 \begin{center}
 811                         \begin{itemize}
 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}
 820                         \end{itemize}
 821                 \end{center}
 822         \end{block}
 823
 824 \end{frame}
 825
 826 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 827
 828 \begin{frame}
 829         \frametitle{Example:}
 830
 831         \setbeamercolor{block body}{bg=white}{\scriptsize}
 832         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 833
 834         \begin{block}{\scriptsize{Snippet from the exporter:}}
 835                 \tiny{
 836                 \begin{table}[t]
 837                         \centering
 838                         \begin{tabular}{l}
 839                                 {\color{coolblack}Exporting a dma buffer from a texture
 840                                 \texttt{texA}:}\\
 841                 \\
 842                                 \begin{adjustbox}{max width=\textwidth}
 843                                         \adjustbox{valign=t}{\includegraphics[height=6.5cm]{data/dma_export_and_struct.png}}
 844                                 \end{adjustbox}\\
 845                         \end{tabular}
 846                 \end{table}
 847                 }
 848         \end{block}
 849 \end{frame}
 850
 851 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 852
 853 \begin{frame}
 854         \frametitle{Example continued}
 855         \setbeamercolor{block body}{bg=white}{\scriptsize}
 856         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 857
 858         \begin{block}{\scriptsize{Snippets from the importer:}}
 859                 \vspace{-0.1cm}
 860                 \tiny{
 861                 \begin{table}[t]
 862                         \centering
 863                         \begin{tabular}{l}
 864                                 {\color{coolblack}Creating an EGLImage from the dma buffer using
 865                                 the exported fd and the exported modifiers:}\\
 866                                 \\
 867                                 \begin{adjustbox}{max width=\textwidth}
 868                                         \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
 869                                 \end{adjustbox}\\
 870 \\
 871 \\
 872                                 {\color{coolblack}Creating a texture using that external
 873                                 EGLImage:}\\
 874                                 \\
 875                                 \begin{adjustbox}{max width=\textwidth}
 876                                         \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
 877                                 \end{adjustbox}\\
 878                         \end{tabular}
 879                 \end{table}
 880                 }
 881         \end{block}
 882 \end{frame}
 883
 884 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 885 \begin{frame}
 886     \frametitle{Final test program (WORKS!)}
 887
 888         \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
 889                 EGL}}
 890                 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 891                 \begin{itemize}
 892                         \itemsep0.3cm
 893                         \item First context is EGL/OpenGL like the one in main graphics
 894                                 pipeline.
 895                         \item Second is ANGLE with EGL/GLESv2 backend like the one in
 896                                 WebGL2.
 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
 903                                 texture.
 904                         \item EGL/OpenGL texture contains what ANGLE texture had.
 905                         \item \textbf{We shared the ANGLE data without copying them!}
 906                 \end{itemize}
 907
 908         \end{block}
 909         \vspace{0.2cm}
 910         \scriptsize{
 911                 \begin{center}
 912                         \textbf{\color{coolblack}Check the blog posts for more details!}
 913                 \end{center}
 914                 }
 915 \end{frame}
 916 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 917
 918 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 919 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 920 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 921 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 922 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 923
 924 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 925 \section[Multiple Processes]{Multiple Processes}
 926 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 927
 928 \begin{frame}[fragile,c]
 929     \frametitle{What if WebGL and Graphics pipeline were separate processes?}
 930
 931 \vspace{0.3cm}
 932     \center{
 933         \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
 934     pipeline in two processes. (Žan Doberšek)}}}
 935
 936 \vspace{0.5cm}
 937         \setbeamercolor{block body}{bg=white}{\scriptsize}
 938         \begin{block}{Can we still use shared DMA buffers?}
 939         \footnotesize{
 940
 941     \begin{itemize}
 942        \itemsep0.3cm
 943        \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
 944               multiple processes.}
 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}.}
 951             \end{itemize}
 952
 953         }
 954     \end{block}
 955 \vspace{0.3cm}
 956 \end{frame}
 957
 958 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 959
 960 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 961 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 962 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 963 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 964 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 965
 966 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 967 \section[WebKit Integration]{WebKit Integration}
 968 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 969
 970 \begin{frame}[fragile,c]
 971     \frametitle{WIP WebKit:}
 972         \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
 973
 974         \vspace{0.1cm}
 975         \begin{center}
 976                 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 977                 \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
 978                         \begin{itemize}
 979                                 \itemsep0.2cm
 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?)}
 987                         \end{itemize}
 988         \end{center}
 989         \vspace{0.05cm}
 990         {\scriptsize{
 991         \begin{block}{DONE/WIP/TODO}
 992             \begin{itemize}
 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}}}
1001             \end{itemize}
1002         \end{block}
1003         }}
1004
1005 \end{frame}
1006
1007 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1008
1009 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1010 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1011 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1012 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1013 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1014
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}
1026
1027 \begin{frame}[allowframebreaks]
1028         \frametitle{Links}
1029         \bibliographystyle{unsrt}
1030         \bibliography{bib/references.bib}
1031         \nocite{*}
1032 \end{frame}
1033
1034 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1035 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1036 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1037 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1038 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1039
1040 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1041 \section[TheEnd]{Closing}
1042 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1043
1044 \begin{frame}[plain]
1045 \begin{minipage}[b][0.6\textheight]{\linewidth}
1046         \begin{picture}(0, 0)
1047                 \put(0, -76){%
1048                         \pgfuseimage{igaliabglight}
1049                         }
1050                         \begin{minipage}[b][0.4\textheight]{\linewidth}
1051                                 \begin{figure}
1052                                         \includegraphics[scale=0.6]{data/mesa.png}
1053                                 \end{figure}
1054                         \end{minipage}
1055                 \put(-200, 0) {
1056                         \hfill \huge{\textbf{\color{coolblack}Thank you!}}\\
1057                         }
1058         \end{picture}
1059 \end{minipage}
1060 \end{frame}
1061 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1062 \end{document}
1063 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%