3d-interface-rapport/slides/main.tex

% 16:9 version
% \documentclass[aspectratio=169]{beamer}
\newcommand{\bigscale}{0.16}
\newcommand{\smallscale}{0.16}

% 4:3 version
\documentclass{beamer}
% \newcommand{\bigscale}{0.175}
% \newcommand{\smallscale}{0.125}

\RequirePackage{ifthen}

\usepackage[utf8]{inputenc}
\usepackage[frenchb]{babel}
\usepackage{hyperref}
\usepackage[T1]{fontenc}
\usepackage{multicol}
\usepackage{lmodern}
\usepackage{vwcol}
\usepackage{pgfpages}
\usepackage{hyperref}
\usepackage{tikz}
\usepackage{appendixnumberbeamer}

\newboolean{sectiontoc}
\setboolean{sectiontoc}{true}

\setbeameroption{show notes}
\setbeameroption{show notes on second screen=right}

\usetheme{JuanLesPins}      % or try Darmstadt, Madrid, Warsaw, ...
\setbeamertemplate{navigation symbols}{}

\newcommand{\tikzvline}[2]{
    \draw (#1,-6) -- (#1,-5.5);
    \draw (#1,-6) node[below]{#2};
}

\graphicspath{{../img/}}

\title[Navigation 3D et recommandations]{Systèmes de navigation 3D et mécanismes de recommandation}
\author{Thomas Forgione}
\date{\today}
\defbeamertemplate*{footline}{shadow theme}
{%
    \leavevmode%
    \hbox{\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm plus1fil,rightskip=.3cm]{author in head/foot}%
            \usebeamerfont{author in head/foot}\hfill\insertshortauthor
            \
        \end{beamercolorbox}%
        \begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm,rightskip=.3cm plus1fil]{title in head/foot}%
            \usebeamerfont{title in head/foot}IRIT --- VORTEX\hfill\insertframenumber\,/\,\inserttotalframenumber%
    \end{beamercolorbox}}%
    \vskip0pt%
}

\usepackage{nameref}
\makeatletter
\newcommand*{\currentname}{\@currentlabelname}
\makeatother

\AtBeginSection[] % Do nothing for \section*
{
    \ifthenelse{\boolean{sectiontoc}}{
        \begin{frame}<beamer>
            \tableofcontents[currentsection]
        \end{frame}
    }
}

\begin{document}
\begin{frame}
  \titlepage
\end{frame}

\begin{frame}
    \centering
    \includegraphics[scale=0.2]{icons/IRIT.jpg}\\[0.5cm]
    \includegraphics[scale=0.2]{icons/vortex.png}\\[0.5cm]
    \includegraphics[scale=0.3]{icons/nus.jpg}
\end{frame}

\begin{frame}
    \begin{figure}
        \includegraphics[scale=0.2]{new/bureau.jpg}
        \caption{Le bureau}
    \end{figure}
\end{frame}


\begin{frame}<beamer>
    \tableofcontents
\end{frame}

\section{Introduction}
\subsection{Contexte}
\begin{frame}
    \begin{figure}
        \includegraphics[scale=0.25]{new/youtube.png}
        \caption{Une vidéo sur Youtube}
    \end{figure}
\end{frame}

\begin{frame}
    \begin{figure}
        \includegraphics[scale=0.5]{new/interface2.png}
        \caption{Un lecteur vidéo avec recommandations}
    \end{figure}
    \note{Travaux de Vincent \textsc{Charvillat} et Axel \textsc{Carlier}}
    \note[item]{Interface avec recommandations}
    \note[item]{Biaiser l'interaction de l'utilisateur pour le rendre prévisible}
    \note[item]{Préchargement}
    \note[item]{Mettre la première video navigation}
\end{frame}

\section{Technologies utilisées}
\begin{frame}
    \begin{figure}
        \includegraphics[scale=0.1]{icons/html5.png}~
        \includegraphics[scale=0.125]{icons/css3.png}~~~
        \includegraphics[scale=0.05]{icons/javascript.png}~
        \includegraphics[scale=0.25]{icons/bootstrap.png}\\[0.7cm]
        \includegraphics[scale=0.25]{icons/webgl.png}~
        \includegraphics[scale=0.3]{icons/threejs.png}\\[0.5cm]
        \includegraphics[scale=0.25]{icons/nodejs.png}\quad\quad\quad\quad\quad
        \includegraphics[scale=0.25]{icons/socketio.png}~
    \end{figure}
    \note[item]{Contrainte web pour les tests}
