tforgione
/
3d-interface-rapport
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Commit

This commit is contained in:
Thomas FORGIONE 2015-09-23 08:57:30 +02:00
parent 113232dc35
commit 97cdd43ccd
2 changed files with 149 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
rapport/userstudy.tex
View File

@ -193,7 +193,5 @@ comme pour le suivi des recommandations lors d'une expérience.
\section{Déploiement}
Pour l'instant, cette étude a été faite par des collègues (étudiants,
chercheurs...), mais nous pensons ensuite le déployer vers une plateforme de
crowd-sourcing (MicroWokers) afin d'avoir plus de résultats à analyser.
\subsection{Analyse des résultats}
% TODO analyser les résultats
crowd-sourcing (MicroWokers) où nous paierons les utilisateurs afin d'avoir
plus de résultats à analyser.

203
slides/main.tex
View File

@ -1,12 +1,14 @@
% 16:9 version
% \documentclass[aspectratio=169]{beamer}
% \newcommand{\bigscale}{0.16}
% \newcommand{\smallscale}{0.16}
\newcommand{\bigscale}{0.16}
\newcommand{\smallscale}{0.16}
% 4:3 version
\documentclass{beamer}
\newcommand{\bigscale}{0.175}
\newcommand{\smallscale}{0.125}
% \newcommand{\bigscale}{0.175}
% \newcommand{\smallscale}{0.125}
\RequirePackage{ifthen}
\usepackage[utf8]{inputenc}
\usepackage[frenchb]{babel}
@ -17,13 +19,18 @@
\usepackage{vwcol}
\usepackage{pgfpages}
\usepackage{hyperref}
% \usepackage{animate}
\usepackage{animate2}
\usepackage{tikz}
\usepackage{multimedia}
\usepackage{media9}
\usepackage{appendixnumberbeamer}
\newboolean{sectiontoc}
\setboolean{sectiontoc}{true}
\setbeameroption{show notes}
\setbeameroption{show notes on second screen=right}
%\setbeameroption{show notes on second screen=right}
\usetheme{JuanLesPins} % or try Darmstadt, Madrid, Warsaw, ...
\setbeamertemplate{navigation symbols}{}
@ -34,8 +41,7 @@
\graphicspath{{../img/}}
%\setbeamertemplate{headline}{}
\title{Interface en 3D et mécanisme de recommandation}
\title[Navigation 3D et recommandations]{Systèmes de navigation 3D et mécanismes de recommandation}
\author{Thomas Forgione}
\date{\today}
\defbeamertemplate*{footline}{shadow theme}
@ -46,7 +52,7 @@
\
\end{beamercolorbox}%
\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm,rightskip=.3cm plus1fil]{title in head/foot}%
\usebeamerfont{title in head/foot}\insertshorttitle\hfill\insertframenumber\,/\,\inserttotalframenumber%
\usebeamerfont{title in head/foot}IRIT --- VORTEX\hfill\insertframenumber\,/\,\inserttotalframenumber%
\end{beamercolorbox}}%
\vskip0pt%
}
@ -58,9 +64,11 @@
\AtBeginSection[] % Do nothing for \section*
{
\begin{frame}<beamer>
\tableofcontents[currentsection]
\end{frame}
\ifthenelse{\boolean{sectiontoc}}{
\begin{frame}<beamer>
\tableofcontents[currentsection]
\end{frame}
}
}
\begin{document}
@ -68,51 +76,79 @@
\titlepage
\end{frame}
\section{Introduction}
\begin{frame}
\frametitle{Contexte}
\centering
\includegraphics[scale=0.2]{icons/IRIT.jpg}\\[0.5cm]
\includegraphics[scale=0.2]{icons/vortex.png}\\[0.5cm]
\includegraphics[scale=0.3]{icons/nus.jpg}
\end{frame}
\begin{frame}
\begin{figure}
\includegraphics[scale=0.2]{new/bureau.jpg}
\caption{Le bureau}
\end{figure}
\end{frame}
\begin{frame}<beamer>
\tableofcontents
\end{frame}
\section{Introduction}
\subsection{Contexte}
\begin{frame}
\begin{figure}
\includegraphics[scale=0.25]{new/youtube.png}
\caption{Une vidéo sur Youtube}
\end{figure}
\end{frame}
\begin{frame}
\begin{figure}
\includegraphics[scale=0.5]{new/interface2.png}
\caption{Une interface avec recommandations}
\caption{Un lecteur vidéo avec recommandations}
\end{figure}
\note{Travaux de Vincent \textsc{Charvillat} et Axel \textsc{Carlier}}
\note[item]{Interface avec recommandations}
\note[item]{Biaiser l'interaction de l'utilisateur pour le rendre prévisible}
\note[item]{Préchargement}
\note[item]{Mettre la première video navigation}
\end{frame}
\section{Technologies utilisées}
\subsection{Côté serveur}
% \begin{frame}
% NodeJs et certains \emph{packages}
% \begin{itemize}
% \item \texttt{express}
% \item \texttt{jade}
% \item \texttt{pg}
% \item \texttt{body-parser}
% \item \texttt{cookie-parser} et \texttt{cookie-session}
% \item \texttt{socket.io}
% \end{itemize}
%
% \note[item]{express : framework web pour avoir un MVC}
% \note[item]{jade : moteur de template pour gérer les vues de manière sympathiques}
% \note[item]{pg : connection à la base de données}
% \note[item]{body-parser : gérer les paramètres envoyés dans les requêtes}
% \note[item]{cookie-parser et cookie-session : pour avoir une session gérée avec des cookies}
% \note[item]{socket.io : gérer les sockets (et WebSockets facilement)}
%
% \end{frame}
\begin{frame}
NodeJs et certains \emph{packages}
\begin{itemize}
\item \texttt{express}
\item \texttt{jade}
\item \texttt{pg}
\item \texttt{body-parser}
\item \texttt{cookie-parser} et \texttt{cookie-session}
\item \texttt{socket.io}
\end{itemize}
\note[item]{express : framework web pour avoir un MVC}
\note[item]{jade : moteur de template pour gérer les vues de manière sympathiques}
\note[item]{pg : connection à la base de données}
\note[item]{body-parser : gérer les paramètres envoyés dans les requêtes}
\note[item]{cookie-parser et cookie-session : pour avoir une session gérée avec des cookies}
\note[item]{socket.io : gérer les sockets (et WebSockets facilement)}
\end{frame}
\subsection{Côté client}
\begin{frame}
\begin{itemize}
\item HTML5
\item CSS3
\item JavaScript
\item Boostrap
\item WebGL
\item Three.js
\end{itemize}
\begin{figure}
\includegraphics[scale=0.1]{icons/html5.png}~
\includegraphics[scale=0.125]{icons/css3.png}~~~
\includegraphics[scale=0.05]{icons/javascript.png}~
\includegraphics[scale=0.25]{icons/bootstrap.png}\\[0.7cm]
\includegraphics[scale=0.25]{icons/webgl.png}~
\includegraphics[scale=0.3]{icons/threejs.png}\\[0.5cm]
\includegraphics[scale=0.25]{icons/nodejs.png}\quad\quad\quad\quad\quad
\includegraphics[scale=0.25]{icons/socketio.png}~
\end{figure}
\note[item]{Contrainte web pour les tests}
\end{frame}
\section{L'interface}
@ -128,6 +164,10 @@
\item Clavier pour la translation
\item \emph{drag-n-drop} ou \emph{pointer-lock} pour la rotation
\end{itemize}
\note[item]{Faire une démo}
\note[item]{Beaucoup de degré de liberté}
\note[item]{Difficile}
\end{frame}
@ -144,6 +184,7 @@
\frametitle{\emph{Arrow}}
\begin{figure}
\includegraphics[scale=0.2]{new/02.png}
% \animategraphics[autoplay,loop,scale=0.2, controls]{45}{../img/arrowclick/arrowclick}{1}{45}
\caption{Une recommandation \emph{arrow}}
\end{figure}
\end{frame}
@ -224,6 +265,8 @@
\item Pièces récupérées
\item Boutons de l'interface (précédente, suivante, reset...)
\end{itemize}
\note[item]{Exp différentes : scènes différentes, et styles de reco différents}
\end{frame}
\subsection{Tirage des expériences}
@ -235,18 +278,34 @@
\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}
\begin{columns}
\begin{column}{0.5\textwidth}
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{column}
\begin{column}{0.4\textwidth}
\begin{figure}
\includegraphics[scale=0.1]{new/allcoins.png}
\caption{Pièces possibles}
\end{figure}
\end{column}
\end{columns}
\note[item]{Etude utilisateur va bientot etre deployée sur micro workers}
\end{frame}
\setboolean{sectiontoc}{false}
\section{Streaming}
\subsection{Protocole}
\setboolean{sectiontoc}{true}
\begin{frame}
\tableofcontents[currentsection]
\note[item]{Montrer la démo sans bouger la caméra}
\end{frame}
\begin{frame}
\begin{itemize}
@ -276,11 +335,11 @@
\draw[<-] (0,-3) -- (5, -2);
\pause
\draw (2.5,-3.3) node[rotate=-12] {Caméra / \emph{frustum}};
\draw[->] (0,-3) -- (5, -4);
\draw[dashed, ->] (-0.1,-3) -- (-0.1,-4);
\pause
\draw[dashed, ->] (-0.1,-3) -- (-0.1,-4);
\draw (2.5,-3.3) node[rotate=-12] {Caméra / \emph{frustum}};
\draw[->] (0,-3) -- (5, -4);
\pause
\draw (2.5,-4.3) node[rotate=12] {Des éléments};
@ -307,5 +366,37 @@
\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}
\note[item]{Faire la démo en stream progressif (bouge la cam)}
\end{frame}
\setboolean{sectiontoc}{false}
\section*{Conclusion}
\begin{frame}
\end{frame}
\appendix
\begin{frame}
\frametitle{Courbure des flèches}
\begin{block}{Equation des flèches}
$
\begin{array}{lcccl}
P & : & [0,1] & \rightarrow & \mathbb{R}^3 \\
&& t & \mapsto & (x,y,z)
\end{array}$ un polynôme de degré 3 tel que :
$$
\left\{\begin{array}{lcl}
P(0) & = & C -e_z + \lambda R'\\
P(1) & = & R \\
P'(1) & = & \lambda R'
\end{array}\right.\text{ avec } \lambda \in \mathbb{R}^{+}$$
\end{block}
\begin{itemize}
\item $C$ : centre de la caméra
\item $R$ : centre de la recommandation
\item $R'$ : direction de la recommandation
\end{itemize}
\end{frame}
\end{document}