280 lines
10 KiB
TeX
280 lines
10 KiB
TeX
\mypart{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]{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]{wiki/04.png}
|
|
\caption{Vers le haut ($\delta \nearrow$)}
|
|
\end{subfigure}
|
|
\\
|
|
\begin{subfigure}[b]{0.3\textwidth}
|
|
\centering
|
|
\includegraphics[scale=0.12]{wiki/03.png}
|
|
\caption{Vers la gauche ($\theta \searrow$)}
|
|
\end{subfigure}
|
|
~
|
|
\begin{subfigure}[b]{0.3\textwidth}
|
|
\centering
|
|
\includegraphics[scale=0.12]{wiki/01.png}
|
|
\caption{Angle initial}
|
|
\end{subfigure}
|
|
~
|
|
\begin{subfigure}[b]{0.3\textwidth}
|
|
\centering
|
|
\includegraphics[scale=0.12]{wiki/02.png}
|
|
\caption{Vers la droite ($\theta \nearrow$)}
|
|
\end{subfigure}
|
|
\\
|
|
\begin{subfigure}[b]{0.3\textwidth}
|
|
\centering
|
|
\includegraphics[scale=0.12]{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]{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é 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]{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$, l'extrémité 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]{new/youtube.png}
|
|
\caption{Une prévisualisation sur Youtube}
|
|
\end{subfigure}
|
|
~
|
|
\begin{subfigure}[b]{0.45\textwidth}
|
|
\centering
|
|
\includegraphics[scale=0.18]{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]{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}
|
|
|
|
|
|
|