189 lines
7.1 KiB
TeX
189 lines
7.1 KiB
TeX
|
\part{L'interface}
|
||
|
|
\section{Interactions élémentaires}
|
||
|
|
\paragraph{}
|
||
|
|
La première interface a été pensée pour être la plus simple possible.
|
||
|
|
L'utilisateur contrôle une caméra qui se déplace librement dans un modèle 3D.
|
||
|
|
|
||
|
|
\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).
|
||
|
|
|
||
|
|
\paragraph{}
|
||
|
|
On peut pivoter la caméra 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
|
||
|
|
\item via la souris, en mode \emph{pointer-lock}, comme dans un jeu video
|
||
|
|
de tir
|
||
|
|
\end{itemize}
|
||
|
|
|
||
|
|
|
||
|
|
\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}}
|
||
|
|
\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éniant d'être ambigüe à
|
||
|
|
cause de la perspective (dans cette image, il peut être difficile de savoir si
|
||
|
|
le point de vue et vers le modèle ou vers nous).
|
||
|
|
|
||
|
|
|
||
|
|
\subsection{Les flèches}
|
||
|
|
\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{Des recommandations flèches}
|
||
|
|
\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 obstrue 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 $f$ tel que :
|
||
|
|
$$\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 instants $t \in [0.5, 1]$.
|
||
|
|
|
||
|
|
\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' \text{ avec } \lambda \in \mathbb{R}^{+}
|
||
|
|
\end{array}\right.$$
|
||
|
|
|
||
|
|
\subsection{Les interactions}
|
||
|
|
\subsubsection{Au survol}
|
||
|
|
\indent Cette fonctionnalité est inspirée des récents lecteurs video sur le
|
||
|
|
web. Lorsque l'on regarde une video, 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 techniques à nos recommandations : lorsque
|
||
|
|
le curseur survole une recommandation, une prévisualisation est affichée dans
|
||
|
|
une petite boite au voisinage du curseur.
|
||
|
|
|
||
|
|
\begin{figure}[H]
|
||
|
|
\centering
|
||
|
|
\includegraphics[scale=0.275]{img/new/03.png}
|
||
|
|
\caption{Une prévisualisation}
|
||
|
|
\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éfinié 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 perturber l'utilisateur qui pourrait
|
||
|
|
\emph{se perde} 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é clicé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.
|
||
|
|
|
||
|
|
|
||
|
|
\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}
|
||
|
|
\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
|
||
|
|
intiales et finales 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}
|
||
|
|
|
||
|
|
|
||
|
|
|