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

\part{L'interface \label{interface}}
\section{Interactions élémentaires\label{interface-base}}
\paragraph{}
La première interface, sans recommandations, a été pensée pour être la plus
simple possible.  L'utilisateur contrôle une caméra qui se déplace librement
dans une scène 3D.  Elle est contrôlée par un ensemble de paramètres décrit
dans la figure \ref{spheric}.

\begin{figure}[H]
    \centering
    \includegraphics[scale=0.5]{img/wiki/spheric.png}
    \caption{Les paramètres du contrôleur. \label{spheric}\protect\footnotemark}
\end{figure}

\footnotetext{Contenu soumis à la licence CC-BY-SA 3.0 (\url{http://creativecommons.org/licenses/by-sa/3.0/deed.fr}) Source : Article Coordonnées sphériques de Wikipédia en français (\url{http://fr.wikipedia.org/wiki/Coordonn\%C3\%A9es\_sph\%C3\%A9riques}).}

\paragraph{}
La translation de la caméra est contrôlée par le clavier : les touches Z, Q, S,
et D servent respectivement à avancer, aller à gauche, reculer et aller à
droite (de même que les touches fléchées). Concrètement, \emph{avancer} revient
à translater l'origine de la caméra $O$ suivant le vecteur
$\overrightarrow{OP}$, et \emph{aller à gauche} correspond à translater $O$
suivant le vecteur $\vec{z}\wedge\overrightarrow{OP}$, c'est à dire la normale
du plan $(OPz)$.

\paragraph{}
La rotation de la caméra (variation des angles $\theta$ et $\delta$) de
plusieurs manières :
\begin{itemize}
    \item via le pavé numérique (2, 4, 6, et 8 pour tourner respectivement vers
        le bas, vers la gauche, vers la droite et vers le haut)
    \item via la souris, comme \emph{drag-n-drop}, en cliquant un point de la
        scène et en le déplaçant (le mouvement de la caméra sera alors opposé
        au mouvement de la souris)
    \item via la souris, en mode \emph{pointer-lock}, comme dans un jeu vidéo
        de tir
\end{itemize}

\paragraph{}
Par exemple, on peut tourner vers la gauche (c'est-à-dire diminuer $\theta$) en
:
\begin{itemize}
    \item cliquant un point et en le déplaçant vers la droite (en mode
        \emph{drag-n-drop})
    \item déplaçant la souris vers la gauche (en mode \emph{pointer-lock})
    \item en appuyant sur la touche 4 du pavé numérique
\end{itemize}

\newpage
\paragraph{}
Voici un petit tableau qui permet de montrer comment la caméra tourne autour de
son centre en fonction des interactions.

\begin{figure}[H]
    \centering
    \begin{subfigure}[b]{0.3\textwidth}
        \centering
        \includegraphics[scale=0.12]{img/wiki/04.png}
        \caption{Vers le haut ($\delta \nearrow$)}
    \end{subfigure}
    \\
    \begin{subfigure}[b]{0.3\textwidth}
        \centering
        \includegraphics[scale=0.12]{img/wiki/03.png}
        \caption{Vers la gauche ($\theta \searrow$)}
    \end{subfigure}
    ~
    \begin{subfigure}[b]{0.3\textwidth}
        \centering
        \includegraphics[scale=0.12]{img/wiki/01.png}
        \caption{Angle initial}
    \end{subfigure}
    ~
    \begin{subfigure}[b]{0.3\textwidth}
        \centering
        \includegraphics[scale=0.12]{img/wiki/02.png}
        \caption{Vers la droite ($\theta \nearrow$)}
    \end{subfigure}
    \\
    \begin{subfigure}[b]{0.3\textwidth}
        \centering
        \includegraphics[scale=0.12]{img/wiki/05.png}
        \caption{Vers le bas ($\delta $\searrow)}
    \end{subfigure}

    \caption{Les différentes rotations possibles}
\end{figure}

\paragraph{}
Ces techniques de navigation 3D restent quand même complexes à utiliser,
surtout pour quelqu'un qui n'est pas habitué à jouer aux jeux vidéo. Nous
allons donc ensuite voir comment nous pouvons essayer de faciliter
la navigation pour des utilisateurs non-initiés.

\newpage
\section{Les recommandations}
\paragraph{}
Les recommandations sont là pour suggérer des points de vue à l'utilisateur.
Elles permettent d'aider la navigation. Elles sont affichées sous forme
d'objets 3D ajoutés à la scène. Deux affichages ont été testés.



\subsection{Les \emph{viewports}\label{viewport}}
\paragraph{}
Les \emph{viewports} sont les affichages les plus simples : ils représentent
une caméra, avec son centre optique et son plan image.
\begin{figure}[H]
    \centering
    \includegraphics[scale=0.275]{img/new/01.png}
    \caption{Une recommandation \emph{viewport}}
\end{figure}
Cette façon d'afficher une recommandation a l'avantage d'être simple, de ne pas
beaucoup masquer le reste des modèles et suggère assez bien l'idée d'un
\emph{point de vue recommandé}, mais elle a l'inconvénient d'être ambiguë à
cause de la perspective (dans cette image, il peut être difficile de savoir si
le point de vue est dirigée vers le modèle ou vers nous).
% TODO pas clair pou non spécialiste en vision


\subsection{Les flèches\label{arrow}}
\subsubsection{Principe}
Les flèches sont supposées être plus intuitives pour un utilisateur qui n'a pas
l'habitude des \emph{viewports} précédemment utilisés. Plutôt que de suggérer
un point de vue, elles suggèrent le mouvemement qui va mener à ce point de vue.
\begin{figure}[H]
    \centering
    \includegraphics[scale=0.275]{img/new/02.png}
    \caption{Une recommandation flèche}
\end{figure}

\subsubsection{Courbure de la flèche}
Pour le dessin des flèches, plusieurs choses sont à prendre en compte :
\begin{itemize}
    \item il faut éviter que la flèche soit trop \emph{présente} à l'écran et
        qu'elle occulte trop le reste de la scène
    \item il faut que la flèche soit dans un plan qui ne soit pas orthogonal au
        plan image de la caméra. En effet, si la flèche est dans un plan
        orthogonal au plan image de la caméra, elle se projettera comme un
        segment et on ne pourra pas voir la courbure de la flèche.
\end{itemize}

\paragraph{}
Pour trouver la courbure de la flèche, nous posons $C$ le centre de la caméra,
$R$ le centre de la recommandation, et $R'$ le vecteur qui donne la direction
de la recommandation. Nous cherchons ensuite un polynôme
$$
\begin{array}{lcccl}
    f & : & [0,1] & \rightarrow & \mathbb{R}^3 \\
      && t & \mapsto & (x,y,z)
\end{array}
\quad\quad \text{tel que}\quad\quad
\left\{\begin{array}{lcl}
    f(0) & = & C \\
    f(1) & = & R \\
    f'(1) & = & \lambda R' \text{ avec } \lambda \in \mathbb{R}^{+}
\end{array}\right.$$

\paragraph{}
Le problème de ce polynôme est qu'il ne vérifie aucune des contraintes énoncées
précédemment : puisque $f(0) = C$, le bout de la flèche est dans la caméra, et
va donc masquer toute la scène, et la courbe va en plus se projeter sur une
ligne sur l'écran.

\paragraph{}
Pour solutionner le premier problème, nous nous contenterons d'afficher
seulement la flèche pour des valeurs du paramètres $t \in [0.5, 1]$
(c'est-à-dire qu'on n'affichera que la moitié de la flèche la plus lointaine de
la caméra).

\paragraph{}
Pour solutionner le deuxième problème, nous allons translater le centre de la
caméra vers le bas et le côté de la direction de la recommandation, pour
accentuer la courbure de la flèche, et nous résolvons plutôt le système suivant
:
$$\left\{\begin{array}{lcl}
    f(0) & = & C - e_z + \lambda R' \\
    f(1) & = & R \\
    f'(1) & = & \lambda R'
\end{array}\right. \quad\quad\text{avec}\quad\lambda\in\mathbb{R}^+$$

\subsection{Les interactions}
\subsubsection{Au survol}
\indent Cette fonctionnalité est inspirée des récents lecteurs vidéo sur le
web.  Lorsque l'on regarde une vidéo, on a la barre de \emph{seeking} en bas et
passer le curseur sur cette barre affiche l'image de la vidéo à l'instant visé.
Nous avons simplement adapté cette technique à nos recommandations : lorsque le
curseur survole une recommandation, une prévisualisation est affichée dans un
petit rectangle au voisinage du curseur.

\begin{figure}[H]
    \centering
    \begin{subfigure}[b]{0.45\textwidth}
        \centering
        \includegraphics[scale=0.2]{img/new/youtube.png}
        \caption{Une prévisualisation sur Youtube}
    \end{subfigure}
    ~
    \begin{subfigure}[b]{0.45\textwidth}
        \centering
        \includegraphics[scale=0.16]{img/new/03.png}
        \caption{Une prévisualisation dans notre système}
    \end{subfigure}
\end{figure}

\subsubsection{Au clic}
\indent Lors d'un clic sur une recommandation, la caméra suit un mouvement
fluide jusqu'au point de vue recommandé. La trajectoire est définie par un
polynôme interpolant tel que :
\begin{itemize}
    \item la position initiale est la position de la caméra
    \item la position finale est la position de la recommandation
    \item la dérivée de la trajectoire à l'instant final est la direction de la
        recommandation
\end{itemize}

\paragraph{}
Ce mouvement fluide est là pour ne pas dérouter l'utilisateur qui pourrait
\emph{se perdre} si jamais il était téléporté.

\paragraph{}
De plus, les recommandations se comportent comme des liens hypertextes : elles
sont bleues si elles n'ont jamais été cliquées, et deviennent violettes si
l'utilisateur les a déjà consommées. Ceci est fait pour qu'un utilisateur
puisse savoir par où il est passé, et ce qui lui reste encore à visiter.

\newpage
\section{Autres éléments de navigation}
\paragraph{}
Pour faciliter la navigation, quelques autres éléments de navigation sont
présents.

\begin{figure}[H]
    \centering
    \begin{tikzpicture}[]
        \node (myfirstpic) at (0,0) {\includegraphics[scale=0.35]{img/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\label{interface-schema}}
\end{figure}


\paragraph{}
\begin{enumerate}

    \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.

    \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.

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

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

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

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

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

\end{enumerate}