Slides
This commit is contained in:
Thomas FORGIONE
parent
509741200b
commit
c732342be1
|
|
@ -6,9 +6,9 @@ pdf: build/main.pdf
|
|||
|
||||
build/%.pdf: %.tex FORCE
|
||||
$(TEXC) -latexoption=-shell-escape $<
|
||||
cp build/main.pdf build/main.tmp.pdf
|
||||
gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dNOPAUSE -dQUIET -dBATCH -sOutputFile=build/main.pdf build/main.tmp.pdf
|
||||
rm build/main.tmp.pdf
|
||||
# cp build/main.pdf build/main.tmp.pdf
|
||||
# gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dNOPAUSE -dQUIET -dBATCH -sOutputFile=build/main.pdf build/main.tmp.pdf
|
||||
# rm build/main.tmp.pdf
|
||||
|
||||
clean: FORCE
|
||||
$(TEXC) -c
|
||||
|
|
|
|||
289
slides/main.tex
289
slides/main.tex
|
|
@ -9,7 +9,7 @@
|
|||
\newcommand{\smallscale}{0.125}
|
||||
|
||||
\usepackage[utf8]{inputenc}
|
||||
\usepackage[english]{babel}
|
||||
\usepackage[frenchb]{babel}
|
||||
\usepackage{hyperref}
|
||||
\usepackage[T1]{fontenc}
|
||||
\usepackage{multicol}
|
||||
|
|
@ -17,13 +17,24 @@
|
|||
\usepackage{vwcol}
|
||||
\usepackage{pgfpages}
|
||||
\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, ...
|
||||
\setbeamertemplate{navigation symbols}{}
|
||||
|
||||
\newcommand{\tikzvline}[2]{
|
||||
\draw (#1,-6) -- (#1,-5.5);
|
||||
\draw (#1,-6) node[below]{#2};
|
||||
}
|
||||
|
||||
\graphicspath{{../img/}}
|
||||
|
||||
%\setbeamertemplate{headline}{}
|
||||
\title{3D interface and recommendations}
|
||||
\title{Interface en 3D et mécanisme de recommandation}
|
||||
\author{Thomas Forgione}
|
||||
\date{\today}
|
||||
\defbeamertemplate*{footline}{shadow theme}
|
||||
|
|
@ -47,7 +58,6 @@
|
|||
\AtBeginSection[] % Do nothing for \section*
|
||||
{
|
||||
\begin{frame}<beamer>
|
||||
\frametitle{Outline}
|
||||
\tableofcontents[currentsection]
|
||||
\end{frame}
|
||||
}
|
||||
|
|
@ -55,165 +65,146 @@
|
|||
\begin{document}
|
||||
\begin{frame}
|
||||
\titlepage
|
||||
\note{Hello}
|
||||
\end{frame}
|
||||
|
||||
\section{Recommendations}
|
||||
\subsection{Current version}
|
||||
\subsubsection{Display}
|
||||
\section{Introduction}
|
||||
\begin{frame}
|
||||
\frametitle{\currentname}
|
||||
\begin{block}{Idea}
|
||||
Display recommendations as arrows showing the user the motion to go the recommended view
|
||||
\end{block}
|
||||
\frametitle{Contexte}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\bigscale]{img/06.png}
|
||||
\caption{Example}
|
||||
\includegraphics[scale=0.5]{new/interface2.png}
|
||||
\caption{Une interface 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}
|
||||
\end{frame}
|
||||
|
||||
\subsubsection{Dynamism}
|
||||
\begin{frame}
|
||||
\frametitle{\currentname}
|
||||
\begin{block}{Idea}
|
||||
Orientate the arrows according to the position of the camera
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\smallscale]{img/08.png}~
|
||||
\includegraphics[scale=\smallscale]{img/09.png}
|
||||
\caption{Example}
|
||||
% * <carlier.axel@gmail.com> 2015-04-29T15:27:15.285Z:
|
||||
%
|
||||
% Expliquer que la fleche de droite dans l'image de gauche est la même que la fleche de gauche dans l'image de droite, mais avec une orientation différente
|
||||
%
|
||||
\end{figure}
|
||||
\end{frame}
|
||||
|
||||
\subsubsection{Transparency}
|
||||
\begin{frame}
|
||||
\frametitle{\currentname}
|
||||
\begin{block}{Idea}
|
||||
Progressively fading the arrows when getting close
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\smallscale]{img/10.png}~
|
||||
\includegraphics[scale=\smallscale]{img/11.png}
|
||||
\caption{Example}
|
||||
\end{figure}
|
||||
\end{frame}
|
||||
|
||||
\subsubsection{Clicking the arrows}
|
||||
\begin{frame}
|
||||
\frametitle{\currentname}
|
||||
\begin{block}{Idea}
|
||||
Clicking on the arrow provokes a fluid motion to the recommended view
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\smallscale]{img/12.png}~
|
||||
\includegraphics[scale=\smallscale]{img/13.png}
|
||||
\caption{Example}
|
||||
\end{figure}
|
||||
\end{frame}
|
||||
|
||||
\subsubsection{Previsualization}
|
||||
\begin{frame}
|
||||
\frametitle{\currentname}
|
||||
\begin{block}{Idea}
|
||||
Display a thumbnail of the rendering of the recommended view when the pointer hovers an arrow
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\bigscale]{img/07.png}
|
||||
\caption{Example}
|
||||
\end{figure}
|
||||
\end{frame}
|
||||
|
||||
\subsubsection{Undo button}
|
||||
\begin{frame}
|
||||
\begin{block}{Undo button}
|
||||
Gives the user the ability to go back where he was before clicking an arrow
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\smallscale]{img/14.png}~
|
||||
\includegraphics[scale=\smallscale]{img/15.png}
|
||||
\caption{Example}
|
||||
\end{figure}
|
||||
\begin{exampleblock}{Note}
|
||||
For the moment, only one undo is supported
|
||||
\end{exampleblock}
|
||||
\end{frame}
|
||||
|
||||
\subsection{Problems}
|
||||
\begin{frame}
|
||||
\begin{block}{Arrow pointing at the camera}
|
||||
When the arrow is in front of the camera, the rendering is ugly
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\bigscale]{img/16.png}
|
||||
\caption{Example}
|
||||
\end{figure}
|
||||
\end{frame}
|
||||
|
||||
\begin{frame}
|
||||
\begin{block}{Collisions between arrows and objects}
|
||||
When the recommended view is too far away, and hidden behind another
|
||||
object, we just see the tail of the arrow
|
||||
\end{block}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=\bigscale]{img/17.png}
|
||||
\caption{Example}
|
||||
\end{figure}
|
||||
\end{frame}
|
||||
|
||||
\subsection{Ameliorations}
|
||||
\section{Technologies utilisées}
|
||||
\begin{frame}
|
||||
\frametitle{Côté serveur}
|
||||
NodeJs et certains \emph{packages}
|
||||
\begin{itemize}
|
||||
\item Multiple undo and redo
|
||||
\item Two types of recommended views :
|
||||
\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}
|
||||
\frametitle{Côté client}
|
||||
\begin{itemize}
|
||||
\item HTML5
|
||||
\item CSS3
|
||||
\item Boostrap
|
||||
\item JavaScript
|
||||
\item WebGL
|
||||
\item Three.js
|
||||
\end{itemize}
|
||||
\end{frame}
|
||||
|
||||
\section{L'interface}
|
||||
\subsection{Interface de base}
|
||||
\begin{frame}
|
||||
\begin{itemize}
|
||||
\item to see another part of the same area
|
||||
\item to move to another area
|
||||
\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}
|
||||
\item scale factor of the thumbnail
|
||||
\end{itemize}
|
||||
\end{frame}
|
||||
\end{frame}
|
||||
|
||||
|
||||
\section{Use-cases}
|
||||
% * <carlier.axel@gmail.com> 2015-04-29T15:33:34.548Z:
|
||||
%
|
||||
% Précise qu'il faut considérer 2 types de use cases. Les "uses cases génériques" pour motiver le travail, et les uses cases un peu plus pragmatiques qu'on utilisera pour les user study
|
||||
%
|
||||
\begin{frame}
|
||||
\begin{itemize}
|
||||
\item Long term use cases and applications
|
||||
\begin{itemize}
|
||||
\item e-commerce : browsing 3D products on a website
|
||||
\item e-tourism : browsing the entirety of a museum or a place
|
||||
\item 3D guide : enhanced street view
|
||||
\end{itemize}
|
||||
\item Short term use cases for user-study
|
||||
\begin{itemize}
|
||||
\item 3D navigation on a scene
|
||||
\item a few complex models with recommendations around them
|
||||
\end{itemize}
|
||||
\end{itemize}
|
||||
\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}
|
||||
\end{frame}
|
||||
|
||||
\section{MMSys}
|
||||
\begin{frame}
|
||||
\begin{itemize}
|
||||
\item The objective would be to submit a paper at MMSys
|
||||
\item Submission deadline: November 27, 2015
|
||||
\end{itemize}
|
||||
\end{frame}
|
||||
\begin{frame}
|
||||
\frametitle{\emph{Arrow}}
|
||||
\begin{figure}
|
||||
\includegraphics[scale=0.2]{new/02.png}
|
||||
\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.13]{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{Previous} : à 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{Next} : 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{Streaming}
|
||||
|
||||
\section{Links}
|
||||
\begin{frame}
|
||||
\footnotesize
|
||||
\begin{itemize}
|
||||
\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}
|
||||
% \end{NoHyper}
|
||||
\end{document}
|
||||
|
|
|
|||
Loading…
Reference in New Issue