Better figures

src/dash-3d-implementation/introduction.tex

@@ -13,8 +13,11 @@ All DASH clients are built from the same basic bricks, as shown in Figure~\ref{d
     \item the \emph{media engine}, which renders the multimedia content to the screen and the user interface.
 \end{itemize}
 
-In order to be able to do user study easily, we want our client to be as portable as possible, so we decided to implement it in JavaScript using WebGL for rendering.
+We want to have two implementations of such a client:
-That way, we can develop a desktop interface and adapting it for mobile devices, for example, will be painless.
+\begin{itemize}
+    \item \textbf{one in JavaScript}, so we can easily have demos and conduct user-studies with real users trying the real interface on different devices (desktop or mobile);
+    \item \textbf{one in Rust}, so we can easily run simulations with maximum performance to be able to compare different setups or parameters with more precision.
+\end{itemize}
 
 \tikzset{
   double arrow/.style args={#1 colored by #2 and #3}{
@@ -24,6 +27,14 @@ That way, we can develop a desktop interface and adapting it for mobile devices,
   }
 }
 
+\tikzset{
+  double ended double arrow/.style args={#1 colored by #2 and #3}{
+    stealth-stealth,line width=#1,#2, % first arrow
+    postaction={draw,stealth-stealth,#3,line width=(#1)/3,
+                shorten <=(#1)/3+1.5,shorten >=2*(#1)/3}, % second arrow
+  }
+}
+
 \begin{figure}[ht]
     \centering
     \begin{tikzpicture}
@@ -71,16 +82,16 @@ That way, we can develop a desktop interface and adapting it for mobile devices,
         \node[align=center] at (1.625, 3.5) {Segment \\ Parser};
 
         % Access client to server
-        \draw[double arrow=5pt colored by black and white] (-3.25, 1.0) -- (-1.0, 1.0);
+        \draw[double arrow=5pt colored by RoyalBlue and white] (-3.25, 1.0) -- (-1.0, 1.0);
 
         % Access client to control engine
-        \draw[double arrow=5pt colored by black and white] (-0.625, 1.25) -- (-0.625, 2.5);
+        \draw[double ended double arrow=5pt colored by RoyalBlue and white] (-0.625, 1.25) -- (-0.625, 2.5);
 
         % Acces client to segment parser
-        \draw[double arrow=5pt colored by black and white] (1.625, 1.25) -- (1.625, 2.5);
+        \draw[double arrow=5pt colored by RoyalBlue and white] (1.625, 1.25) -- (1.625, 2.5);
 
         % Segment parser to media engine
-        \draw[double arrow=5pt colored by black and white] (1.625, 4.5) -- (1.625, 5.75);
+        \draw[double arrow=5pt colored by RoyalBlue and white] (1.625, 4.5) -- (1.625, 5.75);
 
     \end{tikzpicture}
     \caption{Scheme of a server and a DASH client\label{d3i:dash-scheme}}

src/dash-3d-implementation/media-engine.tex

@@ -49,11 +49,11 @@ That way, when geometry is downloaded for a new material, we know how much space
         \draw[fill=LightBlue] (6, -9) rectangle (9, -10);
         \node at(7.5, -9.5) {Material 3};
 
-        \node[minimum width=3cm,minimum height=2cm] (O1) at (7.5, -3.5) {};
+        \node[minimum width=0.5cm,minimum height=2cm] (O1) at (6.25, -3.5) {};
         \draw[-{Latex[length=3mm]}, color=FireBrick] (3, -2.5) -- (O1);
         \draw[-{Latex[length=3mm]}, color=FireBrick] (3, -6) -- (O1);
 
-        \node[minimum width=3cm,minimum height=2cm] (O2) at (7.5, -7) {};
+        \node[minimum width=0.5cm,minimum height=2cm] (O2) at (6.25, -7) {};
         \draw[-{Latex[length=3mm]}, color=DarkGreen] (3, -3.5) -- (O2);
         \draw[-{Latex[length=3mm]}, color=DarkGreen] (3, -8.5) -- (O2);
 

src/dash-3d-implementation/worker.tex

@@ -4,7 +4,9 @@ In JavaScript, there is no way of doing parallel computing without using \emph{w
 A web worker is a script in JavaScript that runs in the background, on a separate thread and that can communicate with the main script by sending and receiving messages.
 Since our system has many tasks to do, it seems natural to use workers to manage the streaming without impacting the framerate of the renderer.
 However, what a worker can do is very limited, since it cannot access the variables of the main script.
-Because of this, we are forced to run the renderer on the main script, where it can access the HTML page, and we move all the other tasks to the worker (the access client, the control engine and the segment parsers).
+Because of this, we are forced to run the renderer on the main script, where it can access the HTML page, and we move all the other tasks to the worker (the access client, the control engine and the segment parsers), and since the main script is the one communicating with the GPU, it will still have to update the model with the parsed content it receives from the worker.
+Using the worker does not so much improve the framerate of the system, but it reduces the latency that occurs when receiving a new segment, which can be very frustrating since in a single thread scenario, each time a segment is received, the interface freezes for around half a second.
+A sequence diagram of what happens when downloading, parsing and rendering content is shown in Figure~\ref{d3i:sequence}.
 
 \begin{figure}[ht]
 
@@ -12,35 +14,97 @@ Because of this, we are forced to run the renderer on the main script, where it
 
     \begin{tikzpicture}
         \node at(0, 1) {Main script};
-        \draw[->, color=LightGray] (0, 0.5) -- (0, -9.5);
+        \draw[->, color=LightGray] (0, 0.5) -- (0, -17.5);
 
-        \node at(5, 1) {Worker};
+        \node at(2.5, 1) {Worker};
-        \draw[->, color=LightGray] (5, 0.5) -- (5, -9.5);
+        \draw[->, color=LightGray] (2.5, 0.5) -- (2.5, -17.5);
 
-        \node at(12.5, 1) {Server};
+        \node at(10, 1) {Server};
-        \draw[->, color=LightGray] (12.5, 0.5) -- (12.5, -9.5);
+        \draw[->, color=LightGray] (10, 0.5) -- (10, -17.5);
 
         % MPD
-        \node[color=blue, above] at(2.5, 0.0) {Ask MPD};
+        \draw[color=blue] (0, 0) -- (2.5, -0.1) -- (10, -1) -- (2.5, -2);
-        \node[color=blue, right] at(5.0, -2.5) {Parse MPD};
+        \node[color=blue, above] at(1.25, 0.0) {Ask MPD};
-        \draw[color=blue, ->] (0, 0) -- (5, -0.1) -- (12.5, -1) -- (5, -2) -- (5, -2.9) -- (0, -3);
+        \draw[color=blue, fill=LightBlue] (2.375, -2) rectangle (2.625, -2.9);
+        \node[color=blue, right=0.2cm] at(2.5, -2.45) {Parse MPD};
+        \draw[color=blue] (2.5, -2.9) -- (0, -3);
+        \draw[color=blue, fill=LightBlue] (-0.125, -3.0) rectangle(0.125, -3.5);
+        \node[color=blue, left=0.2cm] at (0.0, -3.25) {Update model};
 
         % Ask segments
-        \begin{scope}[shift={(0, -3)}]
+        \begin{scope}[shift={(0, -3.5)}]
-            \node[color=DarkGreen, above] at(2.5, 0.0) {Ask segment};
+            \draw[color=red] (0, 0) -- (2.5, -0.1);
-            \node[color=DarkGreen, right] at(5.0, -2.5) {Parse segment};
+            \node[color=red, above] at(1.25, 0.0) {Ask segment};
-            \draw[color=DarkGreen, ->] (0, 0) -- (5, -0.1) -- (12.5, -1) -- (5, -2) -- (5, -2.9) -- (0, -3);
+
+            \draw[color=red, fill=Pink] (2.375, -0.1) rectangle (2.625, -1);
+            \node[color=red, right=0.2cm] at (2.5, -0.55) {Compute utilities};
+
+            \draw[color=red] (2.5, -1) -- (10, -2) -- (2.5, -3);
+
+            \draw[color=red, fill=Pink] (2.375, -3) rectangle (2.625, -3.9);
+            \node[color=red, right=0.2cm] at(2.5, -3.45) {Parse segment};
+
+            \draw[color=red] (2.5, -3.9) -- (0, -4);
+            \draw[color=red, fill=Pink] (-0.125, -4.0) rectangle(0.125, -4.5);
+            \node[color=red, left=0.2cm] at (0.0, -4.25) {Update model};
         \end{scope}
 
         % Ask more segments
-        \begin{scope}[shift={(0, -6)}]
+        \begin{scope}[shift={(0, -8)}]
-            \node[color=red, above] at(2.5, 0.0) {Ask segment};
+
-            \node[color=red, right] at(5.0, -2.5) {Parse segment};
+            \draw[color=DarkGreen] (0, 0) -- (2.5, -0.1);
-            \draw[color=red, ->] (0, 0) -- (5, -0.1) -- (12.5, -1) -- (5, -2) -- (5, -2.9) -- (0, -3);
+            \node[color=DarkGreen, above] at(1.25, 0.0) {Ask segment};
+
+            \draw[color=DarkGreen, fill=PaleGreen] (2.375, -0.1) rectangle (2.625, -1);
+            \node[color=DarkGreen, right=0.2cm] at (2.5, -0.55) {Compute utilities};
+
+            \draw[color=DarkGreen] (2.5, -1) -- (10, -2) -- (2.5, -3);
+
+            \draw[color=DarkGreen, fill=PaleGreen] (2.375, -3) rectangle (2.625, -3.9);
+            \node[color=DarkGreen, right=0.2cm] at(2.5, -3.45) {Parse segment};
+
+            \draw[color=DarkGreen] (2.5, -3.9) -- (0, -4);
+            \draw[color=DarkGreen, fill=PaleGreen] (-0.125, -4.0) rectangle(0.125, -4.5);
+            \node[color=DarkGreen, left=0.2cm] at (0.0, -4.25) {Update model};
+
         \end{scope}
 
+        % Ask even more segments
+        \begin{scope}[shift={(0, -12.5)}]
+            \draw[color=purple] (0, 0) -- (2.5, -0.1);
+            \node[color=purple, above] at(1.25, 0.0) {Ask segment};
+
+            \draw[color=purple, fill=Orchid] (2.375, -0.1) rectangle (2.625, -1);
+            \node[color=purple, right=0.2cm] at (2.5, -0.55) {Compute utilities};
+
+            \draw[color=purple] (2.5, -1) -- (10, -2) -- (2.5, -3);
+
+            \draw[color=purple, fill=Orchid] (2.375, -3) rectangle (2.625, -3.9);
+            \node[color=purple, right=0.2cm] at(2.5, -3.45) {Parse segment};
+
+            \draw[color=purple] (2.5, -3.9) -- (0, -4);
+            \draw[color=purple, fill=Orchid] (-0.125, -4.0) rectangle(0.125, -4.5);
+            \node[color=purple, left=0.2cm] at (0.0, -4.25) {Update model};
+        \end{scope}
+
+        \foreach \x in {0,...,5}
+        {
+            \draw[color=Goldenrod, fill=LemonChiffon] (-0.125, -\x/2) rectangle (0.125, -\x/2-0.5);
+        }
+        \node[color=Goldenrod, left=0.2cm] at (0.0, -1.5) {Render};
+
+        \foreach \x in {0,...,7}
+        {
+            \draw[color=Goldenrod, fill=LemonChiffon] (-0.125, -\x/2-3.5) rectangle (0.125, -\x/2-4);
+            \draw[color=Goldenrod, fill=LemonChiffon] (-0.125, -\x/2-8) rectangle (0.125, -\x/2-8.5);
+            \draw[color=Goldenrod, fill=LemonChiffon] (-0.125, -\x/2-12.5) rectangle (0.125, -\x/2-13);
+        }
+        \node[color=Goldenrod, left=0.2cm] at (0.0, -5.5) {Render};
+        \node[color=Goldenrod, left=0.2cm] at (0.0, -10) {Render};
+        \node[color=Goldenrod, left=0.2cm] at (0.0, -14.5) {Render};
+
     \end{tikzpicture}
 
-    \caption{Repartition of the tasks on the main script and the worker}
+    \caption{Repartition of the tasks on the main script and the worker\label{d3i:sequence}}
 
 \end{figure}