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

Slides

This commit is contained in:
Thomas FORGIONE 2015-09-18 16:33:58 +02:00
parent 509741200b
commit c732342be1
2 changed files with 143 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
slides/Makefile
View File

@ -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

275
slides/main.tex
View File

@ -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 :
\begin{itemize}
\item to see another part of the same area
\item to move to another area
\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}
\item scale factor of the thumbnail
\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 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}
\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
%
\subsection{Recommandations}
\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}
\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}
\frametitle{\emph{Arrow}}
\begin{figure}
\includegraphics[scale=0.2]{new/02.png}
\caption{Une recommandation \emph{arrow}}
\end{figure}
\end{frame}
\section{Links}
\subsection{Prévisualisation}
\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}
\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}
% \end{NoHyper}
\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}
\end{document}