diff --git a/rapport/img/slides/01.png b/rapport/img/slides/01.png
new file mode 100644
index 0000000..e66abb8
Binary files /dev/null and b/rapport/img/slides/01.png differ
diff --git a/rapport/img/slides/02.png b/rapport/img/slides/02.png
new file mode 100644
index 0000000..c239266
Binary files /dev/null and b/rapport/img/slides/02.png differ
diff --git a/rapport/img/slides/03.png b/rapport/img/slides/03.png
new file mode 100644
index 0000000..2b32b0c
Binary files /dev/null and b/rapport/img/slides/03.png differ
diff --git a/rapport/img/slides/04.png b/rapport/img/slides/04.png
new file mode 100644
index 0000000..d774edc
Binary files /dev/null and b/rapport/img/slides/04.png differ
diff --git a/rapport/img/slides/05.png b/rapport/img/slides/05.png
new file mode 100644
index 0000000..21e65b5
Binary files /dev/null and b/rapport/img/slides/05.png differ
diff --git a/rapport/img/slides/06.png b/rapport/img/slides/06.png
new file mode 100644
index 0000000..c475399
Binary files /dev/null and b/rapport/img/slides/06.png differ
diff --git a/rapport/img/slides/07.png b/rapport/img/slides/07.png
new file mode 100644
index 0000000..76c7414
Binary files /dev/null and b/rapport/img/slides/07.png differ
diff --git a/rapport/img/slides/08.png b/rapport/img/slides/08.png
new file mode 100644
index 0000000..79f07a0
Binary files /dev/null and b/rapport/img/slides/08.png differ
diff --git a/rapport/img/slides/09.png b/rapport/img/slides/09.png
new file mode 100644
index 0000000..0d48deb
Binary files /dev/null and b/rapport/img/slides/09.png differ
diff --git a/rapport/img/slides/10.png b/rapport/img/slides/10.png
new file mode 100644
index 0000000..6ab4f82
Binary files /dev/null and b/rapport/img/slides/10.png differ
diff --git a/rapport/img/slides/11.png b/rapport/img/slides/11.png
new file mode 100644
index 0000000..f68a447
Binary files /dev/null and b/rapport/img/slides/11.png differ
diff --git a/rapport/img/slides/12.png b/rapport/img/slides/12.png
new file mode 100644
index 0000000..d63f05c
Binary files /dev/null and b/rapport/img/slides/12.png differ
diff --git a/rapport/img/slides/13.png b/rapport/img/slides/13.png
new file mode 100644
index 0000000..dd3e4a6
Binary files /dev/null and b/rapport/img/slides/13.png differ
diff --git a/rapport/img/slides/14.png b/rapport/img/slides/14.png
new file mode 100644
index 0000000..39c2eb5
Binary files /dev/null and b/rapport/img/slides/14.png differ
diff --git a/rapport/img/slides/15.png b/rapport/img/slides/15.png
new file mode 100644
index 0000000..7e62d09
Binary files /dev/null and b/rapport/img/slides/15.png differ
diff --git a/rapport/img/slides/16.png b/rapport/img/slides/16.png
new file mode 100644
index 0000000..bb2eb7e
Binary files /dev/null and b/rapport/img/slides/16.png differ
diff --git a/rapport/img/slides/17.png b/rapport/img/slides/17.png
new file mode 100644
index 0000000..eb06f6d
Binary files /dev/null and b/rapport/img/slides/17.png differ
diff --git a/rapport/img/slides/18.png b/rapport/img/slides/18.png
new file mode 100644
index 0000000..9be3527
Binary files /dev/null and b/rapport/img/slides/18.png differ
diff --git a/rapport/img/slides/19.png b/rapport/img/slides/19.png
new file mode 100644
index 0000000..6874bd6
Binary files /dev/null and b/rapport/img/slides/19.png differ
diff --git a/rapport/img/wiki/01.png b/rapport/img/wiki/01.png
new file mode 100644
index 0000000..21a4d66
Binary files /dev/null and b/rapport/img/wiki/01.png differ
diff --git a/rapport/img/wiki/02.png b/rapport/img/wiki/02.png
new file mode 100644
index 0000000..cd8e289
Binary files /dev/null and b/rapport/img/wiki/02.png differ
diff --git a/rapport/img/wiki/03.png b/rapport/img/wiki/03.png
new file mode 100644
index 0000000..fe5d7b4
Binary files /dev/null and b/rapport/img/wiki/03.png differ
diff --git a/rapport/img/wiki/04.png b/rapport/img/wiki/04.png
new file mode 100644
index 0000000..8d70212
Binary files /dev/null and b/rapport/img/wiki/04.png differ
diff --git a/rapport/img/wiki/05.png b/rapport/img/wiki/05.png
new file mode 100644
index 0000000..7677b41
Binary files /dev/null and b/rapport/img/wiki/05.png differ
diff --git a/rapport/img/wiki/06.png b/rapport/img/wiki/06.png
new file mode 100644
index 0000000..e8370d3
Binary files /dev/null and b/rapport/img/wiki/06.png differ
diff --git a/rapport/img/wiki/07.png b/rapport/img/wiki/07.png
new file mode 100644
index 0000000..26e7e4b
Binary files /dev/null and b/rapport/img/wiki/07.png differ
diff --git a/rapport/img/wiki/08.png b/rapport/img/wiki/08.png
new file mode 100644
index 0000000..8a35b95
Binary files /dev/null and b/rapport/img/wiki/08.png differ
diff --git a/rapport/img/wiki/09.png b/rapport/img/wiki/09.png
new file mode 100644
index 0000000..c09139e
Binary files /dev/null and b/rapport/img/wiki/09.png differ
diff --git a/rapport/img/wiki/10.png b/rapport/img/wiki/10.png
new file mode 100644
index 0000000..6874bd6
Binary files /dev/null and b/rapport/img/wiki/10.png differ
diff --git a/rapport/rapport.tex b/rapport/rapport.tex
index f2843d0..946c0d0 100644
--- a/rapport/rapport.tex
+++ b/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}
diff --git a/slides/main.tex b/slides/main.tex
index 2627165..227dd70 100644
--- a/slides/main.tex
+++ b/slides/main.tex
@@ -210,8 +210,8 @@
 \begin{frame}
     \footnotesize
     \begin{itemize}
-        \item Github : \url{http://github.com/tforgione/tforgione.github.io/}
-        \item Wiki : \url{http://github.com/tforgione/tforgione.github.io/wiki/}
+        \item Github : \url{http://github.com/tforgione/3dinterface/}
+        \item Wiki : \url{http://github.com/tforgione/3dinterface/wiki/}
         \item Demo : \url{http://3dinterface.no-ip.org/prototype/}
     \end{itemize}
 \end{frame}