--- /dev/null
+\documentclass[usenames,dvipsnames]{beamer}
+\usepackage[font=small,skip=-1pt]{caption}
+\usepackage{xcolor}
+\usepackage{color, colortbl}
+\usepackage{caption}
+\usepackage{listings}
+\usepackage{graphicx}
+\usepackage{hyperref}
+\usepackage{comment}
+\usepackage{textpos}
+\usepackage{tgpagella}
+\usepackage[utf8]{inputenc}
+\usepackage{fontspec}
+\usepackage{tabularx, array, booktabs}
+\usepackage{cite}
+\usepackage{verbatim}
+\usepackage{comment}
+\usepackage{adjustbox}
+
+\newcommand\topalign[1]{%
+ \setbox0\hbox{#1}%
+ \raisebox{\dimexpr-\ht0+\dp0\relax}{\usebox0}}
+
+\definecolor{blond}{rgb}{0.98, 0.94, 0.75}
+\definecolor{beige}{rgb}{0.96, 0.96, 0.86}
+\definecolor{mGreen}{rgb}{0,0.6,0}
+\definecolor{mGray}{rgb}{0.5,0.5,0.5}
+\definecolor{mPurple}{rgb}{0.58,0,0.82}
+\definecolor{bgcolor}{rgb}{0.8,0.8,0.8}
+\definecolor{afblue}{rgb}{0.46, 0.64, 0.76}
+\definecolor{coolblack}{rgb}{0.0, 0.18, 0.39}
+\definecolor{paleaqua}{rgb}{0.74, 0.83, 0.9}
+\definecolor{platinum}{rgb}{0.9, 0.89, 0.89}
+\definecolor{whitesmoke}{rgb}{0.96, 0.96, 0.96}
+\definecolor{carolinablue}{rgb}{0.6, 0.73, 0.89}
+\definecolor{amber}{rgb}{1.0, 0.75, 0.0}
+\definecolor{deepjunglegreen}{rgb}{0.0, 0.29, 0.29}
+\definecolor{mediumred-violet}{rgb}{0.73, 0.2, 0.52}
+\definecolor{babypink}{rgb}{0.96, 0.76, 0.76}
+\definecolor{beaublue}{rgb}{0.74, 0.83, 0.9}
+\definecolor{bananayellow}{rgb}{1.0, 0.88, 0.21}
+\definecolor{bananamania}{rgb}{0.98, 0.91, 0.81}
+\definecolor{crimsonglory}{rgb}{0.75, 0.0, 0.2}
+
+\lstdefinestyle{CStyle}{
+ language=C++, % choose the language of the code
+% basicstyle=\footnotesize, % the size of the fonts that are used for the code
+ basicstyle=\tt\color{afblue},
+ breakatwhitespace=false,
+ breaklines=true,
+ backgroundcolor=\color{bgcolor}, % choose the background color. You must add \usepackage{color}
+ showspaces=false, % show spaces adding particular underscores
+ showstringspaces=false, % underline spaces within strings
+ showtabs=false, % show tabs within strings adding particular underscores
+ frame=single, % adds a frame around the code
+ tabsize=2, % sets default tabsize to 2 spaces
+ captionpos=b, % sets the caption-position to bottom
+ breaklines=true, % sets automatic line breaking
+ breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
+ commentstyle=\color{mGreen},
+ keywordstyle=\color{magenta},
+ stringstyle=\color{mPurple},
+ rulesepcolor=\color{gray},
+ rulecolor=\color{black},
+}
+
+\setmainfont{Noto Sans} % substitute with any font that exists on your system
+\setsansfont{Noto Sans} % substitute with any font that exists on your system
+\setmonofont{Noto Sans Mono Medium} % substitute with any font that exists on your system
+
+\usetheme{Warsaw}
+\useoutertheme{infolines}
+\usecolortheme{crane}
+
+\captionsetup[figure]{labelformat=empty}
+
+\addtobeamertemplate{headline}{}{\vskip2pt}
+\addtobeamertemplate{headline}{}{%
+ \begin{textblock*}{5mm}(.9\textwidth,-0.6cm)
+ \includegraphics[height=0.67cm]{data/igalia-logo.png}
+\end{textblock*}}
+
+\definecolor{links}{rgb}{0.1, 0.3, 0.6}
+\hypersetup{colorlinks,linkcolor=,urlcolor=links}
+
+\pgfdeclareimage[height=\paperheight]{igaliabglight}{data/igalia_bg_light.eps}
+\pgfdeclareimage[height=\paperheight]{igaliabg}{data/igaliabg.eps}
+
+%\setbeamertemplate{title page}{
+% \begin{picture}(-90, 180)
+% \put(-200, -74){%
+% \pgfuseimage{igaliabg}
+% }
+%
+% \put(55,19){%
+% \begin{minipage}[b][36mm][t]{240mm}
+% \usebeamerfont{title}{\inserttitle\par}
+% \usebeamerfont{author}{\insertauthor\par}
+% \usebeamerfont{title}{\insertinstitute\par}
+% \end{minipage}
+% }
+% \end{picture}
+%}
+
+\setbeamertemplate{navigation symbols}{}
+\setbeamertemplate{title page}{
+ \begin{picture}(0,0)
+ \put(-30,-164){%
+ \pgfuseimage{igaliabg}
+ }
+
+ \put(0,-110.7){%
+ \begin{minipage}[b][38mm][t]{220mm}
+ \usebeamerfont{title}{\inserttitle\par}
+ \usebeamerfont{author}{\insertauthor\par}
+ \end{minipage}
+ }
+
+ \put(240, -138){
+ \usebeamerfont{date}{\huge{{\insertdate}}\par}
+ }
+ \end{picture}
+}
+
+\setbeamertemplate{itemize items}[triangle]
+\setbeamertemplate{itemize subitem}[circle]
+\setbeamerfont{frametitle}{size=\small}
+
+\setbeamertemplate{blocks}[default]
+\setbeamercolor{block title}{fg=amber,bg=black}
+
+\title{\textbf{Sharing texture data between drivers}}
+\author[Eleni Maria Stea <estea@igalia.com>]{\small{Eleni Maria Stea
+<estea@igalia.com>}\\\\\includegraphics{data/igalia.eps}}
+\date{\tiny{WebKit Codecamp}}
+
+\AtBeginSection[]
+{
+ \begin{frame}
+ \frametitle{Outline}
+ \tableofcontents[currentsection]
+ \end{frame}
+}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\begin{document}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[plain]
+\titlepage
+\end{frame}
+
+\begin{frame}
+ \frametitle{Outline}
+ \tableofcontents
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{comment}
+\begin{frame}[fragile,c]
+ \frametitle{}
+ \begin{center}
+ \end{center}
+\end{frame}
+\end{comment}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[Introduction]{Introduction: Using ANGLE in WebGL2}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{A few words about ANGLE}
+ \center{\textbf{\color{coolblack}{ANGLE is an EGL/GLESv2 implementation}}}
+
+ \setbeamertemplate{itemize/enumerate body begin}{\footnotesize}
+ \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
+ \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
+ \setbeamertemplate{itemize items}[triangle]
+ \setbeamertemplate{blocks}[rounded][shadow]
+
+ \begin{block}{\color{afblue}{\footnotesize\textbf{EGL/GLESv2}:}}
+ \begin{itemize}
+ \item GLESv2 is used to render graphics using the GPU (graphics
+ API).
+ \item EGL is used to create a GLESv2 context.
+ \end{itemize}
+ \end{block}
+
+
+ \begin{block}{\color{afblue}{\footnotesize\textbf{ANGLE EGL/GLESv2}:}}
+ \begin{itemize}
+ \item GLESv2 is implemented on top of other APIs (OpenGL,
+ Vulkan, GLESv2). EGL too (EGL, GLX, gbm, headless display).
+ \item Users can select the most convenient backend using some
+ \textit{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that
+ provide extra attributes to some standard EGL API stucts.
+ \item Primary purpose of ANGLE is to provide EGL/GLESv2 to systems
+ lacking it.
+ \end{itemize}
+ \end{block}
+
+ \vspace{0.2cm}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{Using ANGLE in WebKit}
+
+ \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}}
+ \vspace{0.2cm}
+
+ \setbeamertemplate{itemize/enumerate body begin}{\footnotesize}
+ \setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
+ \setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
+ \setbeamertemplate{itemize items}[triangle]
+ \setbeamertemplate{blocks}[rounded][shadow]
+
+
+ \begin{block}{\color{afblue}{\footnotesize\textbf{Reasons}:}}
+ \begin{itemize}
+ \item better performance (Žan Doberšek)
+ \item it'll be mostly a wrapper around the native driver (Linux mesa
+ drivers implement GLESv2, Linux desktop provides libGLES*)
+ \end{itemize}
+ \end{block}
+ \begin{block}{\color{afblue}{\footnotesize\textbf{Problem}:}}
+ \begin{itemize}
+ \item ANGLE renders on a GLESv2 texture created by ANGLE context
+ \item WebKit graphics pipeline components use OpenGL textures that
+ are composited by the WebKit compositor
+ \item We are currently \textbf{\textit{copying}} the ANGLE texture data to
+ an OpenGL texture to assemble the final image and this is
+ \textbf{\textit{slow}}!
+ \end{itemize}
+ \end{block}
+
+ \center{\textbf{\color{coolblack}{We need to replace this copy with
+ something better!}}}
+
+ \vspace{0.2cm}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{Experiments on Linux}
+
+ \vspace{0.3cm}
+ {\footnotesize{
+ \begin{enumerate}
+ \itemsep0.3cm
+ \item {\color{coolblack}\textbf{Use ANGLE and EGL in the same program:
+ create 2 X11 windows, and draw 2 images from 2 different contexts
+ by 2 different drivers.}
+
+ \tiny{{(In several cases ANGLE behaves
+ different from EGL: e.g. when \texttt{eglMakeCurrent} doesn't
+ call \texttt{eglMakeCurrent}!!).}}
+ }
+ \item {\color{coolblack}\textbf{Fix the problem with shared
+ context and shared textures.}
+
+ \tiny{{(required
+ modifications in ANGLE OpenGL driver, writing an ANGLE extension, forcing the
+ EGL/OpenGL backend, and it wouldn't work with multiple
+ processes)}}
+ }
+ \item {\color{coolblack}\textbf{Fix the problem by sharing a Linux kernel
+ dma-buf buffer across drivers.}
+
+ \tiny{{(drivers must support some EGL/GL extensions, but both mesa and
+ ANGLE support them)}}
+ }
+ \item {\color{coolblack}\textbf{Solve the multiple processes case.}
+
+ \tiny{{(we need some sort of IPC to exchange the dma-buf FD)}}
+ }
+ \end{enumerate}
+ }}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same
+program}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{Step 1: Setting up to debug ANGLE with GDB}
+ \begin{center}
+ \end{center}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{Step 2: Contexts from two drivers in the same
+ program}
+ \begin{center}
+ \end{center}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[Multiple Processes]{Multiple Processes}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{What if WebGL and Graphics pipeline were separate processes?}
+ \setbeamertemplate{blocks}[rounded]
+
+\vspace{0.3cm}
+ \center{
+ \textbf{\small{There is a plan to split the main graphics pipeline and the WebGL2
+ pipeline in two processes. (Žan Doberšek)}}}
+
+\vspace{0.5cm}
+ \begin{block}{Can we still use shared DMA buffers?}
+ \footnotesize{
+
+ \begin{itemize}
+ \itemsep0.3cm
+ \item {\color{coolblack} \textbf{YES!} DMA buffers can be shared across
+ multiple processes.}
+ \item {\color{coolblack} But we need some sort of \textit{interprocess
+ communication} to exchange the file descriptor.}
+ \item {\color{coolblack} This is a client-server example that uses unix
+ sockets to pass the dma-buf FD from one process to the other:
+ \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}. It could
+ be adapted to our needs when we switch to multiple processes.}
+ \end{itemize}
+
+ }
+ \end{block}
+
+\vspace{0.3cm}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[WebKit Integration]{WebKit Integration}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+\begin{frame}[fragile,c]
+ \frametitle{WIP WebKit:}
+ \setbeamertemplate{blocks}[rounded]
+ \center{
+ \normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}
+ }
+
+ \vspace{0.3cm}
+
+ \small{\color{deepjunglegreen}{Building WebKit with ANGLE on Linux was problematic.\\
+ Before starting the task some other fixes were necessary:}}
+
+ \vspace{0.3cm}
+
+ \begin{block}{DONE/WIP/TODO}
+ \footnotesize{
+ \begin{itemize}
+ \item{Use the right CMake options (one can't simply enable
+ \texttt{USE\_ANGLE\_WEBGL} ☺):
+ \color{coolblack}{\textbf{FIXED }}}
+ \item{Compile errors when ANGLE is used:
+ \color{coolblack}{\textbf{FIXED}}}
+ \item{Link errors when ANGLE is used:
+ \color{coolblack}{\textbf{WIP/Partially FIXED}}}
+ \item{Copy replacement: \color{coolblack}{\textbf{TODO}}}
+ \end{itemize}
+ }
+ \end{block}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\section[References]{References}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%\setbeamertemplate{bibliography entry title}{}
+%\setbeamertemplate{bibliography entry location}{}
+%\setbeamertemplate{bibliography entry note}{}
+\setbeamerfont{bibliography item}{size=\footnotesize}
+\setbeamerfont{bibliography entry author}{size=\footnotesize}
+\setbeamerfont{bibliography entry title}{size=\footnotesize}
+\setbeamerfont{bibliography entry year}{size=\footnotesize}
+\setbeamerfont{bibliography entry note}{size=\footnotesize}
+
+\begin{frame}[allowframebreaks]
+ \frametitle{Links}
+ \bibliographystyle{unsrt}
+ \bibliography{bib/references.bib}
+ \nocite{*}
+\end{frame}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+\end{document}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
projects / webkit_codecamp / commitdiff