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