From 85a9d3f9a018b29fdf727c31fb5c868e574f0a08 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 9 Sep 2015 15:21:12 +0200 Subject: [PATCH] Some work --- rapport/Makefile | 4 +- rapport/architecture.tex | 234 ++++++++++++++++++++++++++++++ rapport/conclusion.tex | 60 ++++++++ rapport/img/icons/IRIT.jpg | Bin 0 -> 8951 bytes rapport/intro.tex | 48 ++++++ rapport/{rapport.tex => main.tex} | 10 +- rapport/streaming.tex | 38 ++++- 7 files changed, 388 insertions(+), 6 deletions(-) create mode 100644 rapport/architecture.tex create mode 100644 rapport/img/icons/IRIT.jpg rename rapport/{rapport.tex => main.tex} (94%) diff --git a/rapport/Makefile b/rapport/Makefile index 571df9e..1f2fc46 100644 --- a/rapport/Makefile +++ b/rapport/Makefile @@ -2,9 +2,7 @@ TEXC = latexmk -lualatex -output-directory=build .PHONY: FORCE -pdf: build/rapport.pdf - -build/%.pdf: %.tex FORCE +build/rapprt.pdf: main.tex FORCE $(TEXC) -latexoption=-shell-escape $< clean: FORCE diff --git a/rapport/architecture.tex b/rapport/architecture.tex new file mode 100644 index 0000000..a5ea986 --- /dev/null +++ b/rapport/architecture.tex @@ -0,0 +1,234 @@ +\part{Architecture du programme} +Comme dit précédemment, le programme se décompose en un côté serveur et un côté +client. Le cas du \emph{streaming} sera traité à part (dans la partie +\ref{streaming}, puisqu'il est à cheval sur le client et le serveur) et nous ne +parerons ici que du serveur, puis du code client. + +\paragraph{} +Voici une simplification de l'arborescence de la version de +développement : + +\begin{figure}[H] +\centering +\begin{subfigure}[b]{0.3\textwidth} +\centering +\tikzstyle{every node}=[draw=black,thick,anchor=west] +\tikzstyle{folder}=[draw=blue, fill=blue!30] +\begin{tikzpicture}[% + grow via three points={one child at (0.5,-0.7) and + two children at (0.5,-0.7) and (0.5,-1.4)}, + edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] + \node [folder] {root} + child { node [folder] {js} + child {node [folder] {l3d} + child {node [folder] {src}} + child {node [folder] {apps}} + } + child [missing] {} + child [missing] {} + child {node [folder] {Autres libraries}} + child {node {Makefile}} + } + child [missing] {} + child [missing] {} + child [missing] {} + child [missing] {} + child [missing] {} + child { node [folder] {lib} + child {node {NodeLog.js}} + child {node {controllers.js}} + child {node {posts.js}} + child {node {mail.js}} + } + child [missing] {} + child [missing] {} + child [missing] {} + child [missing] {} + child { node [folder] {controllers}} + child { node [folder] {posts}} + child { node [folder] {geo} + child {node {Geo.js}} + child {node {Mesh.js}} + child {node {MeshContainer.js}} + child {node {MeshStreamer.js}} + } + child [missing] {} + child [missing] {} + child [missing] {} + child [missing] {} + child { node {private.js }} + child { node {package.json }} + child { node {npm-shrinkwrap.json }} + child { node {server.js }}; +\end{tikzpicture} +\caption{Vue globale} +\end{subfigure} +~ +\begin{subfigure}[b]{0.3\textwidth} +\centering + \tikzstyle{every node}=[draw=black,thick,anchor=west] + \tikzstyle{folder}=[draw=blue, fill=blue!30] + \begin{tikzpicture}[% + grow via three points={one child at (0.5,-0.7) and + two children at (0.5,-0.7) and (0.5,-1.4)}, + edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] + \node [folder] {src} + child { node [folder] {cameras} + child { node {FixedCamera.js}} + child { node {PointerCamera.js}} + child { node {ReplayCamera.js}} + } + child [missing] {} + child [missing] {} + child [missing] {} + child { node [folder] {canvases} + child { node { MousePointer.js}} + child { node { Previewer.js}} + child { node { StartCanvas.js}} + } + child [missing] {} + child [missing] {} + child [missing] {} + child { node [folder] {loaders} + child { node { ProgressiveLoader.js }} + } + child [missing] {} + child { node [folder] {math} + child { node { Hermite.js }} + } + child [missing] {} + child { node [folder] {recommendations} + child { node { Arrow.js}} + child { node { Viewport.js}} + } + child [missing] {} + child [missing] {} + child { node [folder] {scenes}} + child { node [folder] {utils}} + child { node {l3d.js}} + + ; + \end{tikzpicture} + \caption{Détail des sources de L3D} +\end{subfigure} +~ +\begin{subfigure}[b]{0.3\textwidth} +\centering + \tikzstyle{every node}=[draw=black,thick,anchor=west] + \tikzstyle{folder}=[draw=blue, fill=blue!30] + \begin{tikzpicture}[% + grow via three points={one child at (0.5,-0.7) and + two children at (0.5,-0.7) and (0.5,-1.4)}, + edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] + \node [folder] {apps} + child {node [folder] {bouncing-cube} + child { node {BouncingCube.js}} + child { node {main.js}} + } + child [missing] {} + child [missing] {} + child {node [folder] {multi-sphere} + child {node {main.js}} + } + child [missing] {} + child {node [folder] {stream-demo} + child {node {main.js}} + } + child [missing] {} + child {node [folder] {prototype} + child {node [folder] {interactive}} + child {node [folder] {replay}} + child {node [folder] {tutorial}} + child {node [folder] {coin-creator}} + child {node [folder] {coin-viewer}} + child {node [folder] {coin-checker}} + child {node {ButtonManager.js}} + child {node {Coin.js}} + child {node {GlobalFunctions.js}} + } + ; + \end{tikzpicture} + \caption{Détail des applications} +\end{subfigure} +\caption{Arborescence} +\end{figure} +\tikzstyle{every node}=[] + + +\newpage +\section{Code serveur} +Le code serveur est situé à la racine du projet : le fichier \texttt{server.js} +est en fait le programme principal du serveur. + +\subsection{Dépendances} +Le programme principal utilise de nombreuses libraires : les dépendances de +notre serveur sont définies dans le fichier \texttt{package.json}. +L'inconviéniant d'avoir de nombreuses librairies en même temps est la +compatibilité des versions : en effet, une des dépendances nécessite une +version particulière d'une autre librairie, et c'est pourquoi nous avons +utilisé \texttt{npm-shrinkwrap.json} pour préciser les versions de chacune des +dépendances de manière récursive. + +\paragraph{} +Les \emph{packages} que nous utilisons sont les suivants : +\begin{itemize} + \item \emph{express} : un framework web pour NodeJs + \item \emph{jade} : un moteur de template pour simplifier la génération des + pages HTML + \item \emph{pg} : une librairie permettant la connexion à la base de données + \item \emph{body-parser} : une librairie permettant de traiter simplement + les paramètres passés aux reqûetes + \item \emph{cookie-parser} et \emph{cookie-session} : une librairie gérant + les sessions sous forme de cookies + \item \emph{socket.io} : une librairie permettant d'utiliser facilement les + sockets (côté serveur et client) + \item \emph{serve-favicon} : une librairie pour choisir facilement l'icône + du site + \item \emph{emailjs} : une librairie permettant de se connecter à une + adresse e-mail +\end{itemize} + +\subsection{Modèle, vue, contrôleur} +Pour ce projet, nous avons adopté une version simplifiée du design-pattern +\emph{modèle-vue-controleur} : en JavaScript, nos modèles seront des objets +simples, et le modèle sera limité à l'exécution des requêtes SQL. + +\paragraph{} +Les contrôleurs sont chargés au démarrage par le fichier +\texttt{controllers.js}, qui parcourt les dossiers qui sont contenus dans le +dossier \texttt{controllers}. Dans chacun de ces dossiers, deux fichiers et un +dossier sont présents : + +\begin{itemize} + \item \texttt{index.js} qui contient des fonctions (contrôleurs) qui + répondent à des requêtes + \item \texttt{urls.js} qui contient les urls existantes et les fonctions + auxquelles elles vont être associées + \item \texttt{views}, dossier qui contient les vues qui vont être utilisées + par les contrôleurs définis dans \texttt{index.js} +\end{itemize} + +\paragraph{} +La même technique à été appliquée pour le dossier \texttt{posts} et le fichier +\texttt{posts.js}, à la différence près que les requêtes traitées sont des +requêtes POST et non pas des requêtes GET : elles servent principalement à +stocker des informations dans la base de donneés. + +\section{Code client} +Le code client est séparé en trois parties : +\begin{itemize} + \item une partie dans le répertoire \texttt{src} contenant de nombreuses + fonctions et classes + \item une partie dans le répertoire \texttt{apps} contenant des + applications que nous avons développées + \item des autres librairies développées par des tiers, dans le répertoire + \texttt{js} +\end{itemize} + +Le \texttt{Makefile} présent dans le dossier \texttt{js} est celui qui +concatènera nos sources, les minifieras et génèrera les scripts que nous +utiliserons par la suite. + +\paragraph{} +Dans la suite, nous allons seulement parler de L3D, puisque c'est le code que +nous avons développé. diff --git a/rapport/conclusion.tex b/rapport/conclusion.tex index a558256..60822d4 100644 --- a/rapport/conclusion.tex +++ b/rapport/conclusion.tex @@ -1 +1,61 @@ +\part*{Remerciements} +Je tiens particulièrement à remercier \\ + +\begin{itemize} + \item Vicent \textsc{Charvillat}, pour m'avoir donné l'occasion de faire un + stage intéressant, et pour toute l'aide qu'il a pu me fournir + \item Geraldine \textsc{Morin}, pour sa disponibilité + \item Axel \textsc{Carlier}, pour son aide sur les points plus techniques + \item Wei Tsang \textsc{Ooi}, pour ses suggestions souvent pertinentes + \emph{(même s'il ne lira probablement pas ce rapport)} +\end{itemize} + +\paragraph{} +mais je me dois aussi de remercier \\ + +\begin{itemize} + \item Thierry \textsc{Malon} + \item Émilie \textsc{Jalras}, parce que c'est toujours rigolo de se prendre + une gomme dans la tronche, + \item Julien \textsc{Fayer}, qui nous a accompagné durant les derniers mois + de nos stages + \item Bastien \textsc{Durix}, + \item Vincent \textsc{Angladon}, +\end{itemize} + +\newpage \part*{Conclusion} +Peu avant ce stage, nous avons eu le projet long qui nous a permi +d'expérimenter les projets d'envergure en groupe, et la façon dont on devait +les gérer. + +\paragraph{} +Ce stage, pendant lequel j'ai développé le programme (\emph{plus ou moins}) +seul m'a permi de compléter les expériences que j'avais eu lors du projet long. +En effet, la plupart des projets étudiants à l'ENSEEIHT sont de très petite +taille (si l'on devait passer 35h par semaine sur ces projets, je crois qu'il +n'y en aurait pas un qui durerait plus de trois jours), et on ne se rend en +fait pas compte que certaines des techniques de gestion de projet que nous +avons du mettre en application pendant le projet long sont tout aussi +importante dans le cas d'un projet seul. + +\paragraph{} +Dès nos premiers cours à l'ENSEEIHT, on nous enseignait l'importance des +commentaires qui rendaient compréhensible un programme à quelqu'un d'autre, ou +parfois, à soi-même mais dans le futurr. Mais sur un projet de quelques jours, il +est évident que l'on comprendra toujours ce qu'on a fait avant. Cependant dès +que le projet devient suffisament important, on se rend compte qu'il est +impossible de maîtriser parfaitement le code d'un bout à l'autre, et que c'est +là que les commentaires prennent tout leur sens. + +\paragraph{} +Ce projet a été très agréable pour moi, puisqu'il m'a permi de me consacrer a +temps plein, et pendant une longue durée, sur un programme qui part de zéro. +Lors d'un projet en groupe, ou d'un sous-projet qui permet de constituer une +brique d'un plus gros batîment, on peut ressentir la fierté d'avoir participé à +un si grand projet, mais il y a aussi cette sensation qu'au final, l'impact que +l'on a eu sur ce projet n'est pas si grande que ça. Lors d'un projet fait seul +(ou en petite équipe), et qui part de zéro, on voit le programme grandir au fur +et à mesure, ses fonctionnalités s'améliorer, ses bugs se corriger et de +nouveaux apparaître, et regarder le projet une fois terminé est très plus +flatteur pour l'ego. diff --git a/rapport/img/icons/IRIT.jpg b/rapport/img/icons/IRIT.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b840e5c5333859bb6603835bddab4980288d7afa GIT binary patch literal 8951 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 literal 0 HcmV?d00001 diff --git a/rapport/intro.tex b/rapport/intro.tex index 9804a88..00997d2 100644 --- a/rapport/intro.tex +++ b/rapport/intro.tex @@ -1 +1,49 @@ \part*{Introduction} +Ce stage de fin d'études s'est déroulé dans le laboratoire de recherche de +l'IRIT, dans l'équipe Vortex. + +\paragraph{} +Ce stage a commencé en F215, salle dans laquelle il y avait Thierry +\textsc{Malon}, un de mes collègues de projet long qui travaillait sur le +projet Popart avec Simone \textsc{Gasparini}, et Bastien \textsc{Durix}, qui +jouait le rôle du client de ce projet. + +\paragraph{} +Quelques semaines plus tard, Émilie \textsc{Jalras}, autre collègue de notre +projet long, est arrivée pour commencer son stage avec Sylvie \textsc{Chambon} +sur les superpixels. Émilie n'ayant que Windows sur son ordinateur, il lui +était impossible d'y développer du logiciel, et puisqu'aucune machine n'était +disponible dans la salle F215, sa migration était inévitable. Par solidarité +\emph{stagiariale}, Thierry et moi avons donc migré vers la salle F207, où nous +avons passé le reste de notre stage. + +\section*{Début du stage} +\paragraph{} +Encadré par Vincent Charvillat et Géraldine Morin, ce stage a commencé par une +phase de découverte du sujet qui n'était pas clairement fixé : l'idée +d'utiliser des recommandations pour influencer l'utilisateur afin d'être +capable de prévoir ses interactions et de s'en servir pour réduire la latence +était clairement présente, mais l'interface n'était pas encore fixée. Il y +avait en fait deux options : la video, ou la 3D. + +\paragraph{} +Le stage a donc commencé par une phase bibliographique afin de voir ce qui +existait en termes de recommandations, préchargement, et d'interface +utilisateur de manière générale. Au même moment, Vincent \textsc{Charvillat} et +Axel \textsc{Carlier} étaient à Singapour, en train de finaliser un article, et +j'ai pu leur apporter une petite aide : +\begin{itemize} + \item dans un premier temps, j'ai établi des profils de bande-passante lors + de téléchargements. Pour ce faire, j'ai utilisé le programme + \texttt{curl} qui affiche la vitesse instantanée de téléchargement + chaque seconde + \item dans un second temps, j'ai pu nettoyer une partie d'un code PHP + servant à remplir les lignes d'une table d'une base de données. Le code + était alors sensible à l'injection SQL. +\end{itemize} + +\paragraph{} +Au bout de quelques semaines, j'ai décidé de faire le choix de la 3D et j'ai +commencé à découvrir les multiples façons de faire des interfaces 3D via HTML +et JavaScript + diff --git a/rapport/rapport.tex b/rapport/main.tex similarity index 94% rename from rapport/rapport.tex rename to rapport/main.tex index 5fbb1f8..bb79641 100644 --- a/rapport/rapport.tex +++ b/rapport/main.tex @@ -66,12 +66,14 @@ anchorcolor = blue]{hyperref} \@addtoreset{section}{part} \makeatother +\usetikzlibrary{trees} + \begin{document} \begin{titlepage} \begin{sffamily} \begin{center} - ~\\[2cm] + ~\\[0cm] \LARGE R\hsc{apport de Stage de 3A}\\[3cm] % Title @@ -81,7 +83,8 @@ anchorcolor = blue]{hyperref} \HRule \\[3cm] - \includegraphics[scale=0.5]{img/icons/n7.png}~\\[4cm] + \includegraphics[scale=0.5]{img/icons/n7.png}~\\[1cm] + \includegraphics[scale=0.4]{img/icons/IRIT.jpg}~\\[3cm] % Author and supervisor @@ -119,6 +122,9 @@ anchorcolor = blue]{hyperref} \include{techno} \newpage +\include{architecture} +\newpage + \include{interface} \newpage diff --git a/rapport/streaming.tex b/rapport/streaming.tex index a1808ae..6fd9817 100644 --- a/rapport/streaming.tex +++ b/rapport/streaming.tex @@ -1,4 +1,4 @@ -\part{Streaming de modèle 3D} +\part{Streaming de modèle 3D\label{streaming}} Le but ultime de ce projet est de biaiser l'utilisateur avec les recommandations de sorte à être capable de prévoir ses déplacements futurs, et ainsi précharger les parties du modèle qui vont être vues. Cette section @@ -39,6 +39,42 @@ Généralement, le fichier \texttt{.obj} vient souvent avec un fichier \texttt{.mtl} qui contient la définition des matériaux (leurs noms, leurs textures, leurs constantes...). +\section{Architecture} +Puisque cette partie traite à la fois du client et du serveur, les fichiers +peuvent sembler éparpillés. Les fichiers concernés sont les fichiers du +répertoire \texttt{geo} pour le serveur et le fichier +\texttt{ProgressiveLoader.js} qui est le client. + +\subsection{Serveur} +Nous avons rappelé que les modèles au format \texttt{.obj} contenaient +plusieurs \emph{sous-modèles} avec des matériau différents, le serveur connait +les classes suivantes : +\begin{itemize} + \item la classe \texttt{Mesh}, qui représente un \emph{sous-modèle}, avec + ses faces, ses coordonnées de textures, ses normales, son matériau + \item la classe \texttt{MeshContainer}, qui représente un modèle au format + \texttt{.obj}, en tant que liste de \texttt{Mesh} + \item la classe \texttt{MeshStreamer}, qui permettra d'envoyer un modèle au + client +\end{itemize} + +\paragraph{} +Pour avoir une bonne performance, il faut éviter de re-parser les fichiers +\texttt{.obj} et de recréer les \texttt{MeshContainer} à chaque requête. + +\paragraph{} +Dans le fichier \texttt{MeshContainer.js}, une liste de modèle à charger (ainsi +que leur chemin permet au serveur de créer les \texttt{MeshContainer} au +démarrage, et ainsi, le \texttt{MeshStreamer} n'a qu'à prendre une référence +vers ce \texttt{MeshContainer} (qui existe déjà, ce qui réduit la latence). + +\subsection{Client} +Le client de la partie \emph{streaming} de ce projet est contenue dans la +classe \texttt{ProgressiveLoader}. Celle-ci crée des modèles 3D vides, puis +établit la connexion avec le serveur et remplit les modèles au fur et à mesure +que les informations arrivent du serveur. Dans les sections suivantes, nous +allons montrer les différentes stratégies de \emph{streaming} que nous avons +mises en place. \section{Streaming linéaire} La première étape de cette fonctionnalité a été de faire un système