Commit

rapport/Makefile

@@ -5,7 +5,7 @@ TEXC = latexmk -lualatex -output-directory=build
 all: sk build/main.pdf
 
 sk:
-	./sketch/sketch frustum.sk -o build/frustum.tex
+	cd ../common && make
 
 build/main.pdf: main.tex FORCE
 	$(TEXC) -latexoption=-shell-escape $<

rapport/streaming.tex

@@ -215,7 +215,7 @@ apparaissent dans le \emph{frustum}. On évite ainsi d'envoyer les faces du
 modèle qui sont derrière la caméra et que l'utilisateur ne voit pas.
 \begin{figure}[H]
     \centering
-    \include{build/frustum}
+    \include{../common/build/frustum}
     \caption{Le frustum de la camera et différents objets\label{frustum-draw}}
 \end{figure}
 

slides/Makefile

@@ -2,8 +2,13 @@ TEXC = latexmk -lualatex -output-directory=build
 
 .PHONY: FORCE
 
+all: sk build/main.pdf
+
 pdf: build/main.pdf
 
+sk:
+	cd ../common && make
+
 build/%.pdf: %.tex FORCE
 	$(TEXC) -latexoption=-shell-escape $<
 	# cp build/main.pdf build/main.tmp.pdf

slides/main.tex

@@ -16,14 +16,15 @@
 \usepackage{lmodern}
 \usepackage{vwcol}
 \usepackage{pgfpages}
-\usepackage{animate}
+\usepackage{hyperref}
+% \usepackage{animate}
 \usepackage{tikz}
 
 \setbeameroption{show notes}
 \setbeameroption{show notes on second screen=right}
 
 %\setbeameroption{show notes on second screen=right}
-\usetheme{Warsaw}      % or try Darmstadt, Madrid, Warsaw, ...
+\usetheme{JuanLesPins}      % or try Darmstadt, Madrid, Warsaw, ...
 \setbeamertemplate{navigation symbols}{}
 
 \newcommand{\tikzvline}[2]{
@@ -65,7 +66,6 @@
 \begin{document}
 \begin{frame}
   \titlepage
-  \note{Hello}
 \end{frame}
 
 \section{Introduction}
@@ -82,8 +82,8 @@
 \end{frame}
 
 \section{Technologies utilisées}
+\subsection{Côté serveur}
 \begin{frame}
-    \frametitle{Côté serveur}
     NodeJs et certains \emph{packages}
     \begin{itemize}
         \item \texttt{express}
@@ -103,13 +103,13 @@
 
 \end{frame}
 
+\subsection{Côté client}
 \begin{frame}
-    \frametitle{Côté client}
     \begin{itemize}
         \item HTML5
         \item CSS3
-        \item Boostrap
         \item JavaScript
+        \item Boostrap
         \item WebGL
         \item Three.js
     \end{itemize}
@@ -204,7 +204,108 @@
 
         \end{frame}
 
+\section{Test de l'interface}
+
+\subsection{Principe du test}
+\begin{frame}
+    Chercher des pièces dans une scène :\\[0.25cm]
+    \begin{enumerate}
+        \item Un formulaire (age, habitude en terme de jeux vidéo)
+        \item Un didacticiel
+        \item Trois expériences différentes
+        \item Un formulaire final (intérêt des recommandations, préférences)
+    \end{enumerate}
+    ~\\[0.25cm]
+
+    Sauvegarde complète des interactions de l'utilisateur :\\[0.25cm]
+    \begin{itemize}
+        \item Mouvement clavier / souris
+        \item Recommandations (clic ou survol)
+        \item Pièces récupérées
+        \item Boutons de l'interface (précédente, suivante, reset...)
+    \end{itemize}
+\end{frame}
+
+\subsection{Tirage des expériences}
+\begin{frame}
+    \begin{block}{Objectifs}
+        \begin{itemize}
+            \item Tirer des expériences aléatoires
+            \item Eliminer la dépendance entre les pièces et le recommandations
+            \item Minimiser les paramètres variables pour faire des comparaisons
+        \end{itemize}
+    \end{block}
+
+    ~\\[0.5cm]
+    Parmi les paramètres, on a :
+    \begin{itemize}
+        \item Niveau de l'utilisateur
+        \item Scène et combinaison de pièces
+        \item Type de recommandations
+    \end{itemize}
+\end{frame}
 
 \section{Streaming}
+\subsection{Protocole}
 
+\begin{frame}
+    \begin{itemize}
+        \item Communication client-serveur via \texttt{socket.io} (et \texttt{Websocket})
+        \item Modèles sous forme \texttt{.obj} et \texttt{.mtl}
+        \item Streaming orienté faces
+        \item Ajout dynamique des éléments reçus
+        \item Envoi des matériaux au début
+    \end{itemize}
+\end{frame}
+
+\begin{frame}
+    \begin{figure}
+        \centering
+        \begin{tikzpicture}[scale=0.6,every node/.style={scale=0.6}]
+            \draw (0,0) node[above]{Client};
+            \draw (0,0) -- (0,-8);
+            \draw (5,0) node[above]{Serveur};
+            \draw (5,0) -- (5,-8);
+
+            \pause
+            \draw (2.5,-1.3) node[rotate=-12] {Path jusqu'au modèle};
+            \draw[->] (0,-1) -- (5, -2);
+
+            \pause
+            \draw (2.5,-2.3) node[rotate=12] {Liste des matériaux};
+            \draw[<-] (0,-3) -- (5, -2);
+
+            \pause
+            \draw (2.5,-3.3) node[rotate=-12] {Caméra / \emph{frustum}};
+            \draw[->] (0,-3) -- (5, -4);
+
+            \pause
+            \draw[dashed, ->] (-0.1,-3) -- (-0.1,-4);
+
+            \pause
+            \draw (2.5,-4.3) node[rotate=12] {Des éléments};
+            \draw[<-] (0,-5) -- (5, -4);
+
+            \pause
+            \draw (2.5,-5.3) node[rotate=-12] {Caméra / \emph{frustum}};
+            \draw[->] (0,-5) -- (5, -6);
+
+            \pause
+            \draw (2.5,-6.3) node[rotate=12] {D'autres éléments};
+            \draw[<-] (0,-7) -- (5, -6);
+
+            \draw (2.5,-8) node{$\vdots$};
+            \onslide<1->
+        \end{tikzpicture}
+        \caption{Communication client / serveur pour streaming de modèle 3D}
+    \end{figure}
+\end{frame}
+
+\subsection{Frustum}
+\begin{frame}
+    \begin{figure}
+    \scalebox{.8}{\parbox{1.25\linewidth}{\centering\input{../common/build/frustum}}}
+    \caption{Le frustum de la camera et différents objets\label{frustum-draw}}
+    \end{figure}
+\end{frame}
 \end{document}