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

	\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][shadow]

	\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
		\textbf{\color{mediumred-violet}modify the default set up} to 
		debug/explore ANGLE calls with GDB:
		}
    \end{center}

	\vspace{0.1cm}

	\setbeamertemplate{blocks}[rounded][shadow]

	\begin{block}{\footnotesize{\textbf{Problems when building ANGLE:}}}\scriptsize{\texttt{
		\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
			\textbf{\color{mediumred-violet}{ANGLE}} and \textbf{\color{mediumred-violet}{GDB}} for debugging: \url{https://eleni.mutantstargoat.com/hikiko/debug-angle/}}
		\item {\textbf{Gist} with the \textbf{\color{mediumred-violet}{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]
	\setbeamertemplate{blocks}[rounded][shadow]

	\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{Things I had to take care of:}}
	\begin{itemize}
		\item {Configure Makefile to find ANGLE \textbf{library paths} 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 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]
	
	\scriptsize{

	\textbf{Blog post:}\\
	Sharing texture data between ANGLE and the native system driver:\\
	\url{https://eleni.mutantstargoat.com/hikiko/angle-dma/}
	\begin{itemize}
		\item \texttt{Makefile changes and dynamic loading:}\\
		{\color{mediumred-violet}Step 1: Using
			both libraries in the same program.}
		\item \texttt{ANGLE MakeCurrent problem:}\\
		{\color{mediumred-violet}{About ANGLE MakeCurrent.}}
	\end{itemize}

	\vspace{-0.1cm}

	\textbf{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{}
    \begin{center}
    \end{center}
\end{frame}

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

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

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