\fresh{}

\section{Introduction}
In the previous chapter, we discussed the theoritical aspects of 3D streaming based on DASH\@.
We showed different ways of structuring and downloading content, and we evaluated the parameters.
In this chapter, we detail every aspect of the implementation of the DASH-3D client, from the way segments are downloaded to how they are rendered.
All DASH clients are built from the same basic bricks, as shown in Figure~\ref{d3i:dash-scheme}:

\begin{itemize}
    \item the \emph{access client}, which is the part that deals with making requests and receiving responses;
    \item the \emph{segment parser}, which decodes the data downloaded by the access client;
    \item the \emph{control engine}, which analyses the bandwidth to dynamically adapt to it;
    \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.

\tikzset{
  double arrow/.style args={#1 colored by #2 and #3}{
    -stealth,line width=#1,#2, % first arrow
    postaction={draw,-stealth,#3,line width=(#1)/3,
                shorten <=(#1)/3,shorten >=2*(#1)/3}, % second arrow
  }
}

\begin{figure}[ht]
    \centering
    \begin{tikzpicture}

        % Server
        \draw[rounded corners=5pt,fill=Pink] (-10, 0) rectangle (-3, 7.5);
        \node at (-9, 7) {Server};

        % Segments
        \begin{scope}[shift={(0.5,0.5)}]
            \foreach \x in {0,...,3}
            {
                \draw [fill=Bisque](\x/2-7.5, 1.5-\x/2) rectangle (\x/2-5.5, 6-\x/2);
                \node at (\x/2-6.5, 5.5-\x/2) {\fcolorbox{black}{LightBlue}{Segment}};
                \node at (\x/2-6.5, 4.75-\x/2) {\fcolorbox{black}{LightBlue}{Segment}};
                \draw [fill=LightBlue] (\x/2-6.5, 3.825-\x/2)  circle (2pt) {};
                \draw [fill=LightBlue] (\x/2-6.5, 3.325 -\x/2) circle (2pt) {};
                \draw [fill=LightBlue] (\x/2-6.5, 2.825 -\x/2) circle (2pt) {};
                \node at (\x/2-6.5, 2-\x/2) {\fcolorbox{black}{LightBlue}{Segment}};
            }
        \end{scope}

        % MPD
        \draw[fill=LightBlue] (-9.5, 6.5) rectangle (-7.5, 0.5);
        \node at(-8.5, 3.5) {MPD};

        % Client
        \draw[rounded corners=5pt, fill=LemonChiffon] (-2, 0) rectangle (3, 7.5);
        \node at (-0.5, 7) {DASH client};

        % Access client
        \draw[fill=PaleGreen] (-1.5, 0.5) rectangle (2.5, 1.5);
        \node at (0.5, 1) {Access Client};

        % Media engine
        \draw[fill=PaleGreen] (-1.5, 5.5) rectangle (2.5, 6.5);
        \node at (0.5, 6) {Media Engine};

        % Control engine
        \draw[fill=PaleGreen] (-1.5, 2) rectangle (0.25, 5);
        \node[align=center] at (-0.625, 3.5) {Control \\ Engine};

        % Segment parser
        \draw[fill=PaleGreen] (0.75, 2) rectangle (2.5, 5);
        \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);

        % Access client to control engine
        \draw[double arrow=5pt colored by black 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);

        % Segment parser to media engine
        \draw[double arrow=5pt colored by black 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}}
\end{figure}
