From 9b0c1548af5addc13405077e6e08d9bc5601aa71 Mon Sep 17 00:00:00 2001 From: Eleni Maria Stea Date: Tue, 18 May 2021 23:19:51 +0300 Subject: [PATCH] added a few more slides --- Makefile | 1 - codecamp.tex | 222 +++++++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 198 insertions(+), 25 deletions(-) diff --git a/Makefile b/Makefile index 56ba2db..775775a 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,3 @@ - codecamp.pdf:codecamp.tex bib/references.bib xelatex codecamp.tex bibtex codecamp diff --git a/codecamp.tex b/codecamp.tex index 898b8dd..4818161 100644 --- a/codecamp.tex +++ b/codecamp.tex @@ -173,29 +173,32 @@ \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 body begin}{\scriptsize} \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}:}} + \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}{\footnotesize\textbf{ANGLE EGL/GLESv2}:}} + \begin{block}{\color{afblue}{\scriptsize\textbf{ANGLE EGL/GLESv2}:}} \begin{itemize} - \item GLESv2 is implemented on top of other APIs (OpenGL, + \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 - \textit{ANGLE EGL extensions} (\texttt{eglext\_angle.h}) that + \textbf{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 + \item Primary \textbf{purpose} of ANGLE is to provide EGL/GLESv2 to systems lacking it. \end{itemize} \end{block} @@ -211,31 +214,36 @@ \center{\textbf{\color{coolblack}{Using ANGLE (EGL/GLESv2 backend) in WebGL2 }}} \vspace{0.2cm} - \setbeamertemplate{itemize/enumerate body begin}{\footnotesize} + \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}{\footnotesize\textbf{Reasons}:}} + \begin{block}{\color{afblue}{\scriptsize\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*) + \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} - \begin{block}{\color{afblue}{\footnotesize\textbf{Problem}:}} + \vspace{0.3cm} + \begin{block}{\color{afblue}{\scriptsize\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 \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!}}} @@ -282,7 +290,11 @@ \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% - +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[Experiment 1]{Experiment 1: Using ANGLE and the native system driver in the same @@ -291,22 +303,160 @@ 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} + 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 2]{Experiment 2: Sharing a texture across drivers using shared context} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -314,6 +464,14 @@ program} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[Multiple Processes]{Multiple Processes} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -334,12 +492,12 @@ program} \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 + \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}. It could - be adapted to our needs when we switch to multiple processes.} + \url{https://gitlab.com/blaztinn/dma-buf-texture-sharing}.} \end{itemize} } @@ -349,6 +507,14 @@ program} \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[WebKit Integration]{WebKit Integration} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% @@ -383,6 +549,14 @@ program} \end{frame} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + +%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \section[References]{References} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %\setbeamertemplate{bibliography entry title}{} -- 1.7.10.4