\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.36, 0.54, 0.66}
\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.63, 0.1, 0.42}
\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 across EGL 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 (WebKit)}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\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}{\scriptsize}
	\setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
	\setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
	\setbeamertemplate{itemize items}[triangle]
    \setbeamertemplate{blocks}[rounded]

	\vspace{0.3cm}
    \begin{block}{\color{afblue}{\scriptsize\textbf{EGL/GLESv2}:}}
		\begin{itemize}
			\itemsep0.2cm
            \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}
	\vspace{0.3cm}

    \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}}
		\begin{itemize}
			\itemsep0.2cm
			\item GLESv2 is implemented \textbf{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 
                \textbf{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that
                provide extra attributes to some standard EGL API stucts.
			\item Primary \textbf{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}{\scriptsize}
	\setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
	\setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
	\setbeamertemplate{itemize items}[triangle]
	\setbeamertemplate{blocks}[rounded]

	\vspace{0.1cm}

    \begin{block}{\color{afblue}{\scriptsize\textbf{Reasons}:}}
		\begin{itemize}
            \item better performance in some cases (Žan Doberšek)
            \item it'll be mostly an optimized wrapper around the native driver (libGLES*
				is available on Linux desktop!)
        \end{itemize}
	\end{block}
	\vspace{0.3cm}
    \begin{block}{\color{afblue}{\scriptsize\textbf{Problem}:}}
		\begin{itemize}
			\item \textbf{ANGLE} renders on a \textbf{GLESv2 texture} created by ANGLE context
			\item {\color{coolblack}WebKit \textbf{graphics pipeline} components use
				\textbf{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}

	\vspace{0.1cm}

    \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}

	\vspace{0.2cm}

    \begin{center}
		\scriptsize{
		I've ran my experiments using test programs and ANGLE,\\
		and I had to modify the default set up to step into ANGLE calls with GDB:
		}
    \end{center}

	\vspace{0.1cm}

	\setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
	\begin{block}{\scriptsize{Things that need attention when building ANGLE for
        debugging:}}\scriptsize{
            \vspace{0.2cm}
		\begin{itemize}
			\itemsep0.1cm
				\color{coolblack}
			\item {{Default \textbf{gn} configuration redirects debugging
				symbols into separate files where GDB can't find them.}}
			\item {\textbf{GDB} doesn't know where to find the ANGLE
				installation directories.}
			\item {{\textbf{dwarf5} is not fully implemented on GDB, and so it's
				impossible to step without errors when it's enabled.}}
			\item {\textbf{Debugging symbols} aren't enabled by default.}
		\end{itemize}}
	\vspace{0.2cm}
	\end{block}

	\vspace{0.3cm}

	\scriptsize{
		\setbeamertemplate{itemize item}[circle]
	\begin{itemize}
		\item {\textbf{Blog post} on how to set up
			{\color{black}{ANGLE}} and {\color{black}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
		\item {\textbf{Gist} with the {\color{black}{GN args}}
			I've used: \url{https://gistof.com/gnargs}}
	\end{itemize}}
	\vspace{0.2cm}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}[fragile,c]
    \frametitle{Step 2: Contexts from two drivers in the same
    program 1/2}

	\setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
	\setbeamertemplate{itemize/enumerate subbody begin}{\tiny}
	\setbeamertemplate{itemize/enumerate subsubbody begin}{\tiny}
	\setbeamertemplate{itemize items}[triangle]

	\begin{center}
	\textbf{\color{coolblack}First Test}
	\end{center}
	\vspace{-0.1cm}
	\scriptsize{\color{coolblack}
	I've first written a program where both ANGLE and native system driver render
	images on two different X11 windows and displayed them side by side:
	}
	\vspace{-0.1cm}
	\begin{center}
	\adjustbox{valign=t, margin=1ex,
	padding=1ex}{\includegraphics[height=1.5cm]{data/angle_egl.png}}
	\end{center}
	\vspace{-0.1cm}
	\begin{block}{\footnotesize{Some parts that needed attention:}}
	\begin{itemize}
		\item {Set ANGLE \textbf{library paths} in Makefile and link
			with native system EGL.}
		\item {\textbf{Dynamically open} ANGLE EGL and load its functions prefixed with
			\texttt{angle\_} to distinguish them from native EGL ones.}
		\item {Do the same for GLESv2.}
		\item {\textbf{Invalidate the ANGLE context} at every display call.\\
			(\textit{When ANGLE is not the only
			implementation available \texttt{MakeCurrent} is not working as
			expected!!!})}
	\end{itemize}
	\end{block}
\end{frame}

\begin{frame}[fragile,c]
    \frametitle{Step 2: Contexts from two drivers in the same
    program 2/2}
	\vspace{0.1cm}
	\begin{center}
		\textbf{\color{coolblack}Why invalidate the ANGLE context before MakeCurrent?}
		\\
		\begin{table}[c]
			\begin{tabularx}{\textwidth}{l X}
				\tiny{\textbf{\color{mediumred-violet}Context is cached in ANGLE!}} &
				\adjustbox{valign=c, margin=0.1ex,
				padding=0.1ex}{\includegraphics[height=2cm]{data/makecurrent.png}} \\
			\end{tabularx}
		\end{table}
	\end{center}

	\vspace{-0.1cm}
	\begin{center}
		\textbf{\color{coolblack}More on Makefile changes and dynamic loading:}
	\end{center}

	\setbeamertemplate{itemize/enumerate body begin}{\tiny}
	\setbeamertemplate{itemize items}[circle]
	
	\tiny{
        \textbf{\texttt{\color{black}{Blog post:}}}
        {Sharing texture data between ANGLE and the native system driver:\\
        \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}}\\
        \vspace{0.1cm}
        \begin{itemize}
            \itemsep0.1cm
            \item 
                {\color{black}Step 1: Using
                both libraries in the same program.}
            \item 
                {\color{black}{About ANGLE MakeCurrent.}}
        \end{itemize}

        \vspace{0.3cm}

        \color{black}{\textbf{\texttt{Code:}}}
        {\url{https://github.com/hikiko/shctx/tree/wip/system\_egl\_dynamic\_angle}}

	}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section[Experiment 2]{Experiment 2: Sharing a texture across drivers using shared context}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}[fragile,c]
    \frametitle{Shared Context}
    \begin{center}
        \scriptsize{
            \textbf{\color{coolblack}{A texture can be accessed by multiple OpenGL or
            GLESv2 contexts when these contexts are \textit{shared}:}}
        }
        \vspace{0.001cm}
        \texttt{
            \begin{table}[h]
                \centering
                \begin{adjustbox}{max width=\textwidth}
                    \begin{tabular}{|l|}
                        \hline
                        \rowcolor{platinum}
                        \\
                        \rowcolor{platinum}
                        \textbf{new\_ctx} = {\color{mediumred-violet}eglCreateContext}(new\_ctx\_dpy, new\_ctx\_config,
                        \textbf{native\_ctx}, new\_ctx\_attrib);\\
                        \rowcolor{platinum}\\
                        \hline
                    \end{tabular}
                \end{adjustbox}
            \end{table}
        }

        \vspace{0.1cm}
        \scriptsize{
            \textbf{\color{coolblack}{A texture generated by each context can be bound and used by the
            other\\ without ever leaving the GPU!}}
        }
        \vspace{0.01cm}

        \tiny{
            \texttt{
                \begin{table}[h]
                    \centering
                    \begin{adjustbox}{max width=\textwidth}
                        \begin{tabular}{|l|}
                            \rowcolor{platinum}
                            \hline
                            \rowcolor{platinum}
                            \\
                            \rowcolor{platinum}
                        glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
                            \rowcolor{platinum}
                        {\color{darkgray}/* ... gl operations ... */}\\
                            \rowcolor{platinum}
                        \\
                            \rowcolor{platinum}
                        angle\_glBindTexture({\color{mediumred-violet}GL\_TEXTURE\_2D}, \textbf{\color{afblue}gl\_shared\_tex});\\
                            \rowcolor{platinum}
                        {\color{darkgray}/* ... angle\_gl operations ... */}\\
                            \rowcolor{platinum}
                        \\\hline
                    \end{tabular}
                    \end{adjustbox}
                \end{table}
            }}

    \vspace{0.2cm}
	\setbeamertemplate{itemize/enumerate body begin}{\tiny}
	\setbeamertemplate{itemize items}[triangle]

	%\setbeamertemplate{blocks}
        \scriptsize{  \textbf{\color{coolblack}{Shared context restrictions:}}}
        \vspace{0.1cm}
        \begin{itemize}
            \item Contexts must be created by the \textbf{same API} (both OpenGL,
                or both GLESv2, same driver).
            \item Contexts must be created by the \textbf{same
                process}.(\textbf{=>
                {\color{coolblack}{not
                suitable for every project!}}})
        \end{itemize}
    \end{center}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}[fragile,c]
    \frametitle{Could we use shared context in WebKit?}

	\setbeamertemplate{itemize/enumerate body begin}{\tiny}
	\setbeamertemplate{itemize items}[triangle]
    \begin{center}
        \scriptsize{
            \textbf{\color{coolblack} Could we use shared context in WebKit?}\\

            \vspace{0.2cm}

            \textbf{Short answer:} Currently yes (with some workaround) but not in the
            future.

            \vspace{0.3cm}

            \begin{block}{Requirements to use shared context/textures in \textbf{WebKit}:}
                \begin{itemize}
                    \item We should use the \textbf{ANGLE EGL/OpenGL backend in
                        WebGL2} to
                        match the main Graphics Pipeline API/driver (both contexts
                        should be OpenGL or GLESv2 and from the same driver!)
                    \item We'd need an \textbf{ANGLE extension} to allow passing
                        native shared context to ANGLE's eglCreateContext instead of
                        ANGLE shared context.
                    \item We should never move WebGL2 and Graphics Pipeline in
                        different processes. Shared contexts should be created by
                        the same process! (\textbf{Reason we've rejected this
                        method}).
                \end{itemize}
            \end{block}
        }

        \vspace{0.3cm}

        \tiny{
            \textbf{\color{coolblack}{NEW}} ANGLE extension:\\
            \texttt{EGL\_ANGLE\_native\_shared\_context}

            \vspace{0.2cm}


            \textbf{\color{coolblack}NEW} \texttt{\color{afblue}EGLAttrib} attribute can be passed
            to \texttt{\color{afblue}eglCreateContext}:\\
            \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}

            \vspace{0.3cm}
            {\color{coolblack}
            This attribute indicates that the shared context in
            \texttt{\color{deepjunglegreen}eglCreateContext}
            is \textbf{not ANGLE} and should be used as native in the internal
            implementation.
            }
        }
    \end{center}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{frame}[fragile,c]
    \frametitle{EGL\_ANGLE\_native\_shared\_context}

	\setbeamertemplate{itemize/enumerate body begin}{\tiny}
    \setbeamertemplate{itemize items}[triangle]{\tiny}
    \setbeamercolor{block body}{bg=white}

    \begin{center}
        \tiny{
            \begin{block}{This is how we create shared OpenGL
                context using EGL (system or ANGLE):}
                \centering
                \begin{adjustbox}{max width=\textwidth}
                    \adjustbox{valign=t}{\includegraphics[height=1.3cm]{data/shared_ctx1.png}}
                \end{adjustbox}

                \begin{comment}
                {\color{coolblack}
                \begin{table}[t]
                    \centering
                    \begin{adjustbox}{max width=\textwidth}
                        \begin{tabular}{l}
                            · In case of system EGL \texttt{ctx\_A} and
                            \texttt{ctx\_B} are native
                            EGL contexts.\\
                            · In case of ANGLE they are ANGLE EGL contexts.\\
                        \end{tabular}
                    \end{adjustbox}
                \end{table}
                }
                \end{comment}
            \end{block}
        }

        \tiny{
        \begin{block}{This is how we'd create shared
        OpenGL context between native EGL and ANGLE EGL using
            \texttt{EGL\_ANGLE\_native\_shared\_context}:}

            \vspace{0.2cm}
            \begin{itemize}
                \item \tiny{We'd pass the native EGL context (created by the native system
                    driver) as {\color{black}shared context} to the
                    native OpenGL context that is created {\color{black}in the ANGLE
                    OpenGL backend} using the native system driver!}
                \item \tiny{We'd need use the {\color{black}new EGL attribute
                    (\texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE})} to let ANGLE know
                    that the shared context \textit{\color{coolblack}is not ANGLE but native}
                    context!}
            \end{itemize}
            \vspace{-0.2cm}

        \begin{table}[t]
            \centering
            \begin{tabular}{l}
                \begin{adjustbox}{max width=\textwidth}
                    \adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/shared_ctx2.png}}
                \end{adjustbox}
            \end{tabular}
        \end{table}
        \end{block}
    }


    \end{center}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{frame}[fragile,c]
    \frametitle{Some work on the shared context approach}
	\setbeamertemplate{itemize/enumerate body begin}{\tiny}
    \setbeamertemplate{itemize items}[triangle]{\tiny}
    \setbeamercolor{block body}{bg=white}

    \begin{center}
        \begin{block}{\tiny{Extension
            \texttt{EGL\_NATIVE\_SHARED\_CONTEXT\_ANGLE}:}}
            \vspace{0.2cm}
            \tiny{
                \begin{table}[h]
                    \centering
                        Worked on the extension implementation (draft state, there are
                        bugs).\\
                    \begin{tabular}{l}
                        \\
                        \textbf{Concept:}\\
                        \begin{adjustbox}{max width=\textwidth}
                            \adjustbox{valign=t}{\includegraphics[scale=0.2]{data/shared_ctx3.png}}
                        \end{adjustbox}\\
                    \end{tabular}
                \end{table}
            }
        \end{block}
        \begin{block}{\tiny{Experimental programs (to test the extension and
            familiarize with the shared context concept):}}
            \begin{itemize}
                \item A test program that uses EGL ctxA to create a texture and
                    EGL ctxB to display it on an X11 window.
                \item The same program written in ANGLE (there were
                    differences!)
                \item A test program that uses EGL ctxA to create a texture and
                    ANGLE EGL ctxB to display it on an X11 window.
                \item Variations of the above:
                    \url{https://github.com/hikiko/shctx/branches}
            \end{itemize}
        \end{block}
    \end{center}
   \end{frame}
   
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
   \begin{frame}
       \frametitle{Abandoned!}
       \begin{center}
           \textbf{\color{coolblack} Why not shared context?}
           \vspace{0.5cm}

           {\footnotesize{
               \begin{itemize}
                   \item Shared context would be a nice and clean approach if we wanted to use
                       it with our current WebKit code.
                   \item But there is a plan to use \textbf{separate processes} for WebGL2 and
					   the main graphics pipeline!! (Žan Doberšek)
               \end{itemize}
           }}

           \vspace{0.5cm}
           \textbf{\color{coolblack} But there was a \textit{better} approach!}
       \end{center}
   \end{frame}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section[Experiment 3]{Experiment 3: Sharing texture data across drivers using kernel DMA buffers}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}
    \frametitle{DMA buffers for the win!}

    \begin{center}
		\textbf{\color{coolblack}Fortunately we are on Linux!}

		\setbeamercolor{block body}{bg=white}
		\setbeamercolor{block title}{bg=white, fg=coolblack}
		\begin{block}{\scriptsize{There is a Linux kernel framework that can be used for
			content sharing across different Linux drivers!}}

			\vspace{-0.1cm}
			\begin{table}[t]
				\centering
				\begin{tabular}{l}
					\begin{adjustbox}{max width=\textwidth}
						\adjustbox{valign=t}{\includegraphics[height=3.1cm]{data/dma_buf_sharing.png}}
					\end{adjustbox}
				\end{tabular}
			\end{table}

			\textbf{\scriptsize{\color{coolblack}A few interesting things about
            content sharing with dma buffers:}}\\
			\vspace{0.1cm}

			\setbeamertemplate{itemize/enumerate body begin}{\tiny}
			\begin{itemize}
				\item There are {\color{coolblack}EGL and OpenGL/GLESv2
					extensions} to make it easier!
				\item It's a {\color{coolblack}driver independent} method!
				\item It works with {\color{coolblack}multiple processes}!
				\item As long as ANGLE can expose the required extensions to
					import a dma\_buf file descriptor this method is also
					{\color{coolblack}"ANGLE backend
					independent"}!
				\item DMA buffers are a {\color{coolblack}Linux-only} thing...
                    but we won't need to support other systems! (Žan Doberšek)
			\end{itemize}
		\end{block}
    \end{center}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}
	\frametitle{Extensions and new approach}

	\setbeamercolor{block body}{bg=white}
	\setbeamertemplate{itemize/enumerate body begin}{\tiny}

	\begin{block}{\scriptsize{How the kernel DMA buffers would help us avoid copying
		the WebGL texture data?}}

		\begin{center}
			\begin{itemize}
				\item Each texture is backed by a Linux kernel dma\_buffer.
				\item Multiple textures can use the same dma buffer as backing
					storage if they meet some requirements.
				\item We can export the file descriptor of one buffer from one
					driver and use it to access the buffer from the other
					driver.
				\item So we can export the FD that corresponds to the compositor
					texture, import it in WebGL when we create the render target
					and when the WebGL texture is filled, the compositor texture
					will be also filled, as they share the backing storage!
			\end{itemize}
		\end{center}
	\end{block}
	\begin{block}{\scriptsize{EGL and GL extensions that can be used:}}
		\begin{center}
			\begin{itemize}
				\item
					\href{https://www.khronos.org/registry/EGL/extensions/MESA/EGL\_MESA\_image\_dma\_buf\_export.txt}{EGL\_MESA\_image\_dma\_buf\_export}:
					\\ This extension allows creating one or multiple Linux dma\_buf
					file descriptors from the EGLImage that corresponds to a texture.
				\item \href{https://www.khronos.org/registry/EGL/extensions/EXT/EGL\_EXT\_image\_dma\_buf\_import.txt}{EGL\_EXT\_image\_dma\_buf\_import}:
					\\ This extension allows creating an EGLImage (that will be used to create a
					texture) from one or multiple Linux dma\_buf file
					descriptors.
				\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}:
					\\ This extension builds on EGL\_EXT\_image\_dma\_buf\_import, in order to support
					format modifiers used for tiling, compression, and additional non-linear
					modes.
				\item \href{https://www.khronos.org/registry/OpenGL/extensions/OES/OES\_EGL\_image\_external.txt}{OES\_EGL\_image\_external}: 
					\\ This extension provides a mechanism for creating EGLImage texture targets
					from EGLImages.
			\end{itemize}
		\end{center}
	\end{block}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}
	\frametitle{Example:}

	\setbeamercolor{block body}{bg=white}{\scriptsize}
	\setbeamertemplate{itemize/enumerate body begin}{\tiny}

	\begin{block}{\scriptsize{I've written an example:}}
		\begin{center}
			\begin{itemize}
				\item First using EGL!\\
					Blog post: \url{https://eleni.mutantstargoat.com/hikiko/egl-dma-1/} \\
					Code: \url{https://gistof.com/dma-egl-version}
				\item Then using a native EGL context and a context from ANGLE!\\
					Blog post: \url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}\\
					Code: \url{https://gistof.com/dmaangleeglversion}
			\end{itemize}
		\end{center}
	\end{block}
	\vspace{-0.3cm}
	\begin{block}{\scriptsize{Snippet from the exporter:}}
		\vspace{-0.1cm}
		\tiny{
		\begin{table}[t]
			\centering
			\begin{tabular}{l}
				{\color{coolblack}Exporting a dma buffer from a texture
				\texttt{texA}:}\\ 
				\begin{adjustbox}{max width=\textwidth}
					\adjustbox{valign=t}{\includegraphics[height=4cm]{data/dma_export_and_struct.png}}
				\end{adjustbox}\\
			\end{tabular}
		\end{table}
		}
	\end{block}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}
	\frametitle{Example continued}
	\setbeamercolor{block body}{bg=white}{\scriptsize}
	\setbeamertemplate{itemize/enumerate body begin}{\tiny}

	\begin{block}{\scriptsize{Snippets from the importer:}}
		\vspace{-0.1cm}
		\tiny{
		\begin{table}[t]
			\centering
			\begin{tabular}{l}
				{\color{coolblack}Creating an EGLImage from the dma buffer using
				the exported fd and the exported modifiers:}\\ 
				\\
				\begin{adjustbox}{max width=\textwidth}
					\adjustbox{valign=t}{\includegraphics[height=3.5cm]{data/dma_import.png}}
				\end{adjustbox}\\
\\
\\
				{\color{coolblack}Creating a texture using that external
				EGLImage:}\\ 
				\\
				\begin{adjustbox}{max width=\textwidth}
					\adjustbox{valign=t}{\includegraphics[height=2cm]{data/dma_targetteture2does.png}}
				\end{adjustbox}\\
			\end{tabular}
		\end{table}
		}
	\end{block}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{frame}
	\frametitle{Test program}

	\begin{block}{\scriptsize{An exporter-importer that uses ANGLE and native
		EGL}}
		\setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
		\begin{itemize}
			\itemsep0.3cm
			\itemsep0.2cm
			\item First context is EGL/OpenGL like the one in main graphics
				pipeline.
			\item Second is ANGLE with EGL/GLESv2 backend like the one in
				WebGL2.
			\item EGL/OpenGL context creates an empty texture and exports the dma\_buf
				fd and all other information about the buffer.
			\item ANGLE context creates another empty texture using the same
				dma\_buf and the import mechanism.
			\item ANGLE context fills the emty ANGLE texture.
			\item EGL/OpenGL context displays the previously empty OpenGL/EGL
				texture.
			\item EGL/OpenGL texture contains what ANGLE texture had.
			\item \textbf{We shared the ANGLE data without copying them!}
		\end{itemize}

	\end{block}
	\vspace{0.2cm}
	\scriptsize{
		\begin{center}
			\textbf{\color{coolblack}Check the blog posts for more details!}
		\end{center}
		}
\end{frame}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\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 \textbf{\textit{interprocess
			  communication}} to exchange the file descriptor.}
		  \item {\color{coolblack} This is a client-server
			  \textbf{\textit{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}.}
            \end{itemize}

        }
    \end{block}
\vspace{0.3cm}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section[WebKit Integration]{WebKit Integration}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}[fragile,c]
    \frametitle{WIP WebKit:}
	\center{\normalsize{\textbf{\color{coolblack}{Ongoing work on WebKit}}}}

	\vspace{0.1cm}
	\begin{center}
		\setbeamertemplate{itemize/enumerate body begin}{\scriptsize}
		\setbeamertemplate{itemize/enumerate subbody begin}[circle]{\tiny}
			\begin{itemize}
				\itemsep0.2cm
				\item The extensions to import dma-buf buffers in ANGLE are
					implemented and exposed to the user => {\color{coolblack}in WebGL we can easily import the main pipeline
					DMA buf when we create the render target!}
				\item The extension to export dma-buf buffers from EGL is
					supported on mesa => {\color{coolblack}we could run a check before creating
					the shared dma buffer and use either use it or fallback to
					something else (libgbm? copying?)}
			\end{itemize}
	\end{center}
	\vspace{0.05cm}
	{\scriptsize{
	\begin{block}{DONE/WIP/TODO}
            \begin{itemize}
                \item{Use the right CMake options (one can't simply enable
                    \texttt{USE\_ANGLE\_WEBGL}!):
                    \color{coolblack}{\textbf{FIXED }}}
                \item{There were compile errors when ANGLE was used: 
                    \color{coolblack}{\textbf{FIXED/Pending to send the patches}}}
                \item{Link errors when ANGLE is used:
                    \color{coolblack}{\textbf{WIP/Partially FIXED}}}
                \item{Copy replacement: \color{coolblack}{\textbf{WIP/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}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
