dash-3d-tmp
/
phd
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better figures

This commit is contained in:
Thomas Forgione 2019-09-20 11:45:18 +02:00
parent d099c78966
commit 30667378e3
No known key found for this signature in database
GPG Key ID: 203DAEA747F48F41
3 changed files with 101 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/dash-3d-implementation/introduction.tex
View File

@ -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.
That way, we can develop a desktop interface and adapting it for mobile devices, for example, will be painless.
We want to have two implementations of such a client:
\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}}

4
src/dash-3d-implementation/media-engine.tex
View File

@ -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);

100
src/dash-3d-implementation/worker.tex
View File

@ -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};
\draw[->, color=LightGray] (5, 0.5) -- (5, -9.5);
\node at(2.5, 1) {Worker};
\draw[->, color=LightGray] (2.5, 0.5) -- (2.5, -17.5);
\node at(12.5, 1) {Server};
\draw[->, color=LightGray] (12.5, 0.5) -- (12.5, -9.5);
\node at(10, 1) {Server};
\draw[->, color=LightGray] (10, 0.5) -- (10, -17.5);
% MPD
\node[color=blue, above] at(2.5, 0.0) {Ask MPD};
\node[color=blue, right] at(5.0, -2.5) {Parse MPD};
\draw[color=blue, ->] (0, 0) -- (5, -0.1) -- (12.5, -1) -- (5, -2) -- (5, -2.9) -- (0, -3);
\draw[color=blue] (0, 0) -- (2.5, -0.1) -- (10, -1) -- (2.5, -2);
\node[color=blue, above] at(1.25, 0.0) {Ask MPD};
\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)}]
\node[color=DarkGreen, above] at(2.5, 0.0) {Ask segment};
\node[color=DarkGreen, right] at(5.0, -2.5) {Parse segment};
\draw[color=DarkGreen, ->] (0, 0) -- (5, -0.1) -- (12.5, -1) -- (5, -2) -- (5, -2.9) -- (0, -3);
\begin{scope}[shift={(0, -3.5)}]
\draw[color=red] (0, 0) -- (2.5, -0.1);
\node[color=red, above] at(1.25, 0.0) {Ask segment};
\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)}]
\node[color=red, above] at(2.5, 0.0) {Ask segment};
\node[color=red, right] at(5.0, -2.5) {Parse segment};
\draw[color=red, ->] (0, 0) -- (5, -0.1) -- (12.5, -1) -- (5, -2) -- (5, -2.9) -- (0, -3);
\begin{scope}[shift={(0, -8)}]
\draw[color=DarkGreen] (0, 0) -- (2.5, -0.1);
\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}