245 lines
8.6 KiB
TeX
245 lines
8.6 KiB
TeX
\documentclass{scrartcl}
|
|
\usepackage[utf8x]{inputenc}
|
|
\usepackage[frenchb]{babel}
|
|
\usepackage{amssymb}
|
|
\usepackage{lmodern}
|
|
\usepackage[T1]{fontenc}
|
|
\usepackage{verbatim}
|
|
\usepackage{ucs}
|
|
\usepackage{graphicx}
|
|
\usepackage{amsmath}
|
|
\usepackage{multicol}
|
|
\usepackage[hidelinks]{hyperref}
|
|
\usepackage{cpp}
|
|
\usepackage{tikz}
|
|
\usepackage{pgfplots}
|
|
\usepackage{subcaption}
|
|
\lstset{language=matlab}
|
|
|
|
\setlength{\hoffset}{-18pt}
|
|
\setlength{\oddsidemargin}{0pt} % Marge gauche sur pages impaires
|
|
\setlength{\evensidemargin}{9pt} % Marge gauche sur pages paires
|
|
\setlength{\marginparwidth}{54pt} % Largeur de note dans la marge
|
|
\setlength{\textwidth}{481pt} % Largeur de la zone de texte (17cm)
|
|
\setlength{\voffset}{-18pt} % Bon pour DOS
|
|
\setlength{\marginparsep}{7pt} % Séparation de la marge
|
|
\setlength{\topmargin}{0pt} % Pas de marge en haut
|
|
\setlength{\headheight}{13pt} % Haut de page
|
|
\setlength{\headsep}{10pt} % Entre le haut de page et le texte
|
|
\setlength{\footskip}{27pt} % Bas de page + séparation
|
|
\setlength{\textheight}{708pt} % Hauteur de la zone de texte (25cm)
|
|
|
|
\usepackage{titling}
|
|
\usepackage{fancyhdr}
|
|
\pagestyle{fancy}
|
|
\renewcommand{\headrulewidth}{1pt}
|
|
\renewcommand{\footrulewidth}{\headrulewidth}
|
|
\usepackage{float}
|
|
\newcommand{\hsp}{\hspace{20pt}}
|
|
\newcommand{\HRule}{\rule{\linewidth}{0.5mm}}
|
|
\fancyfoot[RO]{\thepage/\pageref*{end}}
|
|
\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}
|
|
|
|
\begin{titlepage}
|
|
\begin{sffamily}
|
|
\begin{center}
|
|
~\\[2cm]
|
|
\LARGE R\hsc{apport de Stage de 3A}\\[3cm]
|
|
|
|
% Title
|
|
\HRule \\[0.4cm]
|
|
{ \huge \bfseries Prédiction du comportement des utilisateurs d'une
|
|
application interactive en 3D \\[0.4cm] }
|
|
|
|
\HRule \\[3cm]
|
|
|
|
\includegraphics[scale=0.5]{img/icons/n7.png}~\\[4cm]
|
|
|
|
|
|
% Author and supervisor
|
|
\begin{minipage}{0.4\textwidth}
|
|
\begin{flushleft} \large
|
|
Thomas F\hscs{orgione}\\
|
|
3IN\\
|
|
\end{flushleft}
|
|
\end{minipage}
|
|
\begin{minipage}{0.4\textwidth}
|
|
\begin{flushright} \large
|
|
\emph{Tuteur :} M. Vincent C\hscs{harvillat}
|
|
\end{flushright}
|
|
\end{minipage}
|
|
|
|
\vfill
|
|
|
|
% Bottom of the page
|
|
{\large 16 Mars 2015 --- 25 Septembre 2015}
|
|
|
|
|
|
\end{center}
|
|
\end{sffamily}
|
|
\end{titlepage}
|
|
|
|
\normalsize
|
|
\tableofcontents
|
|
\newpage
|
|
|
|
\section*{Introduction}
|
|
|
|
\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}
|
|
|
|
\subsubsection{Au click}
|
|
Hello
|
|
|
|
\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}
|