Commit

rapport/rapport.tex

@@ -38,10 +38,12 @@
 \newcommand{\hsp}{\hspace{20pt}}
 \newcommand{\HRule}{\rule{\linewidth}{0.5mm}}
 \fancyfoot[RO]{\thepage/\pageref*{end}}
-\fancyfoot[C]{Juin 2014 --- Juillet 2014}
+\fancyfoot[C]{Mars 2015 --- Septembre 2015}
 \fancyfoot[L]{\emph{Rapport de stage}}
 
 \lstset{columns=fixed,basewidth=.5em,}
+\newcommand{\hsc}[1]{{\Large\MakeUppercase{#1}}}
+\newcommand{\hscs}[1]{{\footnotesize\MakeUppercase{#1}}}
 
 \begin{document}
 
@@ -49,7 +51,7 @@
     \begin{sffamily}
         \begin{center}
             ~\\[2cm]
-            \textsc{\LARGE Rapport de Stage de 3A}\\[3cm]
+            \LARGE R\hsc{apport de Stage de 3A}\\[3cm]
 
             % Title
             \HRule \\[0.4cm]
@@ -64,13 +66,13 @@
             % Author and supervisor
             \begin{minipage}{0.4\textwidth}
                 \begin{flushleft} \large
-                    Thomas \textsc{Forgione}\\
+                    Thomas F\hscs{orgione}\\
                     3IN\\
                 \end{flushleft}
             \end{minipage}
             \begin{minipage}{0.4\textwidth}
                 \begin{flushright} \large
-                    \emph{Tuteur :} M. Vincent \textsc{Charvillat}
+                    \emph{Tuteur :} M. Vincent C\hscs{harvillat}
                 \end{flushright}
             \end{minipage}
 
@@ -84,12 +86,152 @@
     \end{sffamily}
 \end{titlepage}
 
+\normalsize
 \tableofcontents
 \newpage
 
 \section*{Introduction}
 
-\section*{Travaux préliminaires}
+\section{Choix des technologies et prise en main}
+\paragraph{}
+La première phase de stage était de choisir les technologies qui allaient être
+utilisées par la suite. Nous cherchions des technologies permettant la
+visualisation 3D sur un navigateur web afin de pouvoir faire une étude
+utilisateur simplement.
 
+\subsection{Côté client}
+\paragraph{}
+Pour le côté client, il y avait plusieurs possibilités :
+\begin{itemize}
+    \item WebGL, la spécification des fonctions permettant la 3D dans le navigateur
+    \item Une librairie facilitant l'utilisation de WebGL
+    \item Du code C++ compilé en JavaScript grâce à Emscripten
+    \item N'importe quel moteur graphique qui puisse exporter vers JavaScript
+\end{itemize}
+
+\paragraph{}
+La plupart des moteurs graphiques exportant vers JavaScript sont putôt lourd à
+prendre en main, et nous voulions garder des solutions simples, c'est pourquoi
+nous avons utilisé une librairie libre nommée Three.js permettant une
+utilisation facile de WebGL.
+
+\subsection{Côté serveur}
+\paragraph{}
+Dans un premier temps, seul le côté client était pris en compte. Les programmes
+étaient écrits en JavaScript et ne nécessitaient pas de serveur. Quand les
+problématiques de dynamicité sont arrivées, il a fallu choisir une technologie
+pour le côté serveur, et là, tous les langages étaient possibles.
+
+\paragraph{}
+Plusieurs langages et framework ont été téstés. Quand les problématiques
+étaient encore simples (passage d'un paramètre dans une requête), on a commencé
+par utiliser le php, puis on s'est tourné vers des scripts CGI en python. Quand
+de plus nombreuses pages ont été nécessaires, on a commencé à chercher un vrai
+framework, et on s'est penché sur Django (framework web pour Python) qui est
+très pratique mais assez coûteux en mémoire vive (le serveur était alors
+herbergé sur une petite machine de 512Mo de RAM).
+
+\paragraph{}
+Quand les problématiques de streaming ont commencé à apparaître, nous avons
+choisi la simplicité en utilisant Node.js pour le côté serveur (un serveur
+écrit en JavaScript) à cause de la présence d'une librairie nommée Socket.io
+qui s'avère très pratique pour la communication entre le client et le serveur.
+Pour des raisons pratiques, le serveur a été herbergé sur un cloud gratuit
+(OpenShift).
+
+\subsection{Base de données}
+\paragraph{}
+Pour le système de gestion de base de données, nous avons choisi Postgres (qui
+est libre et qui a largement fait ses preuves). OpenShift propose d'héberger
+lui-même la base de données, mais la version gratuite ne proposant qu'1 Go
+d'espace de stockage, nous avons préféré l'héberger nous-même.
+
+\newpage
+\section{Une première interface}
+\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}
+
+\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}}
+\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.3]{img/wiki/09.png}
+    \caption{Une recommendation \emph{viewport}}
+\end{figure}
+
+\subsection{Les flèches}
+\paragraph{}
+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.3]{img/wiki/06.png}
+    \caption{Des recommendations flèches}
+\end{figure}
+
+\subsection{Les interactions}
+\subsubsection{Au survol}
+\paragraph{}
+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 recommendations : lorsque
+le curseur survole une recommendation, une prévisualisation est affichée dans
+une petite boite au voisinage du curseur.
+\begin{figure}[H]
+    \centering
+    \includegraphics[scale=0.3]{img/wiki/07.png}
+    \caption{Une prévisualisation}
+\end{figure}
+
+\newpage
+\section{L'étude utilisateur}
+\paragraph{}
+Pour tester le comportement des utilisateurs face aux recommendations, nous
+avons dissimulé des pièces rouges à travers ces modèles, et nous avons demandé
+à des utilisateurs de les trouver.
+\begin{figure}[H]
+    \centering
+    \includegraphics[scale=0.3]{img/wiki/10.png}
+    \caption{Trois pièces rouges}
+\end{figure}
+
+\paragraph{}
+Pour éviter la dépendance entre les recomendations et les pièces rouges (si les
+recommendations visent les pièces rouges, il est évident qu'il sera très facile
+de les trouver avec les recommendations), un système de tirage aléatoire de
+pièces rouges a été fait.
+
+\paragraph{}
+
+\newpage
+\section{Streaming de modèle 3D}
+
+\newpage
+\section*{Conclusion}
 
 \label{end}\end{document}

slides/main.tex

@@ -210,8 +210,8 @@
 \begin{frame}
     \footnotesize
     \begin{itemize}
-        \item Github : \url{http://github.com/tforgione/tforgione.github.io/}
+        \item Github : \url{http://github.com/tforgione/3dinterface/}
-        \item Wiki : \url{http://github.com/tforgione/tforgione.github.io/wiki/}
+        \item Wiki : \url{http://github.com/tforgione/3dinterface/wiki/}
         \item Demo : \url{http://3dinterface.no-ip.org/prototype/}
     \end{itemize}
 \end{frame}