\end{frame}

\section{L'interface}
    \subsection{Interface de base}
        \begin{frame}
            \begin{itemize}
                \item Interaction de type jeux vidéo \newline
                    \begin{figure}
                        \centering
                        \includegraphics[scale=0.25]{wiki/spheric.png}
                        \caption{Paramètres du contrôleur}
                    \end{figure}
                \item Clavier pour la translation
                \item \emph{drag-n-drop} ou \emph{pointer-lock} pour la rotation
            \end{itemize}

            \note[item]{Faire une démo}
            \note[item]{Beaucoup de degré de liberté}
            \note[item]{Difficile}
        \end{frame}


    \subsection{Recommandations}
        \begin{frame}
            \frametitle{\emph{Viewport}}
            \begin{figure}
                \includegraphics[scale=0.2]{new/01.png}
                \caption{Une recommandation \emph{viewport}}
            \end{figure}
        \end{frame}

        \begin{frame}
            \frametitle{\emph{Arrow}}
            \begin{figure}
                \includegraphics[scale=0.2]{new/02.png}
                % \animategraphics[autoplay,loop,scale=0.2, controls]{45}{../img/arrowclick/arrowclick}{1}{45}
                \caption{Une recommandation \emph{arrow}}
            \end{figure}
        \end{frame}

    \subsection{Prévisualisation}
        \begin{frame}
            \begin{figure}[H]
                \centering
                \includegraphics[scale=0.3]{new/interface2.png}
                ~
                \includegraphics[scale=0.15]{new/03.png}
                \caption{Des prévisualisations sur différentes interfaces}
            \end{figure}
        \end{frame}

    \subsection{Interface complète}
        \begin{frame}
            \begin{figure}[H]
                \scalebox{.5}{\parbox{2\linewidth}{%
                    \centering
                    \begin{tikzpicture}[]
                        \node (myfirstpic) at (0,0) {\includegraphics[scale=0.35]{new/buttons.png}};
                        \tikzvline{-7}{1}
                        \tikzvline{-5.8}{2}
                        \tikzvline{-5.2}{3}
                        \tikzvline{-4}{4}
                        \tikzvline{-1.5}{5}

                        \draw (8,5) -- (7,5);
                        \draw (8,5) node[right]{6};

                        \draw (-8,5) -- (-7,5);
                        \draw (-8,5) node[left]{7};
                    \end{tikzpicture}
                }}
                \caption{Les différents éléments de l'interface}
            \end{figure}

            \note[item]{ \emph{Reset camera} : pour chaque scène, une position initiale est
            définie. Cliquer sur ce bouton ramène la caméra à sa position initiale.}

            \note[item]{ \emph{Previous} : à chaque clic sur une recommandation, les positions
                intiale et finale sont sauvegardées. Cliquer sur ce bouton ramène à
            la position précédente.}

            \note[item]{ \emph{Next} : cliquer sur ce bouton ramène à la position suivante.}

            \note[item]{ \emph{Pointer lock} : permet de passer du mode \emph{pointer-lock} au
            mode \emph{drag-n-drop} et vice-versa.}

            \note[item]{ \emph{Music} : un lecteur qui contrôle une petite musique qui permet
            de se mettre dans l'ambiance de la scène.}

            \note[item]{ \emph{Coin gauge} : une jauge qui représente l'avancement de la
            récupération des pièces.}

            \note[item]{ \emph{FPS counter} : indique la période de rafraîchissement du rendu.}

        \end{frame}

\section{Test de l'interface}

\subsection{Principe du test}
\begin{frame}
    Chercher des pièces dans une scène :\\[0.25cm]
    \begin{enumerate}
        \item Un formulaire (âge, habitude en terme de jeux vidéo)
        \item Un didacticiel
        \item Trois expériences différentes
        \item Un formulaire final (intérêt des recommandations, préférences)
    \end{enumerate}
    ~\\[0.25cm]

    Sauvegarde complète des interactions de l'utilisateur :\\[0.25cm]
    \begin{itemize}
        \item Mouvement clavier / souris
        \item Recommandations (clic ou survol)
        \item Pièces récupérées
        \item Boutons de l'interface (précédente, suivante, reset...)
    \end{itemize}

    \note[item]{Exp différentes : scènes différentes, et styles de reco différents}
    \note[item]{Habitude en terme de jeux video $\Longrightarrow$ bonne capacité à naviguer}
\end{frame}

\subsection{Tirage des expériences}
\begin{frame}
    \begin{block}{Objectifs}
        \begin{itemize}
            \item Tirer des expériences aléatoires
            \item Eliminer la dépendance entre les pièces et le recommandations
            \item Minimiser les paramètres variables pour faire des comparaisons
        \end{itemize}
    \end{block}
    \begin{columns}
        \begin{column}{0.5\textwidth}
            Parmi les paramètres, on a :
            \begin{itemize}
                \item Niveau de l'utilisateur
                \item Scène et combinaison de pièces
                \item Type de recommandations
            \end{itemize}
        \end{column}
        \begin{column}{0.4\textwidth}
            \begin{figure}
                \includegraphics[scale=0.1]{new/allcoins.png}
                \caption{Pièces possibles}
            \end{figure}
        \end{column}
    \end{columns}
    \note[item]{Etude utilisateur va bientot etre deployée sur micro workers}
\end{frame}

\setboolean{sectiontoc}{false}
\section{Streaming}
\subsection{Protocole}
\setboolean{sectiontoc}{true}

\begin{frame}
    \tableofcontents[currentsection]
    \note[item]{Montrer la démo sans bouger la caméra}
\end{frame}

\begin{frame}
    \begin{itemize}
        \item Communication client-serveur via \texttt{socket.io} (et \texttt{Websocket})
        \item Modèles sous forme \texttt{.obj} et \texttt{.mtl}
        \item Streaming orienté faces
        \item Ajout dynamique des éléments reçus
        \item Envoi des matériaux au début
    \end{itemize}
\end{frame}

\begin{frame}
    \begin{figure}
        \centering
        \begin{tikzpicture}[scale=0.6,every node/.style={scale=0.6}]
            \draw (0,0) node[above]{Client};
            \draw (0,0) -- (0,-8);
            \draw (5,0) node[above]{Serveur};
            \draw (5,0) -- (5,-8);

            \pause
            \draw (2.5,-1.3) node[rotate=-12] {Path jusqu'au modèle};
            \draw[->] (0,-1) -- (5, -2);

            \pause
            \draw (2.5,-2.3) node[rotate=12] {Liste des matériaux};
            \draw[<-] (0,-3) -- (5, -2);

            \pause
            \draw[dashed, ->] (-0.1,-3) -- (-0.1,-4);

            \pause
            \draw (2.5,-3.3) node[rotate=-12] {Caméra / \emph{frustum}};
            \draw[->] (0,-3) -- (5, -4);

            \pause
            \draw (2.5,-4.3) node[rotate=12] {Des éléments};
            \draw[<-] (0,-5) -- (5, -4);

            \pause
            \draw (2.5,-5.3) node[rotate=-12] {Caméra / \emph{frustum}};
            \draw[->] (0,-5) -- (5, -6);

            \pause
            \draw (2.5,-6.3) node[rotate=12] {D'autres éléments};
            \draw[<-] (0,-7) -- (5, -6);

            \draw (2.5,-8) node{$\vdots$};
            \onslide<1->
        \end{tikzpicture}
        \caption{Communication client / serveur pour streaming de modèle 3D}
    \end{figure}
\end{frame}

\subsection{Frustum}
\begin{frame}
    \begin{figure}
    \scalebox{.8}{\parbox{1.25\linewidth}{\centering\input{../common/build/frustum}}}
    \caption{Le frustum de la camera et différents objets\label{frustum-draw}}
    \end{figure}
    \note[item]{Faire la démo en stream progressif (bouge la cam)}
\end{frame}

\setboolean{sectiontoc}{false}
\section*{Conclusion}
\begin{frame}
\end{frame}

\appendix
\begin{frame}
    \frametitle{Courbure des flèches}
    \begin{block}{Equation des flèches}
        $
        \begin{array}{lcccl}
            P & : & [0,1] & \rightarrow & \mathbb{R}^3 \\
              && t & \mapsto & (x,y,z)
        \end{array}$ un polynôme de degré 3 tel que :
        $$
        \left\{\begin{array}{lcl}
                P(0) & = & C -e_z + \lambda R'\\
                P(1) & = & R \\
                P'(1) & = & \lambda R'
        \end{array}\right.\text{ avec } \lambda \in \mathbb{R}^{+}$$
    \end{block}

    \begin{itemize}
        \item $C$ : centre de la caméra
        \item $R$ : centre de la recommandation
        \item $R'$ : direction de la recommandation
    \end{itemize}
\end{frame}


\end{document}