433 lines
14 KiB
TeX
433 lines
14 KiB
TeX
% 16:9 version
|
|
% \documentclass[aspectratio=169]{beamer}
|
|
\newcommand{\bigscale}{0.16}
|
|
\newcommand{\smallscale}{0.16}
|
|
|
|
% 4:3 version
|
|
\documentclass{beamer}
|
|
% \newcommand{\bigscale}{0.175}
|
|
% \newcommand{\smallscale}{0.125}
|
|
|
|
\RequirePackage{ifthen}
|
|
|
|
\usepackage[utf8]{inputenc}
|
|
\usepackage[frenchb]{babel}
|
|
\usepackage{hyperref}
|
|
\usepackage[T1]{fontenc}
|
|
\usepackage{multicol}
|
|
\usepackage{lmodern}
|
|
\usepackage{vwcol}
|
|
\usepackage{pgfpages}
|
|
\usepackage{hyperref}
|
|
\usepackage{tikz}
|
|
\usepackage{appendixnumberbeamer}
|
|
\usepackage{mwe}
|
|
|
|
\newboolean{sectiontoc}
|
|
\setboolean{sectiontoc}{true}
|
|
|
|
\setbeameroption{show notes}
|
|
\setbeameroption{show notes on second screen=right}
|
|
|
|
\usetheme{JuanLesPins} % or try Darmstadt, Madrid, Warsaw, ...
|
|
\setbeamertemplate{navigation symbols}{}
|
|
|
|
\newcommand{\tikzvline}[2]{
|
|
\draw (#1,-6) -- (#1,-5.5);
|
|
\draw (#1,-6) node[below]{#2};
|
|
}
|
|
|
|
\graphicspath{{../img/}}
|
|
|
|
\title[Navigation 3D et recommandations]{Systèmes de navigation 3D \\ et mécanismes de recommandation}
|
|
\author{Thomas Forgione}
|
|
\date{\today}
|
|
\defbeamertemplate*{footline}{shadow theme}
|
|
{%
|
|
\leavevmode%
|
|
\hbox{\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm plus1fil,rightskip=.3cm]{author in head/foot}%
|
|
\usebeamerfont{author in head/foot}\hfill\insertshortauthor
|
|
\
|
|
\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}IRIT --- VORTEX\hfill\insertframenumber\,/\,\inserttotalframenumber%
|
|
\end{beamercolorbox}}%
|
|
\vskip0pt%
|
|
}
|
|
|
|
\usepackage{nameref}
|
|
\makeatletter
|
|
\newcommand*{\currentname}{\@currentlabelname}
|
|
\makeatother
|
|
|
|
\AtBeginSection[] % Do nothing for \section*
|
|
{
|
|
\ifthenelse{\boolean{sectiontoc}}{
|
|
\begin{frame}<beamer>
|
|
\tableofcontents[currentsection]
|
|
\end{frame}
|
|
}
|
|
}
|
|
\makeatletter
|
|
\defbeamertemplate*{note page}{mynotes}
|
|
{%
|
|
{%
|
|
\scriptsize
|
|
\usebeamerfont{note title}\usebeamercolor[fg]{note title}%
|
|
\ifbeamercolorempty[bg]{note title}{}{%
|
|
\insertvrule{.45\paperheight}{note title.bg}%
|
|
\vskip-.45\paperheight%
|
|
\nointerlineskip%
|
|
}%
|
|
\vbox{
|
|
\hfill\insertslideintonotes{0.45}\hskip-\Gm@rmargin\hskip0pt%
|
|
\vskip-0.45\paperheight%
|
|
\nointerlineskip
|
|
\begin{pgfpicture}{0cm}{0cm}{0cm}{0cm}
|
|
\begin{pgflowlevelscope}{\pgftransformrotate{90}}
|
|
{\pgftransformshift{\pgfpoint{-2cm}{0.2cm}}%
|
|
\pgftext[base,left]{\usebeamerfont{note date}\usebeamercolor[fg]{note date}\the\year-\ifnum\month<10\relax0\fi\the\month-\ifnum\day<10\relax0\fi\the\day}}
|
|
\end{pgflowlevelscope}
|
|
\end{pgfpicture}}
|
|
\nointerlineskip
|
|
\vbox to .45\paperheight{\vskip0.5em
|
|
\hbox{\insertshorttitle[width=8cm]}%
|
|
\setbox\beamer@tempbox=\hbox{\insertsection}%
|
|
\hbox{\ifdim\wd\beamer@tempbox>1pt{\hskip4pt\raise3pt\hbox{\vrule
|
|
width0.4pt height7pt\vrule width 9pt
|
|
height0.4pt}}\hskip1pt\hbox{\begin{minipage}[t]{7.5cm}\def\breakhere{}\insertsection\end{minipage}}\fi%
|
|
}%
|
|
\setbox\beamer@tempbox=\hbox{\insertsubsection}%
|
|
\hbox{\ifdim\wd\beamer@tempbox>1pt{\hskip17.4pt\raise3pt\hbox{\vrule
|
|
width0.4pt height7pt\vrule width 9pt
|
|
height0.4pt}}\hskip1pt\hbox{\begin{minipage}[t]{7.5cm}\def\breakhere{}\insertsubsection\end{minipage}}\fi%
|
|
}%
|
|
\setbox\beamer@tempbox=\hbox{\insertshortframetitle}%
|
|
\hbox{\ifdim\wd\beamer@tempbox>1pt{\hskip30.8pt\raise3pt\hbox{\vrule
|
|
width0.4pt height7pt\vrule width 9pt
|
|
height0.4pt}}\hskip1pt\hbox{\insertshortframetitle[width=7cm]}\fi%
|
|
}%
|
|
\vfil}%
|
|
}%
|
|
\ifbeamercolorempty[bg]{note page}{}{%
|
|
\nointerlineskip%
|
|
\insertvrule{.55\paperheight}{note page.bg}%
|
|
\vskip-.55\paperheight%
|
|
}%
|
|
\vskip.25em
|
|
\nointerlineskip
|
|
\insertnote
|
|
}
|
|
\makeatother
|
|
|
|
\begin{document}
|
|
\begin{frame}
|
|
\titlepage
|
|
\end{frame}
|
|
|
|
\begin{frame}
|
|
\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{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}
|
|
\begin{frame}
|
|
\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}
|
|
\subsection{Interface de base}
|
|
\begin{frame}
|
|
\begin{itemize}
|
|
\item Interaction de type jeux vidéo \newline
|
|
\begin{figure}
|
|
\centering
|
|
\includegraphics[scale=0.25]{wiki/spheric.png}
|
|
\caption{Paramètres du contrôleur}
|
|
\end{figure}
|
|
\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}
|
|
|
|
|
|
\subsection{Recommandations}
|
|
\begin{frame}
|
|
\frametitle{\emph{Viewport}}
|
|
\begin{figure}
|
|
\includegraphics[scale=0.2]{new/01.png}
|
|
\caption{Une recommandation \emph{viewport}}
|
|
\end{figure}
|
|
\note[item]{Une recommandations est une point de vue suggéré}
|
|
\end{frame}
|
|
|
|
\begin{frame}
|
|
\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}
|
|
|
|
\subsection{Prévisualisation}
|
|
\begin{frame}
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[scale=0.3]{new/interface2.png}
|
|
~
|
|
\includegraphics[scale=0.15]{new/03.png}
|
|
\caption{Des prévisualisations sur différentes interfaces}
|
|
\end{figure}
|
|
\end{frame}
|
|
|
|
\subsection{Interface complète}
|
|
\begin{frame}
|
|
\begin{figure}[H]
|
|
\scalebox{.5}{\parbox{2\linewidth}{%
|
|
\centering
|
|
\begin{tikzpicture}[]
|
|
\node (myfirstpic) at (0,0) {\includegraphics[scale=0.35]{new/buttons.png}};
|
|
\tikzvline{-7}{1}
|
|
\tikzvline{-5.8}{2}
|
|
\tikzvline{-5.2}{3}
|
|
\tikzvline{-4}{4}
|
|
\tikzvline{-1.5}{5}
|
|
|
|
\draw (8,5) -- (7,5);
|
|
\draw (8,5) node[right]{6};
|
|
|
|
\draw (-8,5) -- (-7,5);
|
|
\draw (-8,5) node[left]{7};
|
|
\end{tikzpicture}
|
|
}}
|
|
\caption{Les différents éléments de l'interface}
|
|
\end{figure}
|
|
|
|
\note[item]{ \emph{Reset camera} : pour chaque scène, une position initiale est
|
|
définie. Cliquer sur ce bouton ramène la caméra à sa position initiale.}
|
|
|
|
\note[item]{ \emph{Undo} : à chaque clic sur une recommandation, les positions
|
|
intiale et finale sont sauvegardées. Cliquer sur ce bouton ramène à
|
|
la position précédente.}
|
|
|
|
\note[item]{ \emph{Redo} : cliquer sur ce bouton ramène à la position suivante.}
|
|
|
|
\note[item]{ \emph{Pointer lock} : permet de passer du mode \emph{pointer-lock} au
|
|
mode \emph{drag-n-drop} et vice-versa.}
|
|
|
|
\note[item]{ \emph{Music} : un lecteur qui contrôle une petite musique qui permet
|
|
de se mettre dans l'ambiance de la scène.}
|
|
|
|
\note[item]{ \emph{Coin gauge} : une jauge qui représente l'avancement de la
|
|
récupération des pièces.}
|
|
|
|
\note[item]{ \emph{FPS counter} : indique la période de rafraîchissement du rendu.}
|
|
|
|
\end{frame}
|
|
|
|
\section{Test de l'interface}
|
|
|
|
\subsection{Principe du test}
|
|
\begin{frame}
|
|
Chercher des pièces dans une scène :
|
|
\begin{enumerate}
|
|
\item Un formulaire (âge, 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.15cm]
|
|
|
|
Sauvegarde complète des interactions de l'utilisateur :
|
|
\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}
|
|
|
|
~\\[0.15cm]
|
|
\url{http://3dinterface.no-ip.org/intro/}
|
|
|
|
\note[item]{Exp différentes : scènes différentes, et styles de reco différents}
|
|
\note[item]{Habitude en terme de jeux video $\Longrightarrow$ bonne capacité à naviguer}
|
|
\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 les recommandations
|
|
\item Minimiser les paramètres variables pour faire des comparaisons
|
|
\end{itemize}
|
|
\end{block}
|
|
\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}
|
|
\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[dashed, ->] (-0.1,-3) -- (-0.1,-4);
|
|
|
|
\pause
|
|
\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};
|
|
\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}
|
|
\note[item]{Faire la démo en stream progressif (bouge la cam)}
|
|
\end{frame}
|
|
|
|
\setboolean{sectiontoc}{false}
|
|
|
|
\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}
|