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}{\inserttitle\par}
 115                     \usebeamerfont{author}{\insertauthor\par}
 116                 \end{minipage}
 117             }
 118
 119                         \put(240, -138){
 120                                 \usebeamerfont{date}{\huge{{\insertdate}}\par}
 121                                 }
 122                 \end{picture}
 123 }
 124
 125 \setbeamertemplate{itemize items}[triangle]
 126 \setbeamertemplate{itemize subitem}[circle]
 127 \setbeamerfont{frametitle}{size=\small}
 128
 129 \setbeamertemplate{blocks}[default]
 130 \setbeamercolor{block title}{fg=amber,bg=black}
 131
 132 \title{\textbf{Sharing texture data across EGL drivers}}
 133 \author[Eleni Maria Stea <estea@igalia.com>]{\small{Eleni Maria Stea
 134 <estea@igalia.com>}\\\\\includegraphics{data/igalia.eps}}
 135 \date{\tiny{WebKit Codecamp}}
 136
 137 \AtBeginSection[]
 138 {
 139   \begin{frame}
 140     \frametitle{Outline}
 141         \tableofcontents[currentsection]
 142   \end{frame}
 143 }
 144
 145 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 146 \begin{document}
 147 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 148
 149 \begin{frame}[plain]
 150 \titlepage
 151 \end{frame}
 152
 153 \begin{frame}
 154         \frametitle{Outline}
 155         \tableofcontents
 156 \end{frame}
 157
 158 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 159
 160 \begin{comment}
 161 \begin{frame}[fragile,c]
 162     \frametitle{}
 163     \begin{center}
 164     \end{center}
 165 \end{frame}
 166 \end{comment}
 167
 168 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 169 \section[Introduction]{Introduction: Using ANGLE in WebGL2 (WebKit)}
 170 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 171
 172 \begin{frame}[fragile,c]
 173     \frametitle{A few words about ANGLE}
 174         \center{\textbf{\color{coolblack}{ANGLE is an EGL/GLESv2 implementation}}}
 175
 176         \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 177         \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
 178         \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
 179         \setbeamertemplate{itemize items}[triangle]
 180     \setbeamertemplate{blocks}[rounded]
 181
 182         \vspace{0.3cm}
 183     \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}}
 184                 \begin{itemize}
 185                         \itemsep0.2cm
 186             \item GLESv2 is used to render graphics using the GPU (graphics
 187                 API).
 188             \item EGL is used to create a GLESv2 context.
 189         \end{itemize}
 190         \end{block}
 191         \vspace{0.3cm}
 192
 193     \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}}
 194                 \begin{itemize}
 195                         \itemsep0.2cm
 196                         \item GLESv2 is implemented \textbf{on top of other APIs} (OpenGL,
 197                 Vulkan, GLESv2). EGL too (EGL, GLX, gbm, headless display).
 198             \item Users can select the most convenient backend using some
 199                 \textbf{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that
 200                 provide extra attributes to some standard EGL API stucts.
 201                         \item Primary \textbf{purpose} of ANGLE is to provide EGL/GLESv2 to systems
 202                 lacking it.
 203         \end{itemize}
 204         \end{block}
 205
 206         \vspace{0.2cm}
 207 \end{frame}
 208
 209 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 210
 211 \begin{frame}[fragile,c]
 212     \frametitle{Using ANGLE in WebKit}
 213
 214     \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
 215         \vspace{0.2cm}
 216
 217         \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 218         \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
 219         \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
 220         \setbeamertemplate{itemize items}[triangle]
 221         \setbeamertemplate{blocks}[rounded]
 222
 223         \vspace{0.1cm}
 224
 225     \begin{block}{\color{afblue}{\scriptsize\textbf{Reasons}:}}
 226                 \begin{itemize}
 227             \item better performance in some cases (Žan Doberšek)
 228             \item it'll be mostly an optimized wrapper around the native driver (libGLES*
 229                                 is available on Linux desktop!)
 230         \end{itemize}
 231         \end{block}
 232         \vspace{0.3cm}
 233     \begin{block}{\color{afblue}{\scriptsize\textbf{Problem}:}}
 234                 \begin{itemize}
 235                         \item \textbf{ANGLE} renders on a \textbf{GLESv2 texture} created by ANGLE context
 236                         \item {\color{coolblack}WebKit \textbf{graphics pipeline} components use
 237                                 \textbf{OpenGL textures} that
 238                                 are composited by the WebKit compositor}
 239             \item We are currently \textbf{\textit{copying}} the ANGLE texture data to
 240                 an OpenGL texture to assemble the final image and this is
 241                 \textbf{\textit{slow}}!
 242         \end{itemize}
 243         \end{block}
 244
 245         \vspace{0.1cm}
 246
 247     \center{\textbf{\color{coolblack}{We need to replace this copy with
 248     something better!}}}
 249
 250         \vspace{0.2cm}
 251 \end{frame}
 252
 253 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 254
 255 \begin{frame}[fragile,c]
 256     \frametitle{Experiments on Linux}
 257
 258     \vspace{0.3cm}
 259     {\footnotesize{
 260         \begin{enumerate}
 261         \itemsep0.3cm
 262         \item {\color{coolblack}\textbf{Use ANGLE and EGL in the same program:
 263             create 2 X11 windows, and draw 2 images from 2 different contexts
 264                 by 2 different drivers.}
 265
 266                 \tiny{{(In several cases ANGLE behaves
 267                 different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
 268                 call \texttt{eglMakeCurrent}!!).}}
 269                 }
 270             \item {\color{coolblack}\textbf{Fix the problem with shared
 271                 context and shared textures.}
 272
 273                 \tiny{{(required
 274                 modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
 275                 EGL/OpenGL backend, and it wouldn't work with multiple
 276                 processes)}}
 277                 }
 278             \item {\color{coolblack}\textbf{Fix the problem by sharing a Linux kernel
 279                 dma-buf buffer across drivers.}
 280
 281                 \tiny{{(drivers must support some EGL/GL extensions, but both mesa and
 282                 ANGLE support them)}}
 283                 }
 284             \item {\color{coolblack}\textbf{Solve the multiple processes case.}
 285
 286                 \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
 287                 }
 288         \end{enumerate}
 289     }}
 290 \end{frame}
 291
 292 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 293 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 294 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 295 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 296 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 297 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 298
 299 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 300 \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
 301 program}
 302 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 303
 304 \begin{frame}[fragile,c]
 305     \frametitle{Step 1: Setting up to debug ANGLE with GDB}
 306
 307         \vspace{0.2cm}
 308
 309     \begin{center}
 310                 \scriptsize{
 311                 I've ran my experiments using test programs and ANGLE,\\
 312                 and I had to modify the default set up to step into ANGLE calls with GDB:
 313                 }
 314     \end{center}
 315
 316         \vspace{0.1cm}
 317
 318         \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 319         \begin{block}{\scriptsize{Things that need attention when building ANGLE for
 320         debugging:}}\scriptsize{
 321             \vspace{0.2cm}
 322                 \begin{itemize}
 323                         \itemsep0.1cm
 324                                 \color{coolblack}
 325                         \item {{Default \textbf{gn} configuration redirects debugging
 326                                 symbols into separate files where GDB can't find them.}}
 327                         \item {\textbf{GDB} doesn't know where to find the ANGLE
 328                                 installation directories.}
 329                         \item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's
 330                                 impossible to step without errors when it's enabled.}}
 331                         \item {\textbf{Debugging symbols} aren't enabled by default.}
 332                 \end{itemize}}
 333         \vspace{0.2cm}
 334         \end{block}
 335
 336         \vspace{0.3cm}
 337
 338         \scriptsize{
 339                 \setbeamertemplate{itemize item}[circle]
 340         \begin{itemize}
 341                 \item {\textbf{Blog post} on how to set up
 342                         {\color{black}{ANGLE}} and {\color{black}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
 343                 \item {\textbf{Gist} with the {\color{black}{GN args}}
 344                         I've used: \url{https://gistof.com/gnargs}}
 345         \end{itemize}}
 346         \vspace{0.2cm}
 347 \end{frame}
 348
 349 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 350
 351 \begin{frame}[fragile,c]
 352     \frametitle{Step 2: Contexts from two drivers in the same
 353     program 1/2}
 354
 355         \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 356         \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
 357         \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
 358         \setbeamertemplate{itemize items}[triangle]
 359         \setbeamertemplate{blocks}[rounded]
 360
 361         \begin{center}
 362         \textbf{\color{coolblack}First Test}
 363         \end{center}
 364         \vspace{-0.1cm}
 365         \scriptsize{\color{coolblack}
 366         I've first written a program where both ANGLE and native system driver render
 367         images on two different X11 windows and displayed them side by side:
 368         }
 369         \vspace{-0.1cm}
 370         \begin{center}
 371         \adjustbox{valign=t, margin=1ex,
 372         padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
 373         \end{center}
 374         \vspace{-0.1cm}
 375         \begin{block}{\footnotesize{Things I had to take care of:}}
 376         \begin{itemize}
 377                 \item {Set ANGLE \textbf{library paths} in Makefile and link
 378                         with native system EGL.}
 379                 \item {\textbf{Dynamically open} ANGLE EGL and load its functions prefixed with
 380                         \texttt{angle\_} to distinguish them from native EGL ones.}
 381                 \item {Do the same for GLESv2.}
 382                 \item {\textbf{Invalidate the ANGLE context} at every display call.\\
 383                         (\textit{When ANGLE is not the only
 384                         implementation available \texttt{MakeCurrent} is not working as
 385                         expected!!!})}
 386         \end{itemize}
 387         \end{block}
 388 \end{frame}
 389
 390 \begin{frame}[fragile,c]
 391     \frametitle{Step 2: Contexts from two drivers in the same
 392     program 2/2}
 393         \vspace{0.1cm}
 394         \begin{center}
 395                 \textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
 396                 \\
 397                 \begin{table}[c]
 398                         \begin{tabularx}{\textwidth}{l X}
 399                                 \tiny{\textbf{\color{mediumred-violet}Context is cached in ANGLE!}} &
 400                                 \adjustbox{valign=c, margin=0.1ex,
 401                                 padding=0.1ex}{\includegraphics[height=2cm]{data/makecurrent.png}} \\
 402                         \end{tabularx}
 403                 \end{table}
 404         \end{center}
 405
 406         \vspace{-0.1cm}
 407         \begin{center}
 408                 \textbf{\color{coolblack}More on Makefile changes and dynamic loading:}
 409         \end{center}
 410
 411         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 412         \setbeamertemplate{itemize items}[circle]
 413
 414         \tiny{
 415         \textbf{\texttt{\color{black}{Blog post:}}}
 416         {Sharing texture data between ANGLE and the native system driver:\\
 417         \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}}\\
 418         \vspace{0.1cm}
 419         \begin{itemize}
 420             \itemsep0.1cm
 421             \item
 422                 {\color{black}Step 1: Using
 423                 both libraries in the same program.}
 424             \item
 425                 {\color{black}{About ANGLE MakeCurrent.}}
 426         \end{itemize}
 427
 428         \vspace{0.3cm}
 429
 430         \color{black}{\textbf{\texttt{Code:}}}
 431         {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}
 432
 433         }
 434 \end{frame}
 435
 436 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 437
 438 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 439 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 440 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 441 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 442 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 443
 444 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 445 \section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
 446 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 447
 448 \begin{frame}[fragile,c]
 449     \frametitle{Shared Context}
 450     \begin{center}
 451         \scriptsize{
 452             \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or
 453             GLESv2 contexts when these contexts are \textit{shared}:}}
 454         }
 455         \vspace{0.001cm}
 456         \texttt{
 457             \begin{table}[h]
 458                 \centering
 459                 \begin{adjustbox}{max width=\textwidth}
 460                     \begin{tabular}{|l|}
 461                         \hline
 462                         \rowcolor{platinum}
 463                         \\
 464                         \rowcolor{platinum}
 465                         \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
 466                         \textbf{native\_ctx}, new\_ctx\_attrib);\\
 467                         \rowcolor{platinum}\\
 468                         \hline
 469                     \end{tabular}
 470                 \end{adjustbox}
 471             \end{table}
 472         }
 473
 474         \vspace{0.1cm}
 475         \scriptsize{
 476             \textbf{\color{coolblack}{A texture generated by each context can be bound and used by the
 477             other\\ without ever leaving the GPU!}}
 478         }
 479         \vspace{0.01cm}
 480
 481         \tiny{
 482             \texttt{
 483                 \begin{table}[h]
 484                     \centering
 485                     \begin{adjustbox}{max width=\textwidth}
 486                         \begin{tabular}{|l|}
 487                             \rowcolor{platinum}
 488                             \hline
 489                             \rowcolor{platinum}
 490                             \\
 491                             \rowcolor{platinum}
 492                         glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
 493                             \rowcolor{platinum}
 494                         {\color{darkgray}/* ... gl operations ... */}\\
 495                             \rowcolor{platinum}
 496                         \\
 497                             \rowcolor{platinum}
 498                         angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
 499                             \rowcolor{platinum}
 500                         {\color{darkgray}/* ... angle\_gl operations ... */}\\
 501                             \rowcolor{platinum}
 502                         \\\hline
 503                     \end{tabular}
 504                     \end{adjustbox}
 505                 \end{table}
 506             }}
 507
 508     \vspace{0.2cm}
 509         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 510         \setbeamertemplate{itemize items}[triangle]
 511
 512         %\setbeamertemplate{blocks}
 513         \scriptsize{  \textbf{\color{coolblack}{Shared context restrictions:}}}
 514         \vspace{0.1cm}
 515         \begin{itemize}
 516             \item Contexts must be created by the \textbf{same API} (both OpenGL,
 517                 or both GLESv2, same driver).
 518             \item Contexts must be created by the \textbf{same
 519                 process}.(\textbf{=>
 520                 {\color{coolblack}{not
 521                 suitable for every project!}}})
 522         \end{itemize}
 523     \end{center}
 524 \end{frame}
 525
 526 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 527
 528 \begin{frame}[fragile,c]
 529     \frametitle{Could we use shared context in WebKit?}
 530
 531         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 532         \setbeamertemplate{itemize items}[triangle]
 533     \begin{center}
 534         \scriptsize{
 535             \textbf{\color{coolblack} Could we use shared context in WebKit?}\\
 536
 537             \vspace{0.2cm}
 538
 539             \textbf{Short answer:} Currently yes (with some workaround) but not in the
 540             future.
 541
 542             \vspace{0.3cm}
 543
 544             \begin{block}{Requirements to use shared context/textures in \textbf{WebKit}:}
 545                 \begin{itemize}
 546                     \item We should use the \textbf{ANGLE EGL/OpenGL backend in
 547                         WebGL2} to
 548                         match the main Graphics Pipeline API/driver (both contexts
 549                         should be OpenGL or GLESv2 and from the same driver!)
 550                     \item We'd need an \textbf{ANGLE extension} to allow passing
 551                         native shared context to ANGLE's eglCreateContext instead of
 552                         ANGLE shared context.
 553                     \item We should never move WebGL2 and Graphics Pipeline in
 554                         different processes. Shared contexts should be created by
 555                         the same process! (\textbf{Reason we've rejected this
 556                         method}).
 557                 \end{itemize}
 558             \end{block}
 559         }
 560
 561         \vspace{0.3cm}
 562
 563         \tiny{
 564             \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
 565             \texttt{EGL\_ANGLE\_native\_shared\_context}
 566
 567             \vspace{0.2cm}
 568
 569
 570             \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed
 571             to \texttt{\color{afblue}eglCreateContext}:\\
 572             \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}
 573
 574             \vspace{0.3cm}
 575             {\color{coolblack}
 576             This attribute indicates that the shared context in
 577             \texttt{\color{deepjunglegreen}eglCreateContext}
 578             is \textbf{not ANGLE} and should be used as native in the internal
 579             implementation.
 580             }
 581         }
 582     \end{center}
 583 \end{frame}
 584
 585 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 586 \begin{frame}[fragile,c]
 587     \frametitle{EGL\_ANGLE\_native\_shared\_context}
 588
 589         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 590     \setbeamertemplate{itemize items}[triangle]{\tiny}
 591     \setbeamercolor{block body}{bg=white}
 592
 593     \begin{center}
 594         \tiny{
 595             \begin{block}{This is how we create shared OpenGL
 596                 context using EGL (system or ANGLE):}
 597                 \centering
 598                 \begin{adjustbox}{max width=\textwidth}
 599                     \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
 600                 \end{adjustbox}
 601
 602                 \begin{comment}
 603                 {\color{coolblack}
 604                 \begin{table}[t]
 605                     \centering
 606                     \begin{adjustbox}{max width=\textwidth}
 607                         \begin{tabular}{l}
 608                             · In case of system EGL \texttt{ctx\_A} and
 609                             \texttt{ctx\_B} are native
 610                             EGL contexts.\\
 611                             · In case of ANGLE they are ANGLE EGL contexts.\\
 612                         \end{tabular}
 613                     \end{adjustbox}
 614                 \end{table}
 615                 }
 616                 \end{comment}
 617             \end{block}
 618         }
 619
 620         \tiny{
 621         \begin{block}{This is how we'd create shared
 622         OpenGL context between native EGL and ANGLE EGL using
 623             \texttt{EGL\_ANGLE\_native\_shared\_context}:}
 624
 625             \vspace{0.2cm}
 626             \begin{itemize}
 627                 \item \tiny{We'd pass the native EGL context (created by the native system
 628                     driver) as {\color{black}shared context} to the
 629                     native OpenGL context that is created {\color{black}in the ANGLE
 630                     OpenGL backend} using the native system driver!}
 631                 \item \tiny{We'd need use the {\color{black}new EGL attribute
 632                     (\texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE})} to let ANGLE know
 633                     that the shared context \textit{\color{coolblack}is not ANGLE but native}
 634                     context!}
 635             \end{itemize}
 636             \vspace{-0.2cm}
 637
 638         \begin{table}[t]
 639             \centering
 640             \begin{tabular}{l}
 641                 \begin{adjustbox}{max width=\textwidth}
 642                     \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
 643                 \end{adjustbox}
 644             \end{tabular}
 645         \end{table}
 646         \end{block}
 647     }
 648
 649
 650     \end{center}
 651 \end{frame}
 652
 653 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 654 \begin{frame}[fragile,c]
 655     \frametitle{Some work on the shared context approach}
 656         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 657     \setbeamertemplate{itemize items}[triangle]{\tiny}
 658     \setbeamercolor{block body}{bg=white}
 659
 660     \begin{center}
 661         \begin{block}{\tiny{Extension
 662             \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}:}}
 663             \vspace{0.2cm}
 664             \tiny{
 665                 \begin{table}[h]
 666                     \centering
 667                         Worked on the extension implementation (draft state, there are
 668                         bugs).\\
 669                     \begin{tabular}{l}
 670                         \\
 671                         \textbf{Concept:}\\
 672                         \begin{adjustbox}{max width=\textwidth}
 673                             \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
 674                         \end{adjustbox}\\
 675                     \end{tabular}
 676                 \end{table}
 677             }
 678         \end{block}
 679         \begin{block}{\tiny{Experimental programs (to test the extension and
 680             familiarize with the shared context concept):}}
 681             \begin{itemize}
 682                 \item A test program that uses EGL ctxA to create a texture and
 683                     EGL ctxB to display it on an X11 window.
 684                 \item The same program written in ANGLE (there were
 685                     differences!)
 686                 \item A test program that uses EGL ctxA to create a texture and
 687                     ANGLE EGL ctxB to display it on an X11 window.
 688                 \item Variations of the above:
 689                     \url{https://github.com/hikiko/shctx/branches}
 690             \end{itemize}
 691         \end{block}
 692     \end{center}
 693    \end{frame}
 694
 695 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 696    \begin{frame}
 697        \frametitle{Abandoned!}
 698        \begin{center}
 699            \textbf{\color{coolblack} Why not shared context?}
 700            \vspace{0.5cm}
 701
 702            {\footnotesize{
 703                \begin{itemize}
 704                    \item Shared context would be a nice and clean approach if we wanted to use
 705                        it with our current WebKit code.
 706                    \item But there is a plan to use \textbf{separate processes} for WebGL2 and
 707                                            the main graphics pipeline!! (Žan Doberšek)
 708                \end{itemize}
 709            }}
 710
 711            \vspace{0.5cm}
 712            \textbf{\color{coolblack} But there was a \textit{better} approach!}
 713        \end{center}
 714    \end{frame}
 715 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 716
 717 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 718 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 719 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 720 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 721
 722 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 723 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
 724 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 725
 726 \begin{frame}
 727     \frametitle{DMA buffers for the win!}
 728
 729     \begin{center}
 730                 \textbf{\color{coolblack}Fortunately we are on Linux!}
 731
 732                 \setbeamercolor{block body}{bg=white}
 733                 \setbeamercolor{block title}{bg=white, fg=coolblack}
 734                 \begin{block}{\scriptsize{There is a Linux kernel framework that can be used for
 735                         content sharing across different Linux drivers!}}
 736
 737                         \vspace{-0.1cm}
 738                         \begin{table}[t]
 739                                 \centering
 740                                 \begin{tabular}{l}
 741                                         \begin{adjustbox}{max width=\textwidth}
 742                                                 \adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
 743                                         \end{adjustbox}
 744                                 \end{tabular}
 745                         \end{table}
 746
 747                         \textbf{\scriptsize{\color{coolblack}A few things that need our attention:}}\\
 748                         \vspace{0.1cm}
 749
 750                         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 751                         \begin{itemize}
 752                                 \item There are {\color{coolblack}EGL and OpenGL/GLESv2
 753                                         extensions} to make this content sharing easier!
 754                                 \item It's {\color{coolblack}driver independent}!
 755                                 \item It works with {\color{coolblack}multiple processes}!
 756                                 \item As long as ANGLE can expose the required extensions to
 757                                         import a dma\_buf file descriptor this method is
 758                                         {\color{coolblack}"ANGLE backend
 759                                         independent"}!
 760                                 \item Works {\color{coolblack}only on Linux}... but in case of
 761                                         WPE we won't need to support other systems! (Žan Doberšek)
 762                         \end{itemize}
 763                 \end{block}
 764     \end{center}
 765 \end{frame}
 766
 767 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 768
 769 \begin{frame}
 770         \frametitle{Extensions and new approach}
 771
 772         \setbeamercolor{block body}{bg=white}
 773         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 774
 775         \begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
 776                 the WebGL texture data?}}
 777
 778                 \begin{center}
 779                         \begin{itemize}
 780                                 \item Each texture is backed by a Linux kernel dma\_buffer.
 781                                 \item Multiple textures can use the same dma buffer as backing
 782                                         storage if they meet some requirements.
 783                                 \item We can export the file descriptor of one buffer from one
 784                                         driver and use it to access the buffer from the other
 785                                         driver.
 786                                 \item So we can export the FD that corresponds to the compositor
 787                                         texture, import it in WebGL when we create the render target
 788                                         and when the WebGL texture is filled, the compositor texture
 789                                         will be also filled, as they share the backing storage!
 790                         \end{itemize}
 791                 \end{center}
 792         \end{block}
 793         \begin{block}{\scriptsize{EGL and GL extensions that can be used:}}
 794                 \begin{center}
 795                         \begin{itemize}
 796                                 \item
 797                                         \href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}:
 798                                         \\ This extension allows creating one or multiple Linux dma\_buf
 799                                         file descriptors from the EGLImage that corresponds to a texture.
 800                                 \item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}:
 801                                         \\ This extension allows creating an EGLImage (that will be used to create a
 802                                         texture) from one or multiple Linux dma\_buf file
 803                                         descriptors.
 804                                 \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}:
 805                                         \\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support
 806                                         format modifiers used for tiling, compression, and additional non-linear
 807                                         modes.
 808                                 \item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}:
 809                                         \\ This extension provides a mechanism for creating EGLImage texture targets
 810                                         from EGLImages.
 811                         \end{itemize}
 812                 \end{center}
 813         \end{block}
 814 \end{frame}
 815
 816 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 817
 818 \begin{frame}
 819         \frametitle{Example:}
 820
 821         \setbeamercolor{block body}{bg=white}{\scriptsize}
 822         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 823
 824         \begin{block}{\scriptsize{I've written an example:}}
 825                 \begin{center}
 826                         \begin{itemize}
 827                                 \item First using EGL!\\
 828                                         Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
 829                                         Code: \url{https://gistof.com/dma-egl-version}
 830                                 \item Then using a native EGL context and a context from ANGLE!\\
 831                                         Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
 832                                         Code: \url{https://gistof.com/dmaangleeglversion}
 833                         \end{itemize}
 834                 \end{center}
 835         \end{block}
 836         \vspace{-0.3cm}
 837         \begin{block}{\scriptsize{Snippet from the exporter:}}
 838                 \vspace{-0.1cm}
 839                 \tiny{
 840                 \begin{table}[t]
 841                         \centering
 842                         \begin{tabular}{l}
 843                                 {\color{coolblack}Exporting a dma buffer from a texture
 844                                 \texttt{texA}:}\\
 845                                 \begin{adjustbox}{max width=\textwidth}
 846                                         \adjustbox{valign=t}{\includegraphics[height=4cm]{data/dma_export_and_struct.png}}
 847                                 \end{adjustbox}\\
 848                         \end{tabular}
 849                 \end{table}
 850                 }
 851         \end{block}
 852 \end{frame}
 853
 854 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 855
 856 \begin{frame}
 857         \frametitle{Example continued}
 858         \setbeamercolor{block body}{bg=white}{\scriptsize}
 859         \setbeamertemplate{itemize/enumerate body begin}{\tiny}
 860
 861         \begin{block}{\scriptsize{Snippets from the importer:}}
 862                 \vspace{-0.1cm}
 863                 \tiny{
 864                 \begin{table}[t]
 865                         \centering
 866                         \begin{tabular}{l}
 867                                 {\color{coolblack}Creating an EGLImage from the dma buffer using
 868                                 the exported fd and the exported modifiers:}\\
 869                                 \\
 870                                 \begin{adjustbox}{max width=\textwidth}
 871                                         \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
 872                                 \end{adjustbox}\\
 873 \\
 874 \\
 875                                 {\color{coolblack}Creating a texture using that external
 876                                 EGLImage:}\\
 877                                 \\
 878                                 \begin{adjustbox}{max width=\textwidth}
 879                                         \adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
 880                                 \end{adjustbox}\\
 881                         \end{tabular}
 882                 \end{table}
 883                 }
 884         \end{block}
 885 \end{frame}
 886
 887 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 888 \begin{frame}
 889         \frametitle{Test program}
 890
 891         \begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
 892                 EGL}}
 893                 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 894                 \begin{itemize}
 895                         \itemsep0.3cm
 896                         \itemsep0.2cm
 897                         \item First context is EGL/OpenGL like the one in main graphics
 898                                 pipeline.
 899                         \item Second is ANGLE with EGL/GLESv2 backend like the one in
 900                                 WebGL2.
 901                         \item EGL/OpenGL context creates an empty texture and exports the dma\_buf
 902                                 fd and all other information about the buffer.
 903                         \item ANGLE context creates another empty texture using the same
 904                                 dma\_buf and the import mechanism.
 905                         \item ANGLE context fills the emty ANGLE texture.
 906                         \item EGL/OpenGL context displays the previously empty OpenGL/EGL
 907                                 texture.
 908                         \item EGL/OpenGL texture contains what ANGLE texture had.
 909                         \item \textbf{We shared the ANGLE data without copying them!}
 910                 \end{itemize}
 911
 912         \end{block}
 913         \vspace{0.2cm}
 914         \scriptsize{
 915                 \begin{center}
 916                         \textbf{\color{coolblack}Check the blog posts for more details!}
 917                 \end{center}
 918                 }
 919 \end{frame}
 920 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 921
 922 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 923 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 924 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 925 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 926 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 927
 928 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 929 \section[Multiple Processes]{Multiple Processes}
 930 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 931
 932 \begin{frame}[fragile,c]
 933     \frametitle{What if WebGL and Graphics pipeline were separate processes?}
 934         \setbeamertemplate{blocks}[rounded]
 935
 936 \vspace{0.3cm}
 937     \center{
 938         \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
 939     pipeline in two processes. (Žan Doberšek)}}}
 940
 941 \vspace{0.5cm}
 942         \begin{block}{Can we still use shared DMA buffers?}
 943         \footnotesize{
 944
 945     \begin{itemize}
 946        \itemsep0.3cm
 947        \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
 948               multiple processes.}
 949                   \item {\color{coolblack} But we need some sort of \textbf{\textit{interprocess
 950                           communication}} to exchange the file descriptor.}
 951                   \item {\color{coolblack} This is a client-server
 952                           \textbf{\textit{example}} that uses unix
 953             sockets to pass the dma-buf FD from one process to the other:
 954                         \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.}
 955             \end{itemize}
 956
 957         }
 958     \end{block}
 959 \vspace{0.3cm}
 960 \end{frame}
 961
 962 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 963
 964 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 965 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 966 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 967 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 968 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 969
 970 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 971 \section[WebKit Integration]{WebKit Integration}
 972 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 973
 974 \begin{frame}[fragile,c]
 975     \frametitle{WIP WebKit:}
 976         \center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}
 977
 978         \vspace{0.1cm}
 979         \begin{center}
 980                 \setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
 981                 \setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
 982                         \begin{itemize}
 983                                 \itemsep0.2cm
 984                                 \item The extensions to import dma-buf buffers in ANGLE are
 985                                         implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline
 986                                         DMA buf when we create the render target!}
 987                                 \item The extension to export dma-buf buffers from EGL is
 988                                         supported on mesa => {\color{coolblack}we could run a check before creating
 989                                         the shared dma buffer and use either use it or fallback to
 990                                         something else (libgbm? copying?)}
 991                         \end{itemize}
 992         \end{center}
 993         \vspace{0.05cm}
 994         {\scriptsize{
 995         \begin{block}{DONE/WIP/TODO}
 996             \begin{itemize}
 997                 \item{Use the right CMake options (one can't simply enable
 998                     \texttt{USE\_ANGLE\_WEBGL}!):
 999                     \color{coolblack}{\textbf{FIXED }}}
1000                 \item{There were compile errors when ANGLE was used:
1001                     \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
1002                 \item{Link errors when ANGLE is used:
1003                     \color{coolblack}{\textbf{WIP/Partially FIXED}}}
1004                 \item{Copy replacement: \color{coolblack}{\textbf{WIP/TODO}}}
1005             \end{itemize}
1006         \end{block}
1007         }}
1008
1009 \end{frame}
1010
1011 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1012
1013 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1014 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1015 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1016 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1017 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1018
1019 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1020 \section[References]{References}
1021 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1022 %\setbeamertemplate{bibliography entry title}{}
1023 %\setbeamertemplate{bibliography entry location}{}
1024 %\setbeamertemplate{bibliography entry note}{}
1025 \setbeamerfont{bibliography item}{size=\footnotesize}
1026 \setbeamerfont{bibliography entry author}{size=\footnotesize}
1027 \setbeamerfont{bibliography entry title}{size=\footnotesize}
1028 \setbeamerfont{bibliography entry year}{size=\footnotesize}
1029 \setbeamerfont{bibliography entry note}{size=\footnotesize}
1030
1031 \begin{frame}[allowframebreaks]
1032         \frametitle{Links}
1033         \bibliographystyle{unsrt}
1034         \bibliography{bib/references.bib}
1035         \nocite{*}
1036 \end{frame}
1037
1038 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1039 \end{document}
1040 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%