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.46, 0.64, 0.76}
  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.73, 0.2, 0.52}
  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 between 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}
 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}{\footnotesize}
 177         \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
 178         \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
 179         \setbeamertemplate{itemize items}[triangle]
 180         \setbeamertemplate{blocks}[rounded][shadow]
 181
 182     \begin{block}{\color{afblue}{\footnotesize\textbf{EGL/GLESv2}:}}
 183                 \begin{itemize}
 184             \item GLESv2 is used to render graphics using the GPU (graphics
 185                 API).
 186             \item EGL is used to create a GLESv2 context.
 187         \end{itemize}
 188         \end{block}
 189
 190
 191     \begin{block}{\color{afblue}{\footnotesize\textbf{ANGLE EGL/GLESv2}:}}
 192                 \begin{itemize}
 193             \item GLESv2 is implemented on top of other APIs (OpenGL,
 194                 Vulkan, GLESv2). EGL too (EGL, GLX, gbm, headless display).
 195             \item Users can select the most convenient backend using some
 196                 \textit{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that
 197                 provide extra attributes to some standard EGL API stucts.
 198             \item Primary purpose of ANGLE is to provide EGL/GLESv2 to systems
 199                 lacking it.
 200         \end{itemize}
 201         \end{block}
 202
 203         \vspace{0.2cm}
 204 \end{frame}
 205
 206 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 207
 208 \begin{frame}[fragile,c]
 209     \frametitle{Using ANGLE in WebKit}
 210
 211     \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
 212         \vspace{0.2cm}
 213
 214         \setbeamertemplate{itemize/enumerate body begin}{\footnotesize}
 215         \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
 216         \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
 217         \setbeamertemplate{itemize items}[triangle]
 218         \setbeamertemplate{blocks}[rounded][shadow]
 219
 220
 221     \begin{block}{\color{afblue}{\footnotesize\textbf{Reasons}:}}
 222                 \begin{itemize}
 223             \item better performance (Žan Doberšek)
 224             \item it'll be mostly a wrapper around the native driver (Linux mesa
 225                 drivers implement GLESv2, Linux desktop provides libGLES*)
 226         \end{itemize}
 227         \end{block}
 228     \begin{block}{\color{afblue}{\footnotesize\textbf{Problem}:}}
 229                 \begin{itemize}
 230             \item ANGLE renders on a GLESv2 texture created by ANGLE context
 231             \item WebKit graphics pipeline components use OpenGL textures that
 232                 are composited by the WebKit compositor
 233             \item We are currently \textbf{\textit{copying}} the ANGLE texture data to
 234                 an OpenGL texture to assemble the final image and this is
 235                 \textbf{\textit{slow}}!
 236         \end{itemize}
 237         \end{block}
 238
 239     \center{\textbf{\color{coolblack}{We need to replace this copy with
 240     something better!}}}
 241
 242         \vspace{0.2cm}
 243 \end{frame}
 244
 245 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 246
 247 \begin{frame}[fragile,c]
 248     \frametitle{Experiments on Linux}
 249
 250     \vspace{0.3cm}
 251     {\footnotesize{
 252         \begin{enumerate}
 253         \itemsep0.3cm
 254         \item {\color{coolblack}\textbf{Use ANGLE and EGL in the same program:
 255             create 2 X11 windows, and draw 2 images from 2 different contexts
 256                 by 2 different drivers.}
 257
 258                 \tiny{{(In several cases ANGLE behaves
 259                 different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
 260                 call \texttt{eglMakeCurrent}!!).}}
 261                 }
 262             \item {\color{coolblack}\textbf{Fix the problem with shared
 263                 context and shared textures.}
 264
 265                 \tiny{{(required
 266                 modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
 267                 EGL/OpenGL backend, and it wouldn't work with multiple
 268                 processes)}}
 269                 }
 270             \item {\color{coolblack}\textbf{Fix the problem by sharing a Linux kernel
 271                 dma-buf buffer across drivers.}
 272
 273                 \tiny{{(drivers must support some EGL/GL extensions, but both mesa and
 274                 ANGLE support them)}}
 275                 }
 276             \item {\color{coolblack}\textbf{Solve the multiple processes case.}
 277
 278                 \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
 279                 }
 280         \end{enumerate}
 281     }}
 282 \end{frame}
 283
 284 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 285
 286
 287 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 288 \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
 289 program}
 290 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 291
 292 \begin{frame}[fragile,c]
 293     \frametitle{Step 1: Setting up to debug ANGLE with GDB}
 294     \begin{center}
 295     \end{center}
 296 \end{frame}
 297
 298 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 299
 300 \begin{frame}[fragile,c]
 301     \frametitle{Step 2: Contexts from two drivers in the same
 302     program}
 303     \begin{center}
 304     \end{center}
 305 \end{frame}
 306
 307 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 308 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 309 \section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
 310 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 311
 312 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 313 \section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
 314 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 315
 316 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 317 \section[Multiple Processes]{Multiple Processes}
 318 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 319
 320 \begin{frame}[fragile,c]
 321     \frametitle{What if WebGL and Graphics pipeline were separate processes?}
 322         \setbeamertemplate{blocks}[rounded]
 323
 324 \vspace{0.3cm}
 325     \center{
 326         \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
 327     pipeline in two processes. (Žan Doberšek)}}}
 328
 329 \vspace{0.5cm}
 330         \begin{block}{Can we still use shared DMA buffers?}
 331         \footnotesize{
 332
 333     \begin{itemize}
 334        \itemsep0.3cm
 335        \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
 336               multiple processes.}
 337         \item {\color{coolblack} But we need some sort of \textit{interprocess
 338             communication} to exchange the file descriptor.}
 339         \item {\color{coolblack} This is a client-server example that uses unix
 340             sockets to pass the dma-buf FD from one process to the other:
 341             \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}. It could
 342             be adapted to our needs when we switch to multiple processes.}
 343             \end{itemize}
 344
 345         }
 346     \end{block}
 347
 348 \vspace{0.3cm}
 349 \end{frame}
 350
 351 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 352 \section[WebKit Integration]{WebKit Integration}
 353 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 354
 355 \begin{frame}[fragile,c]
 356     \frametitle{WIP WebKit:}
 357         \setbeamertemplate{blocks}[rounded]
 358         \center{
 359                 \normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}
 360                 }
 361
 362         \vspace{0.3cm}
 363
 364     \small{\color{deepjunglegreen}{Building WebKit with ANGLE on Linux was problematic.\\
 365     Before starting the task some other fixes were necessary:}}
 366
 367         \vspace{0.3cm}
 368
 369         \begin{block}{DONE/WIP/TODO}
 370                 \footnotesize{
 371             \begin{itemize}
 372                 \item{Use the right CMake options (one can't simply enable
 373                     \texttt{USE\_ANGLE\_WEBGL} ☺):
 374                     \color{coolblack}{\textbf{FIXED }}}
 375                 \item{Compile errors when ANGLE is used:
 376                     \color{coolblack}{\textbf{FIXED}}}
 377                 \item{Link errors when ANGLE is used:
 378                     \color{coolblack}{\textbf{WIP/Partially FIXED}}}
 379                 \item{Copy replacement: \color{coolblack}{\textbf{TODO}}}
 380             \end{itemize}
 381                         }
 382         \end{block}
 383 \end{frame}
 384
 385 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 386 \section[References]{References}
 387 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 388 %\setbeamertemplate{bibliography entry title}{}
 389 %\setbeamertemplate{bibliography entry location}{}
 390 %\setbeamertemplate{bibliography entry note}{}
 391 \setbeamerfont{bibliography item}{size=\footnotesize}
 392 \setbeamerfont{bibliography entry author}{size=\footnotesize}
 393 \setbeamerfont{bibliography entry title}{size=\footnotesize}
 394 \setbeamerfont{bibliography entry year}{size=\footnotesize}
 395 \setbeamerfont{bibliography entry note}{size=\footnotesize}
 396
 397 \begin{frame}[allowframebreaks]
 398         \frametitle{Links}
 399         \bibliographystyle{unsrt}
 400         \bibliography{bib/references.bib}
 401         \nocite{*}
 402 \end{frame}
 403
 404 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 405 \end{document}
 406 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%