Institut National des Sciences Appliquées de Strasbourg. Mémoire de soutenance de Diplôme d Ingénieur INSA Spécialité TOPOGRAPHIE

Transcription

1 Institut National des Sciences Appliquées de Strasbourg Mémoire de soutenance de Diplôme d Ingénieur INSA Spécialité TOPOGRAPHIE Contribution à la valorisation et à la gestion de la documentation hétérogène du patrimoine sous la forme d'une Interface 3D appliquée au site de Châtel-sur-Moselle. Présenté en Septembre 2011 par Vincent CAILLET Réalisé au sein du laboratoire : LSIIT UMR CNRS 7005 Equipe Trio/INSA Groupe photogrammétrie et Géomatique INSA Strasbourg 24, Boulevard de la Victoire Strasbourg Directeurs de PFE : M. René ELTER EA 1132 Université Lorraine, Unesco Correcteurs de PFE : M. Mathieu KOEHL Maître de Conférence - INSA Strasbourg M. Emmanuel ALBY Maître de Conférence - INSA Strasbourg

2

3 1 Remerciements : Je remercie M. ALBY et M. ELTER mes directeurs de PFE pour leurs encadrements, leurs conseils et la confiance qu ils m ont témoigné. Je tiens à remercier l ensemble du groupe PAGE, M. GRUSSENMEYER responsable du laboratoire pour son accueil ; M. GUILLEMIN et M. GRANDMOUGIN techniciens de recherche pour leur conseil et leur bienveillance ; M. KOEHL pour ses conseils techniques ; les doctorants et postdoctorants du laboratoire pour leur aide et le partage de leurs connaissances. Je tiens à remercier les membres dynamiques et passionnés de l association du Vieux Châtel. Aussi, je remercie Mlle Solveig Berger camarade de promotion et stagiaire au PAGE pour ses conseils et sa bonne humeur. Pour les 3 ans de formation au sein de l INSA, je remercie l ensemble du corps professoral, mes camarades de promotion et plus particulièrement Adrien FIEVET mon binôme. Enfin, je remercie mes parents, mon frère et ma sœur qui m ont appuyé tout au long de ces années d études. Page iii

4

5 2 Sommaire 1 Remerciements : iii 2 Sommaire v 3 Introduction Contexte de l étude Organisation du mémoire 2 4 Etat de l art Analyse des logiciels CAO/DAO Analyse des logiciels SIG Notion de Réalité Virtuelle Technologies du Web Langages du Web XML HTML, CSS, JavaScript et AJAX Formats 3D GML VRML COLLADA X3D PDF 3D Flash CS Solutions Web 3D City-GML O3D XML3D WebGl X3DOM GLGE XB Point Stream Truview Annotation des modèles 3D Différentes théories Logiciels d annotations de modèle 3D Description des langages web côté serveur et côté client Côté client Côté serveur Serveur de base de données Langage Serveur Plate forme WAMP Normes des métadonnées Dublin Core Applications Exemple de projet archéologique/web CISAR Description Choix des technologies 18 Page v

6 4.8.2 Système d information à Pompéi Description Choix des technologies Système d information dédié au patrimoine Description Choix des technologies NUBES Description Choix des technologies 21 5 Choix et description de la solution retenue Choix de la visualisation 3D Description de la solution retenue Technique de visualisation Choix de la base de données Développement de l interface Web 3D interactive Etape de construction de l interface Description des données à intégrer MCD Description Relations Mise en place de la plate-forme WAMP PHP Système de gestion de contenu Lancement de page à la volée Gestion des éléments 3D Enregistrement du fichier en extension *.x3d Décomposition du modèle Intégration des documents X3D dans le DOM Structure du DOM Ajout d outils de navigation 37 6 Développement d un site web Description Module présentation Module interface 3D Volet présentation Volet interface 3D Module SGBD Volet présentation Module recherche Module fiche de description But du module Description de la fiche Limite de visualisation Mise en place de la fiche Lien vers modèle extérieur 49 7 Conclusions et perspectives 51 Page vi

7 8 Glossaire 53 9 Références Articles, mémoires et thèses Notices et livres Conférences Sites internet Liste des illustrations Liste des tableaux Annexes 61 A. Etude fonctionnelle du SIG avec interface Web du site de la forteresse de Châtel-sur- Moselle (réalisé le 22/02/2011) 62 B. Notice WAMP Serveur 67 C. Notice Système de Gestion Base de Données (SGBD) 71 D. Notice script PHP Modèle Interactif 83 Page vii

8

9 3 Introduction 3.1 Contexte de l étude La forteresse de la ville de Châtel-sur-Moselle est un site classé en partie au titre des Monuments Historiques situé dans le département des Vosges. Lieu stratégique du territoire, commandant le passage de la Moselle situé en contrebas. Cette place forte s y est développée depuis 1072 mais, son histoire fut tourmentée. Elle fut démantelée en En mai 1972, ce site est pris en main par l association du Vieux Châtel. Découvrant un édifice de plus de cinq hectares doté de trois étages de galeries, de salles souterraines, de douze tours et riche de multiples objets enfouis depuis plusieurs siècles. Elle œuvre aujourd hui au dégagement et à la consolidation des tours et murailles. Depuis le début de l année 2010, un projet de mise en valeur numérique a été initié. Il a pour but, la modélisation des parties intérieures et extérieures, la mise en ligne d un système d information sous une interface web et une reconstruction numérique du site à plusieurs époques. Il est soutenu par plusieurs organismes publics: la Région Lorraine, le Département des Vosges et le Ministère de la Culture. Il est fait appel à plusieurs partenaires : La société GéoPhénix est chargée de la modélisation des parties extérieures ; L INSA de Strasbourg pour la réalisation du modèle des parties intérieures et du système d information ; Le CRAI 1 de l ENSA 2 de Nancy pour la réalisation des modèles de la forteresse à différentes époques. L ensemble de ces opérations se fait sous l égide de M. René ELTER, archéologue. Afin de commencer la première partie des objectifs impartis à l INSA c est-à-dire la réalisation de la maquette 3D, a eu lieu en 2010 deux travaux : Un PRT 3 réalisé par M. Vincent LEGLISE et M. Valentin POITEVIN qui a permis la réalisation d un canevas de points, matérialisé au sol pour le calcul d une aérotriangulation. Ce travail s est concrétisé par la réalisation d une maquette 3D du centre historique de la ville de Châtel-sur-Moselle par la société GéoPhoenix. Un PFE accompli par M. Valentin POITEVIN a mis en place des procédures pour la modélisation des parties intérieures en utilisant des techniques de photogrammétrie et de lasergrammétrie. L automatisation de ces chaînes de traitement, la création de modèle détaillé et simplifié (pour les textures et la géométrie) ont contribué à l installation d une démarche pérenne pour poursuivre la numérisation. De plus, la création de panoramique a initié la diffusion des données en créant une interface de visite virtuelle. 1 Centre de Recherche en Architecture et Ingénierie 2 Ecole Nationale Supérieure d Architecture 32 Projet Ecole Nationale de Recherche Supérieure Technologique d Architecture 43 Système Projet de d information Recherche Technologique Géographique Page 1

10 Après avoir mis en place les socles nécessaires à la modélisation du site, la deuxième étape consiste en l établissement d un système d information. Cet outil aura plusieurs objectifs : Pouvoir incorporer et structurer l ensemble des données relatives au site de la forteresse de Châtel-sur-Moselle et notamment les maquettes 3D par les acteurs du projet; Valoriser les documents du site au grand public en les diffusant sur le web en privilégiant les logiciels libres ; Insérer l ensemble des documents par les acteurs du projet ; Sécuriser les documents diffusés. Pour cela une première étude a été réalisée en 2011 par M. Romain Gaborit et M. Marc Vasseur lors d un PRT. Ils ont permis d aborder les difficultés du projet notamment la diffusion d un modèle 3D sur le web en lien avec une base de données. Mon PFE s inscrit dans la continuité de cette étude. Il a donc pour objectif la création de cet outil qui permettra de répondre aux objectifs cités précédemment. 3.2 Organisation du mémoire Mon mémoire se composera de trois grandes parties. La première partie sera consacrée à l état de l art des technologies existantes pour réaliser l interface 3D. La seconde partie expliquera le choix de la solution technologique retenue et les différentes étapes de construction qui ont été nécessaires afin d obtenir une modélisation 3D interactive sur le web. La troisième partie décrira l intégration de cette interface à travers un site web regroupant différentes fonctionnalités et les perspectives de ce développement. Page 2

11 4 Etat de l art Sommaire 4.1 Analyse des logiciels CAO/DAO Analyse des logiciels SIG Notion de Réalité Virtuelle Technologies du Web Langages du Web Formats 3D Solutions Web 3D Annotation des modèles 3D Différentes théories Logiciels d annotations de modèle 3D Description des langages web côté serveur et côté client Côté client Côté serveur Normes des métadonnées Dublin Core Applications Exemple de projet archéologique/web CISAR Système d information à Pompéi Système d information dédié au patrimoine NUBES 21 La représentation de la 3D dans les systèmes informatiques a évolué depuis ces dernières années. Ce mouvement touche à la fois les SIG 4 et les applications Web. En effet, la représentation en deux dimensions (carte, photographies ) s est largement démocratisée sur internet ou dans les SIG (raster ou vecteur) mais celle des modèles 3D est toujours en mutation. Pour réaliser l interface 3D, plusieurs applications sont nécessaires. Pour choisir la meilleure solution, elles ont toutes fait l objet d un état de l art. Ce chapitre vise donc à analyser l ensemble des solutions actuellement disponibles. La première partie fera l analyse des différents types de représentation de la 3D au sein des logiciels de CAO 5 /DAO 6, de SIG et se terminera par la notion de réalité virtuelle. La deuxième analysera les solutions de visualisation de la 3D sur le Web. Enfin, la troisième partie fera l état de l art des outils de base de données et de leurs liens avec un modèle 3D. 4 Système d information Géographique 5 Conception Assisté par Ordinateur 6 Dessin Assisté par Ordinateur Page 3

12 Etat de l art 4.1 Analyse des logiciels CAO/DAO Si l on excepte les logiciels de traitement d un nuage de points, les logiciels de conception et de dessin assisté par ordinateur constituent la première étape dans la création ou l amélioration du rendu du modèle. Diverses études comme [Piacentille, 2007] ou [Le Gravier, 2007] comparent ces différents logiciels. La distinction doit être faite entre les outils de CAO tel qu AutoCAD ou encore Microstation et les outils de dessin et d animation comme 3D Studio Max, Maya, Blender [Desgagné, 2010] et dans une autre mesure Sketchup. Les logiciels de CAO/DAO permettent de construire, d habiller et même d animer le modèle avec des résultats de qualité. Cependant, le manque survient lors du choix de l extension pour exporter le modèle vers une interface de visualisation accessible ou non par le web. Les formats PDF 3D d Adobe ou Sketchup de Google sont diffusables. Le premier l est par le déploiement de l Acrobat Reader qui est un outil gratuit pour la visualisation des documents d extension *.pdf, valable aussi pour le PDF 3D. Le second est visualisable par le logiciel gratuit Sketchup mais également par Google Earth. En effet, il est possible d exporter le modèle Sketchup sur Google Earth et de visualiser ainsi l élément qui est en plus géoréférencé. De plus, d autres outils de traitement des nuages de points ou des modèles maillés permettent bon nombre de modifications du modèle. L outil gratuit MeshLab développé par ISTI-CNR 7 est un logiciel Figure 4.2 : Logo du Logiciel MeshLab Figure 4.1 : Logo du projet européen 3D- Coform gratuit et fort intéressant pour le traitement des modèles maillés. Il gère également un nombre impressionnant d extension que se soit en import ou en export. Ce logiciel est soutenu par le projet européen 3D-Coform qui a pour but l état de l art au niveau de la modélisation et la documentation des modèles 3D dans le domaine du patrimoine culturel. [3D-coform@2011] Les outils ne permettent cependant pas une relation avec une base de données comme pour les SIG [Desgagné, 2010]. 4.2 Analyse des logiciels SIG En effet, la principale distinction entre les logiciels de CAO/DAO et les SIG est le lien graphique/attribut. Il est de type hiérarchique pour les premiers et de type relationnel pour les seconds [Pornon,1992]. Ces attributs définissent les différents modèles de représentation. Les S.I.G en ont intégré, plusieurs, passant à la fois du 2D au 2,5D et même au 2,75D. Dans sa thèse [Billen, 2002], reprend l ensemble des techniques de représentation de l espace dans les SIG et les modèles récents de représentation 3D. De même dans le mémoire de [Piacentille, 2007] on distingue en infographie trois types de représentation 2D (verticale, horizontale), 3D (verticale, horizontale, profondeur) et 4D (verticale, horizontale, profondeur et temps). Dans la thèse de [Desgagné, 2010], il distingue les visualisations vecteurs et matricielles. 7 Istituto di Scienza e Tecnologie dell Informazione - National Research Council of Italy Page 4

13 Etat de l art La plupart des SIG intègrent la 3D et des outils d analyses spatiales. Mais, en revanche l édition de SIG avec une interface web est moins courante. Il existe des outils de Webmapping comme Mapguide d Autodesk. Cependant ceux-ci ne gèrent que la 2D ou la 2,5D. L engouement suscité par Google Earth et Virtual Earth de Microsoft a motivé la création d un module ArcGIS Explorer par la société ESRI. Cette application contient un ensemble de fond de carte et permet d insérer dans un globe virtuel des fichiers acceptés par les logiciels d ArcGIS. Elle utilise des outils métriques et topologiques, mais pour une utilisation optimum, il faut néanmoins posséder un ensemble de logiciels propriétaires d ESRI. De plus, les fonds de cartes sont de moindres qualités que ces deux concurrents. [Desgagné, 2010] 4.3 Notion de Réalité Virtuelle La notion de réalité virtuelle se distingue des modèles issus de logiciel de CAO/DAO ou de SIG car elle inclut la notion d interactivité. [Meyer, 2007] Celle-ci peut être exploitée dans différents domaines comme la formation à travers des simulateurs d environnement industriel, ou la formation. Dans le mémoire de [Thouvenin, 2009], la définition de la réalité virtuelle peut être celle-ci : «Il s'agit de donner à voir et à sentir des mondes identiques à la réalité ou proches de la réalité, ou des mondes imaginaires ou artificiels dans lesquels une expérience est rendue possible.» Pour synthétiser, l utilisateur peut se déplacer dans l espace tridimensionnel et peut être amené à interagir avec l objet qu il y voit. Pour se faire, il peut être immergé dans le monde virtuel. [Meyer, 2007] Le domaine des patrimoines culturels n est pas en reste pour l utilisation d univers de réalité virtuelle. Comme l a souligné [Poitevin, 2010], la valorisation d un patrimoine culturel est un maillon essentiel pour la bonne gestion de celui-ci. La médiatisation attire le touriste et fait ainsi vivre la préservation de l édifice. Dans le mémoire de [Poitevin, 2010], une analyse est faite sur la mise en place d un système de réalité augmentée pour la mise en valeur du patrimoine. Page 5

14 Etat de l art 4.4 Technologies du Web Pour cette recherche, on s attardera sur des critères d interactivité du modèle 3D avec l utilisateur et avec une base de données. De plus, on essaiera d illustrer l analyse par des exemples recueillis sur le Web. On décomposera l analyse en trois parties : les langages du Web, les formats 3D et les solutions Web 3D Langages du Web XML Le XML est apparu en 1998, il s agissait pour le W3C 8 de permettre aux différents logiciels du Web de comprendre ce langage à partir de métadonnées situées dans une première partie du script. Celui-ci fait appel à une structure arborescente composée de différentes balises qui correspondent à des unités sémantiques délimitant chacune un ensemble. Ce langage peut être facilement développé dans un éditeur de code type Notepad++. [Meyer, 2007] Il constitue une norme standard ISO8879. De plus ce langage est très flexible, car chaque utilisateur peut créer sa propre structure de balise HTML, CSS, JavaScript et AJAX HTML Le HTML 9 est le langage unificateur du web. Il a été créé en 1991 par Sir Tim Berners-Lee, dans son ouvrage intitulé «HTML Tags» il proposa deux douzaines d éléments pouvant être utilisés pour écrire des pages web. [Keith, 2010] Plusieurs versions de l HTML se sont succédées jusqu au HTML en Le véritable tournant a été le passage au XHTML qui exige de suivre les règles du XML. Le HTML 5 est la dernière version de ce langage, bien qu il ne fasse pas encore partie du discours normé, il est déjà pris en compte par les navigateurs. Un des buts de l HTML 5 est de permettre de publier des médias riches sans l utilisation de module d'extension (plug-in) tel que Flash ou Silverlight. En effet, les langages CSS, HTML et JavaScript n étaient pas suffisants pour l ajout de l audio ou de la vidéo. Les balises <Canvas>, <Audio> ou <Video> de l HTML 5 ont été conçues pour permettre aux navigateurs d interpréter à eux seuls les médias cités précédemment. Son utilisation se fait par l intermédiaire des lignes de code en JavaScript qui forment une API. CSS 10 Le CSS est un langage de programmation pour la présentation des pages HTML. Les feuilles de style contenant le code CSS peuvent être intégrées au fichier HTML ou être liées à un fichier externe. Les navigateurs les prennent en compte depuis les années 2000, en même temps que l apparition du langage XHTML. La dernière version est le CSS3. C est un langage soutenu par le W3C, cependant si l'on ne veut que des normes finalisées, on va devoir se passer de CSS3, mais aussi de CSS 2.1 qui ne l'est également pas. 8 World Wide Web Consortium 9 HyperText Markup Language 10 Cascading Style Sheets Page 6

15 Etat de l art JavaScript JavaScript est un langage de programmation intégré dans tous les navigateurs Web modernes. Il est spécialement conçu pour interagir avec les pages Web. Il permet d intégrer de petits programmes (appelés «scripts») dans le code HTML d une page Web [Yank, 2009]. Il s utilise pour extraire des informations de certaines parties d une page et pour manipuler la page en temps réel. JavaScript est un langage côté client c'est-à-dire que le script est lu et exécuté par le navigateur après qu il a récupéré la page (et tout ce qu elle contient, dont les programmes) à partir du serveur Web. [Yank, 2009] AJAX 11 AJAX est une technique permettant à JavaScript de communiquer plus directement avec le serveur Web. Il est apparu en Il crée une nouvelle connexion intéressante entre le navigateur Web et le serveur Web. A noter que cette technique a été couplée au X3D pour former l AJAX3D. Il forme ainsi une API capable de faire interagir l objet X3D avec un SAI 12 et avec un serveur. [Gruau, 2007] Cela permet aux utilisateurs d'être à même, entre autre, de changer les caractéristiques de l'objet observé en évitant de recharger la page internet comme c'est le cas avec les formulaires PHP 13 notamment.[sauvain, 2008] Formats 3D GML 14 Le GML est conçu sur le principe d une structure arborescente en balise, il a pour but la représentation spatiale et la prise en compte de ce langage par les SIG. Il est reconnu par l OGC 15, sa version 3 est sortie en L OGC est une organisation internationale non commerciale qui a pour but la standardisation de l information géospatiale et de la localisation. [OGC@2011] A partir de la version 3 du GML, sa structure comprend 5 modules : La géométrie : elle est le plus important module. Elle comprend l ensemble des données de 1 à 3 dimensions ; La topologie : elle constitue les propriétés spatiales de l objet ; Le temps : il est également appelé topologie temporelle qui comprend des primitives temporelles comme une période ou un instant ; La couverture elle est constituée d une fonction de distribution liée à un domaine spatial comme la température ; La projection elle est utilisée pour la représentation du modèle. [Wang, 2007] Coeur GML Géométrie Topologie Temps Couverture Projection Figure 4.3 : Structure du GML3 [Wang, 2007] 11 Asynchronous Javascript And XML 12 Scene Access Interface 13 Personal Home Page, langage serveur 14 Geography Markup Language 15 Open Geospatial Consortium Page 7

16 Etat de l art VRML Le VRML 16 a été le premier langage de description d une scène 3D. Apparu en 1994, il a été mis à jour par deux fois. La dernière version est le VRML 1997, prédécesseur du X3D. Il s agit d un langage différent de la structure du HTML ou du XML. Plusieurs interfaces ont été réalisées en VRML comme le projet CISAR (projet d outil de gestion d un site archéologique avec interface Web). (Cf ) Cependant, le VRML doit être lu par un outil de visualisation qui sous la forme de module d extension du navigateur - sera téléchargé par l utilisateur. De plus, les fichiers volumineux sont à proscrire, il faut alors simplifier le modèle ce qui entraîne une perte d information. Ce langage n a pas eu une utilisation optimum en l absence d autres technologies comme des cartes graphiques performantes ou encore une connexion internet en haut débit COLLADA 17 Le COLLADA a été créé par Sony à partir de Ce format permet de faire le lien entre des logiciels de conception et des applications Web comme Google Map d après [Arnaud & Parisi, 2007] ou [Meyer, 2007]. Il a été repris en main par un consortium nommé KHRONOS (voir logo ci-dessous Figure 4.5) regroupant plusieurs acteurs du web. L objectif de ce format est aussi de standardiser les données, ce qui en fait un format riche en métadonnées. Il peut être vu comme un concurrent au format X3D ou un complément. [Gruau, 2007] Figure 4.4 : Logo du W3C Figure 4.5 : Logo du consortium Khronos X3D 18 Le X3D prend la suite du VRML97 en Il se veut compatible avec le langage VRML97 et intègre un langage de type XML permettant de mieux interagir avec une page Web. De plus, il gère les multitextures et les NURBS 19 [Paulis, 2010]. Il peut être édité dans trois syntaxes (XML, VRML, binaire). Le binaire est un avantage pour la compression du fichier. Comme le VRML, sa lecture se fait par l intermédiaire d un visualisateur comme Flux ou Carina [Gruau, 2007]. Néanmoins, depuis le développement de la technologie WebGL, un JavaScript nommé X3DOM permet sa visualisation sans aucun module d'extension. Il faut cependant avoir un pilote de carte graphique à jour. (Compatible aux dernières versions de l OpenGL) PDF 3D Le format PDF 3D d Acrobat de la société Adobe n est pas une solution Web mais elle est pertinente pour la diffusion des données comme l explique [Poitevin, 2010]. En effet, son avantage réside dans le contrôle et la sécurité des données puisqu elles sont encapsulées 20 dans un fichier. Il est également 16 Virtual Reality Modeling Language, ISO/IEC : COLLAborative Design Activity 18 Extensible 3D Graphics, ISO/IEC Non-Uniform Rational Basis Splines 20 Voir glossaire Page 8

17 Etat de l art facilement lu par les destinataires du modèle puisque le visualisateur Acrobat Reader a la possibilité de le faire au même titre que les documents d extension *.pdf. Cependant, ce logiciel a des limites. Il ne permet pas de rendre le modèle interactif. En effet, en programmant des scripts en ActionScript (proche du JavaScript), son langage de développement, on peut obtenir au mieux des animations comme l assemblage et le désassemblage d un modèle, démontrant les effets d un composant sur un autre ou présentant des modifications dans différentes situations Flash CS4 Flash a vu le jour en tant que Future Splash Animator, petit programme fort pratique pour créer et animer des illustrations vectorielles. [Ulrich, 2000] Flash CS4 est un logiciel de création d animations vectorielles pour le Web et les cédéroms. [Pupier, 2009] Il réalise des modèles contenant un ensemble d animations. Cependant, celui-ci reste sous forme vectorielle (fil de fer) avec des importations de fichier tel qu Autocad DXF version 10. Le flash permet de faire interagir le modèle animé avec d autres objets par le moyen d URL. Cela est réalisable par l intermédiaire de clip ou bouton. De même, on peut gérer assez facilement l ensemble de l interactivité entre l animation et l utilisateur (raccourcis clavier, réglage de souris ). De plus la sécurité est assurée, en effet l animation est encapsulée. (Fichier *.swf) Les inconvénients de ce programme sont multiples. En effet, Flash est édité par Flash Player un logiciel propriétaire disponible dans la suite Adobe. De plus l automatisation ne sera pas aisée en cas d ajout ou de mise à jour du modèle 3D car une fois le modèle édité aucun ajout ou modification n est possible si ce n est en revenant dans l édition. Donc, les liens URL seront toujours à remettre à jour dans Flash Player pour ensuite recréer l animation flash. Même si ce format est largement implanté de par sa grande diffusion sur les pages web, il nécessite un module d extension et n est pas pris en charge nativement par les navigateurs Solutions Web 3D City-GML Le CityGML est un langage reprenant la base du GML3, il a été développé pour la représentation des environnements urbains. C est un modèle développé par Initiative Geodata Infrastructure North- Rhine Westphalia in Germany (GDI NRW) il a été reconnu par l OGC en [Kolbe, 2007] Le CityGML permet la visualisation d un environnement urbain. De plus, l ajout d une sémantique lui octroie une information supplémentaire entre les différents éléments qui constituent le modèle. La visualisation est construite sur le principe des LOD (Level Of Detail) qui sont aux nombres de cinq : LOD0, représente la région du site ; LOD1, représente la ville avec ses bâtiments en simple extrusion ; LOD2, représente la ville avec des bâtiments texturés et des structures différentes de toits ; LOD3, représente la ville avec des architectures variées de bâtiments ; LOD4, représente la ville avec des parties intérieures de bâtiment, il est alors possible de «marcher à l intérieur du modèle 3D». Nous pouvons visualiser ces modèles à partir de logiciel de visualisation fourni sur le site allemand de CityGML ( mais aussi par des logiciels qui s ouvrent à ce modèle de représentation comme Autodesk LandXplorer. Page 9

18 Etat de l art L interactivité de ce modèle avec d autres types de données est prévue, de même que l interopérabilité du modèle avec d autres types de base de données comme par exemple celle du cadastre. Dans le document de [Kolbe, 2007] une comparaison entre les différents langages de représentation d un modèle 3D est faite : X3D U3D KML Collada IFC CityGML Géométrie Géoréférencement + + (IFG)+ ++ Apparence Topologie Sémantique 0 0/ Lien/ancrage Tableau 4.1 : Comparatif de format 3D [Kolbe, 2007] 0 : basique, + : sophistiqué, ++ : complet ; les cases non remplis correspondent à une fonctionnalité non-supportée Cette comparaison montre à son avantage le format CityGML, mais il a pour moi l intérêt de lister les manques de certains formats dans ces 6 critères. Elle a permis d être reprise par la suite avec d autres critères pris en compte comme la publication par internet, l accessibilité (mis en place ou non d un module d extension) ou les langages de développement. (Cf. Tableau 5.1) A noter que les formats U3D, KML et IFC ne seront pas décrits par la suite. En voici une description succincte : KML 21 est un format en XML créée par Google, pour la visualisation dans Google Earth et peut être généré par Sketchup il utilise le format COLLADA. Il est de plus en plus pris en compte par les SIG (ArcGlobe fournie avec l'extension 3D Analyst d ArcGIS depuis la version 9.2). IFC 22 est un format créé pour l interopérabilité des logiciels de construction. Il est géré par l IAI (Alliance International pour l Interopérabilité). Il a reçu l homologation de l ISO sous la référence ISO/PAS en Novembre U3D 23 est géré par le consortium 3D Industry Forum. Il a pour objectifs au même titre que le Collada de faire le pont entre les nombreux formats propriétaires trop lourd et trop complexe et des applications web. Il met tout de même l accent sur la visualisation O3D O3D est une API 24 permettant de créer des applications interactives en 3D. C est un projet qui a été soutenu par Google. Il est basé sur deux couches de programmation. La première utilisant du code C++ pour créer un plugin pour faire le lien avec le navigateur en utilisant les technologies OpenGL ou Direct X. La deuxième couche de programmation est codée en JavaScript et en AJAX pour permettre l interaction avec le serveur et la manipulation du modèle. [Behr et al., 2009] Le 7 mai 2010, Google a annoncé la fin du développement de l'api O3D et sa fusion avec WebGL. [Cœur, 2010] 21 Keyhole Markup Language 22 Industry Foundation Classes 23 Universal 3D 24 Interface de programmation (Application Programming Interface) Page 10

19 Etat de l art XML3D 25 XML3D est un projet initié par le groupe Intel VCI 26. Il s agit d une collaboration entre la société Intel, l université de Sarre en Allemagne, le centre de recherche allemand en intelligence artificielle (DFKI 27 ) l institut Max-Planck pour l informatique et pour les systèmes logiciels.[xml3d@2011] XML3D est un format de description de scènes 3D sous forme d extension des documents Web actuels. Les scènes 3D peuvent être décrites dans un fichier autonome ou être directement intégrées dans l arbre DOM 28 d un document HTML. [Esnault, 2011] Il existe des convertisseurs permettant d adapter des modèles 3D issus des logiciels Blender et Cinema 4D mais aussi du format CityGML à la structure XML3D. Un module d extension est nécessaire pour la visualisation, mais il existe seulement pour les navigateurs Firefox et Chrome. C est un projet ouvert qui a pour ambition de faire évoluer les technologies du Web pour intégrer la 3D de façon aisée WebGl Le WebGL 29 est une technologie permettant de visualiser une scène 3D sur un navigateur sans avoir à télécharger de module d extension. Le navigateur Chrome de la firme Google dans sa version 9 a été le premier à le permettre. Il a été suivi par Firefox de l entreprise Mozilla dans sa version 4. Le principe du fonctionnement est l utilisation de l Open GL 2 ES qui utilise les ressources de la carte graphique du client, le tout, piloté sur la page web par du JavaScript. [Turkowski, 2010] L OpenGL 30 est une API permettant la génération d application 2D et 3D à partir d une bibliothèque de fonction. Elle est utilisée dans beaucoup d applications scientifiques, industrielles et aussi pour des jeux vidéo. Le consortium KHRONOS, qui gère le COLLADA est également à la tête du développement de la technologie WebGL. Avant de s en concentrer intégralement, Google avait également développé une application nommé O3D permettant la visualisation de modèle 3D sans plugin (Cf ). Cette technologie était prometteuse car elle permettait outre les mêmes fonctionnalités que le WebGL la fonction de picking et celle de charger dynamiquement des modèles en utilisant AJAX 31 (Cf ) [Cœur, 2010]. Depuis le développement de cette technologie, nombreux sont les projets qui l exploitent pour intégrer nativement des modèles 3D sur une page HTML. Les trois prochains paragraphes essaieront de passer en revue plusieurs projets issus de ce développement X3DOM X3DOM (prononcé freedom) est un projet open source, sorti en 2010 et soutenu par l institut de recherche Allemand Fraunhofer-Gesellschaft. Cette technologie intègre un modèle X3D dans une structure HTML5 (Cf ). L idée est d intégrer le modèle X3D entre deux balises <canvas>du HTML 5. De même sur le site du X3DOM, 2011], un outil on-line permet de transcrire du VRML97ou X3D en X3D, X3DOM-XHTML ou X3DOM-HTML5. 25 extensible Markup Language for 3D 26 The Intel Visual Computing Institute 27 German Research Center for Artificial Intelligence 28 Document Object Model 29 Web-based Graphic Language 30 Open Graphics Library 31 Asynchronous JAvascript and Xml Page 11

20 Etat de l art X3DOM est un script JavaScript permettant de faire le lien entre le WebGL avec un modèle 3D d extension X3D. Il existe quelques ombres à ce projet qui se dissipent. Notamment, le fait d avoir un navigateur à jour intégrant le WebGL ne devrait plus être un problème car dans ce cas le format flash prendrait le relais. Mais, d après [Paulis, 2010], l intégration entre le X3D et le HTML 5 demande encore des clarifications GLGE GLGE est un script JavaScript réalisant le lien entre le WebGL avec un modèle 3D d extension COLLADA. Il utilise les mêmes ressorts que le projet X3DOM c est à dire le HTML 5 et sa nouvelle balise <Canvas> et le WebGL dérivant de l OPenGL. (Cf ) [Turkowski, 2010] Son but est de faire gagner du temps au web développeur dans le maniement de l OpenGL ES 2 en créant des nouvelles fonctions. Parmi-elles l intégration et l animation de modèle 3D au format Collada sont très intéressantes. (Voir Figure 4.6 ci-dessous) Le résultat est un modèle 3D interactif obtenu sur une page web sans ajout de module d extension, seul le JavaScript GLGE étant nécessaire. [ XB Point Stream Ce projet débuté par l école des études informatiques de l université Seneca de Toronto propose une solution de visualisation 3D sur le Web. L originalité de ce projet est d utiliser comme données un nuage de points colorisé. (Voir Figure 4.7 ci-dessous) Cette application se base sur une API développée en JavaScript et exploitant le WebGL. Elle est alors supportée nativement par les navigateurs tels que Firefox ou Chrome dans leur dernière version. L API s adapte à différents formats de nuage de points. [XB Point@2011] 3D Image Suite [Arius 3D@2011]est une application permettant d utiliser facilement cette API. Elle propose notamment de: Visualiser et analyser le contenu 3D (manipuler l éclairage et la position, mode de vue stéréo ) Gérer le nuage de points (le nettoyer et l éditer, calage des images constituant la texture ) Présenter le rendu (créer des animations, des possibilités d impression ) Figure 4.6 : Animation d'objet Collada par le JavaScript GLGE Figure 4.7: Objet visualisé en nuage de points ( points) [XBPoint@2011] Page 12

21 Etat de l art Truview Cet outil réalise également une visualisation d un nuage de points colorisés. Mais, il est dévolu au nuage de points obtenu à la suite d un levé de scanner laser issu d un appareil Leica. En effet, l édition se fait depuis le logiciel Cyclone propriété de la même société. [Poitevin, 2010] Il est obtenu aves la technologie OpenGL sur le navigateur Internet Explorer après l installation d un module d extension. Il est également possible d ajouter des URL et quelques outils sont présents comme la possibilité d obtenir une distance dans le nuage de points. Mais, le point d observation reste statique (Celui de l emplacement du scanner). 4.5 Annotation des modèles 3D L annotation des modèles 3D constitue une solution pour sa structuration. En enrichissant les éléments constitutifs du modèle de renseignements supplémentaires et en y apportant une sémantique 32 elle permet de rendre le contenu exploitable par des agents logiciels. [Aubry, 2007] Différentes théories Les annotations dans les modèles 3D est une problématique pluridisciplinaire comme le montre la thèse de [Aubry, 2007] qui développe une application permettant l annotation de modèle 3D en vue d un projet collaboratif. Cet outil est conçu au sein d un logiciel propriétaire de Dassault System Virtool nécessaire pour la visualisation et l édition du modèle sur internet. La sémantique est en question dans la thèse de [Busayarat, 2010]. En effet, la façon de structurer les entités constituant le modèle 3D se retrouve par la suite dans la conception de la base de données. Dans cette thèse, la décomposition du modèle 3D suit la théorie de [De Luca, 2006] qui a développé cet aspect du programme NUBES. Ce développement est basé en trois parties : Classification selon un point de vue (un vocabulaire ou une analyse spécifique) ; Décomposition morphologique ; Création d association. La première partie consiste à prendre en compte un thème de décomposition comme des matériaux, des éléments ou leurs aspects morphologiques. A partir de ce choix d analyse, une division du modèle est effectuée. Il en suit un graphe de description (voir la Figure 4.8), où chaque élément est structuré dans une arborescence dans lesquels trois types de nœuds du plus précis au plus général: Repère Entité Groupe Une autre approche consiste à faire le lien entre le modèle 3D et la base de données en créant autour du modèle 3D des zones de vues. Dans une étude de [Carrozzino et al., 2009] des sphères artificielles sont utilisées liant le modèle 3D et les métadonnées se trouvant dans la base de données. Dans une autre étude de [Creelle et al., 2007] les zones de vues sont construites à partir de plusieurs points 32 Voir Glossaire Page 13

22 Etat de l art connus en orientation et en position. Cette technique permet de créer facilement des liens entre le modèle 3D et la base de données. L inconvénient de cette méthode réside dans la mise à jour du modèle. En effet, si celui-ci est modifié, les points de vue sont de nouveau à mettre à jour, ce qui entraîne un manque d automatisation Logiciels d annotations de modèle 3D Un autre projet, institué par le consortium AIM@SHAPE 33 consiste à annoter les parties d un modèle maillé sous forme de métadonnée. L application BE-SMART 34 qui est en cours de développement, permettra de structurer les différentes parties d un modèle 3D et de les annoter selon une ontologie 35 de métadonnées. [De Floriani et al., 2007] L application Annotator Meshes permet déjà de distinguer les parties d un modèle 3D pour ensuite en créer une structure sémantique. L objet est analysé automatiquement ou manuellement afin d identifier les parties intéressantes. Elles sont ensuite annotées et enregistrées dans un fichier *.owl qui est lié au fichier *.ply de l objet 3D. [Attene et al., 2007] (Voir la Figure 4.9 ci-dessous) Figure 4.8: Graphe de description d'un objet selon De Luca [Busayarat, 2008] Figure 4.9: Exemple d'objet annotée par le logiciel Annotator Meshes [Attene et al., 2007] Le projet de [Gaborit&Vasseur, 2011] propose une solution concernant l ajout d annotation d un modèle 3D au sein du logiciel Sketchup. L installation d un modèle d extension Attribs a permis de lier les éléments du modèle à une base de données en ajoutant une URL. 33 A.I.M.A.T.S.H.A.P.E. - Advanced and Innovative Models And Tools for the development of Semantic-based systems for Handling, Acquiring, and Processing knowledge Embedded in multidimensional digital objects 34 BEyond Shape Modeling for understanding Real world representations 35 Voir Glossaire Page 14

23 Etat de l art 4.6 Description des langages web côté serveur et côté client Dans l ensemble des solutions décrites précédemment, il a souvent été question des navigateurs ou des modules d extension pour la prise en charge de la visualisation. Ceci constitue la partie «client» d une application Web. En effet, nous distinguons deux parties ou côtés (Voir ci-dessous Figure 4.10): La partie «client», est constituée de l ordinateur de l utilisateur (client) et de l ensemble des logiciels qui y sont présents. Au premier titre, les navigateurs qui sont nécessaires à la prise en charge des pages HTML (composées facultativement de JavaScript et de CSS). Il est parfois nécessaire d installer des modules d extension, c est alors à l utilisateur de le mettre en place. La partie serveur constituée d un serveur, d un système de gestion de base de données et d un langage serveur. Elles occupent deux fonctions, envoyer des pages HTML au navigateur et réaliser des traitements demandés par l utilisateur sur la base de données. Figure 4.10: Fonctionnement des parties serveur et client ( modifié) Côté client Comme il a été dit précédemment, le navigateur est le principal composant du côté client. Parmi les plus couramment utilisés, nous pouvons citer Internet Explorer de la firme Microsoft, Firefox de la compagnie Mozilla, Chrome de la société Google et Safari d Apple. (Voir Tableau 4.2 ci-dessous) Source Tableau 4.2: Part de marché des navigateurs (source wikipédia) Internet Explorer Microsoft Firefox Mozilla Chrome Google Safari Apple Statcounter (Monde) 43,58 % 28,34 % 20,65 % 5,07 % Statcounter (Europe) 35,47 % 34,67 % 19,96 % 5,30 % Statcounter (France) 36,54 % 35,63 % 18,83 % 7,29 % AT internet Institute (Europe - Avril 2011) 46,30 % 29,50 % 12,80 % 8,30 % Net Applications (Monde) 53,68 % 21,67 % 13,11 % 7,48 % W3Counter (Monde) 36,30 % 28,20 % 18,70 % 6,30 % Les navigateurs traduisent les codes HTML, JavaScript et CSS qui leurs sont soumis et à ce titre des différences d interprétations peuvent apparaître. Pire, des fonctionnalités présentes chez les uns ne le Page 15

24 Etat de l art sont pas chez d autres. Pour preuve la fonctionnalité WebGL qui n est présente que chez Firefox et Chrome parmi les navigateurs précédemment cités Côté serveur Serveur de base de données Un serveur de base de données est un programme pouvant stocker de très gros volumes d informations sous une forme structurée aisément accessible à travers des langages de programmations [Yank, 2009]. Les bases de données les plus couramment citées sont MySQL et PostGreSQL. Les deux étant des solutions libres. Il existe des bases de données intégrant un module de données spatiales. Ce sont des outils qui offrent généralement la possibilité de stocker et de requêter des objets géométriques sous forme de points, de lignes, de polygones et exceptionnellement de solides (Oracle Spatial depuis sa version 11g) ou sous forme matricielle au sein de bases de données. [Desgagné, 2010] Dans le PFE de [Gruau, 2007] deux bases de données spatiales (en solution libre) sont citées : PostgreSQL couplé à PostGIS et MySQL couplé à MyGIS. La première avait été retenue pour des raisons de meilleure gestion des données 3D Langage Serveur Parmi les langages serveur, je présenterai le PHP et l ASP 36. Mais il en existe beaucoup comme Perl, Python ou encore Ruby. Le PHP est un langage côté serveur à contrario des langages côté client comme HTML, CSS et JavaScript. Le PHP est exécuté par le serveur avant qu il envoie la page au navigateur. Une fois que le serveur web a exécuté le code PHP contenu dans une page, le résultat de cette exécution prend la place du code PHP de cette page. Le navigateur ne voit alors que du HTML. [Yank, 2009] Le langage ASP est un langage de programmation créé par Microsoft dans le but de dynamiser les sites web, il ne fonctionne uniquement en mode natif sur des plates-formes Windows. ( Plate forme WAMP Il existe une solution forte intéressante pour mettre en œuvre un serveur, un Système de Gestion de Base de Données (SGBD) ainsi qu un langage serveur. Il s agit d une installation tout-en-un de l ensemble des éléments (aux versions récentes) du côté serveur comme WAMP ou EasyPHP. Le sigle WAMP peut être converti en LAMP ou MAMP selon l environnement de travail. En effet, le W signifie Windows, le L Linux et le M pour Mac. 36 Active Server Pages Page 16

25 Etat de l art 4.7 Normes des métadonnées Il existe différentes normes pour le classement des métadonnées. Cette problématique est commune à différents domaines comme l archivage, la gestion du patrimoine ou la muséologie. En effet, pour que l interopérabilité des bases de données soit efficace, l emploi d une norme pour les métadonnées est déterminant. De plus, pour la création d un SIG la structuration des métadonnées est également fondamentale, car elle permet de filtrer les données brutes. Différentes normes ont été créées par différents organismes, comme Dublin Core, EAD 37 ou encore RKMS 38. L ensemble de ces normes utilise le langage XML. Je détaillerai la norme Dublin Core et je finirai avec des applications Dublin Core Le Dublin Core est un schéma de gestion des métadonnées, il est enregistré sous la norme ISO :2009. Il est soutenu par un groupement le DCMI 39. Celle-ci a été rédigée en 1995 à Dublin (dans l Ohio) d où son nom. [Dublin Core@2010] Cette norme a été créée dans le but de répondre à 4 objectifs : Simplicité de création et de gestion : il existe 15 champs explicites permettant de les remplir facilement ; Sémantique communément comprise : Le Dublin Core convient à toutes les spécialités ou domaines d activités ; Envergure internationale : la norme prend en compte la nature multilingue et multiculturelle de l'univers de l'information électronique ; Extensibilité : les 15 champs peuvent être développés pour répondre aux caractéristiques particulières des objets à décrire. Elle a également pour principal aspect de retenir 15 données obligatoires : 1. Titre, 2. Créateur, 3. Sujet, 4. Description, 5. Éditeur, 6. Contributeur, 7. Date, 8. Type de ressource, 9. Format, 10. Identifiant de la ressource, 11. Source, 12. Langue, 13. Relation, 14. Couverture, 15. Droits. Chaque élément du Dublin Core est défini par un ensemble de dix attributs provenant de la description standard ISO/IEC [ISO11179] pour des éléments de donnée. Ce sont les attributs suivants: Nom - L'étiquette attachée à l'élément de donnée Identifiant - L'identifiant unique de l'élément de donnée Version - La version de l'élément Autorité - L'autorité autorisée à enregistrer l'élément Langue - La langue dans lequel l'élément est défini Définition - Une phrase qui définit clairement quelle est la principale nature de l'élément et à quel concept il correspond Obligation - Indique si la présence de l'élément est obligatoire ou optionnelle (C'est à dire s'il contient toujours une valeur ou non) Type - Indique le type de données qui peut être représenté dans la valeur de l'élément 37 Encoded Archival Description 38 Record Keeping Metadata Shema 39 Dublin Core Metadata Initiative Page 17

26 Etat de l art Occurrence - Indique une limite éventuelle sur le nombre maximum de fois que l'élément peut être répété Commentaire - Une remarque sur l'utilisation de cet élément de donnée Par chance, six des dix attributs ci-dessus sont communs à tous les éléments du Dublin Core. Ce sont, la version, l autorité, la langue, l obligation, le type, l occurrence. [Dublin Core@2010] Applications A partir de cette norme, plusieurs organismes l ont adapté à leurs exigences comme la BNF 40 qui utilise ce type de référencement pour classer ses documents. De même, le Ministère de la culture italien a développé une application permettant de remplir une fiche de type Dublin-Core avant l intégration de nouveaux documents dans son portail on-line de documents CulturaItaliana. Le SIG de [Meyer, 2007] fait référence à un projet du ministère de la culture sur la gestion des métadonnées nommé schéma DAPA 41. Il a été réalisé par la société AJLSM en 2004 et crée un véritable dossier électronique regroupant l ensemble des informations numériques d un objet. 4.8 Exemple de projet archéologique/web Dans ce chapitre, je détaillerai quatre projets de plateforme archéologique : CISAR, un Système d Information à Pompéi, un Système d Information du patrimoine et NUBES. Ils permettant la visualisation de données 2D ou 3D sur le web. Ils illustrent ce qui a déjà été réalisé pour ce type d étude. Le choix des technologies utilisées pour ces différents projets sera détaillé CISAR Description Le projet CISAR a été développé depuis 2004 conjointement par l université de Cottbus en Allemagne et par le DAI 42. Le but est de créer un Système d Information pour l Archéologie et le Patrimoine basé sur des logiciels open source [Piacentille, 2007]. Il est composé de quatre modules : (Voir Figure 4.11) Module de visualisation en 3D (Web-3D) ; Module de gestion de la base de données (Web-DB) ; Module de SIG Web (Web-GIS) ; Module de SIG bureau (Desktop-GIS) Choix des technologies Pour la visualisation, le premier module utilise le langage VRML. Tandis que le troisième utilise l API Google Map, le tout visualisable sur Google Earth. PostgreSQL avec le module PostGIS constitue la base de données spatiales. Le langage serveur est PHP. Aussi, les logiciels MapServeur et Mapbender sont utilisés pour l analyse, la visualisation et l édition des cartes géoréférencées. 40 Bibliothèque Nationale de France 41 Direction de l Architecture et du PAtrimoine 42 Deutches Archäelogisches Institut Institut allemand d archéologie Page 18

27 Etat de l art Figure 4.11: Structure du projet CISAR [Brasse et al., 2007] Enfin, le SIG bureau utilisé est Quantum-GIS. Une autre partie intéressante de ce projet est la structure adoptée lors de la conception de la base de données PostgreSQL. En effet, elle suit la structure physique d un bâtiment (mur, éléments horizontaux, ouvertures, décorations qui forment des pièces et enfin bâtiment) Système d information à Pompéi Description Ce projet de système d information a été développé par la SNS 43 conjointement à l université de Bologne, le SSANP 44 et la société Liberologico. Ce projet a pour but d aider à collecter les modèles 3D issus des fouilles et de les cataloguer dans le système d information. De même, il recueillera l ensemble des données relatives au site de Pompéi se situant autour du Vésuve. Il s agit d un site complexe puisque plusieurs opérateurs, avec chacun ses techniques de représentations, modélisent les différents objets composant les sites de fouilles.[baldissini et al., 2009] Le système se compose de plusieurs applications intéressantes : Le catalogage et l insertion des différentes données. Celui-ci intègre les standards de l ICCD 45 ; Un SIG voué à l importation, le classement, l organisation et la visualisation des données géographiques. Ces données peuvent être mises à jour dans un calque «shapefile» (format de la société ESRI) permettant ainsi une interopérabilité de ces données ; Le classement automatique des métadonnées dans un système Dublin Core ou pour l application PICO en cours de développement par le ministère de la culture italien. 43 Scuola Normale Superore of Pisa Ecole normale supérieure de Pise 44 Special Superintendence for Archaeological heritage of Naples and Pompeii 45 Istituto Centrale per il Catalogo e la Documentazione Institut centrale pour le catalogage et la documentation- Page 19

28 Etat de l art Choix des technologies Les technologies utilisées pour ce projet sont toutes des technologies open source: Le langage serveur PHP; La base de données MySQL; La création des photographies au format *.raw par l utilitaire DCRAW; La conversion des images en différents formats avec IMAGEMAGICK; L extraction des données EXIF appartenant aux photographies avec EXIFTOOL; La visualisation en 3D avec OSG4WEB, module d extension disponible pour les navigateurs Firefox et Internet Explorer et utilisant la technologie OpenGL Système d information dédié au patrimoine Description Le SIG dédié au patrimoine de [Meyer, 2007] vise à publier sur internet les données des sites patrimoniaux. Il permet de conserver, gérer et représenter des documents traditionnels, des données issues de relevés bi- et tridimensionnels mais aussi des résultats de travaux de restitution et d imagerie Choix des technologies L originalité du projet se situe dans la technique utilisée pour la base de données. En effet, elle est constituée d un double enregistrement. Une structure XML qui permet de décrire précisément les données et un enregistrement dans une base de données MySQL. La transcription du XML vers la base de données est faite par des scripts PHP. Le système tire profit de ces deux technologies: Le XML permet de présenter les données sur le Web de différentes manières selon le support et le public visé ; La base de données MySQL stocke des gros volumes de données et gèrent les différents accès. Les modèles 3D ont quand a eux été visualisés par la technologie VRML. Ils sont interactifs, le modèle peut être affiché selon des critères de lieux et de périodes. Les données bidimensionnelles le sont elles-aussi par la technologie SVG 46. (Voir ci-dessous Figure 4.12) Figure 4.12: Application du projet SIG archéologique Figure 4.13: Capture d écran du projet NUBES Visum (Vianden, Luxembourg) [Meyer, 2007] (La Sorbonne, Paris) [ 46 Scalable Vector Graphics Langage de description graphique basé sur le XML Page 20

29 Etat de l art NUBES Description Le projet NUBES, est développé par l équipe de recherche : Equipe GAMSAU (UMR 694 MAP). Il s inscrit à l'intérieur du programme 3D-Monuments et également en collaboration avec MONUM - Centre des monuments nationaux.[nubes@2006] Le projet se décompose en quatre parties : Nubes Forma : Outil de reconstruction 3D d'édifices patrimoniaux ; Nubes Tempus : Outil de structuration et analyse d'édifices patrimoniaux en fonction du temps ; Nubes Imago : Outil de consultation et de référencement spatial d'images ; Nubes Visum : Système de consultation des relevés et des représentations de l'édifice en ligne. (Voir Figure 4.13 page précédente) Choix des technologies Les deux premiers modules ont une interface disponible sous forme de module d extension sous le logiciel propriétaire Maya d Autodesk. Le module Imago est intégré au module Visum. Ce dernier utilise comme représentation 3D un nuage de points. Tous deux utilisent comme technologie : Une base de données en MySQL ; Une scène 3D interactive pour l'affichage et la manipulation des représentations 3D développée en Virtools DEV (logiciel propriétaire de Dassault Systèmes) ; Un site Internet dynamique par le langage serveur PHP. Page 21

30

31 5 Choix et description de la solution retenue Sommaire 5.1 Choix de la visualisation 3D Description de la solution retenue Technique de visualisation Choix de la base de données Développement de l interface Web 3D interactive Etape de construction de l interface Description des données à intégrer MCD Mise en place de la plate-forme WAMP PHP Gestion des éléments 3D 34 Le chapitre précédent cite l ensemble des solutions existantes actuellement pour la mise en place d une interface 3D. Maintenant, il s agit d analyser ces différentes pistes, de sélectionner la plus adaptée et de la développer. La première partie sera consacrée à l analyse et au choix de la solution retenue pour la visualisation 3D des éléments. A partir de cette décision, la construction de l interface peut débuter. Les deux dernières parties sont dédiées à cette démarche. Elles détailleront les technologies retenues en concordance avec la visualisation 3D. Puis elles laisseront place aux développements informatiques. Page 23

32 Choix et description de la solution retenue 5.1 Choix de la visualisation 3D La bibliographie nous a permis de lister un ensemble de technologies pouvant intervenir dans la solution finale. Celle-ci doit répondre aux objectifs fixés lors de l étude fonctionnelle. (Voir Annexe A La première certitude a été l installation d une base de données pour pouvoir stocker et structurer les différents types de données. (Cf ) Dès lors, la principale difficulté a été de choisir une technologie de visualisation 3D accessible sur le web et permettant de faire le lien avec cette base de données. Nous obtenons ainsi 7 solutions : VRML ; X3D+WebGL (X3DOM) ; Collada+WebGL (GLGE) ; XML 3D ; Acrobat 3D ; Flash ; CityGML. Nous avons privilégié les solutions open source, accessibles (avec si possible aucune installation de module d extension) et interactives avec l utilisateur. (Voir Annexe A Le premier critère élimine les technologies Acrobat 3D et Flash. En effet, même si leurs visualisations sont gratuites, elles restent des logiciels propriétaires de la société Adobe. De plus, elles ne répondent pas au dernier critère concernant l interactivité. Deux autres technologies ont été écartées, XML 3D et la solution Collada+WebGL faisant intervenir le JavaScript GLGE. Leurs développements sont trop récents et trop peu documentés. Le CityGML est basé sur l environnement urbain ce qui n est pas totalement adéquat avec notre projet. Aussi, de nombreux développements auraient été nécessaires pour le rendre approprié. En effet, cela entraîne des modifications de deux couches de programmation, celle des modules d extension pour la visualisation et celle de l ajout de nouvelle classe GML. Le VRML a été supprimé, il est ancien et a été remplacé par le X3D. C est la solution du X3D avec une visualisation par le JavaScript X3DOM et la technologie WebGL qui a été retenue. Le tableau résume les comparaisons qui viennent d être effectuées. (Voir Tableau 5.1 ci-après) Page 24

33 Choix et description de la solution retenue Tableau 5.1: Comparatif des solutions de visualisation 3D 5.2 Description de la solution retenue Technique de visualisation Cette solution obtenue par élimination des autres technologies ne doit pas mettre hors de vue ses qualités. En effet, le collectif X3DOM présente des garanties suffisantes pour son utilisation. Il est soutenu par le projet européen 3D-Coform sa documentation est complète et régulièrement mise à jour. Un cahier des charges est fixé pour voir l avancement des développements en cours et à venir (voir Figure 5.2). De même, le site internet est bien documenté et quelques tutoriels permettent de prendre en main les fonctions de base. Comme il a été dit dans l état de l art (cf ), X3DOM est un script JavaScript qui fait le lien entre le modèle 3D au format X3D et le WebGL. L accessibilité au modèle 3D est donc assurée par le navigateur si celui-ci est compatible avec la technologie WebGL. Une alternative est implémentée depuis peu pour les navigateurs n ayant pas cette fonctionnalité (notamment Internet Explorer) en utilisant en complément la technologie Flash. De même, si un module d extension a été installé pour la visualisation des formats X3D, il le détecte. Il est possible de visualiser à partir plusieurs plates-formes (Voir Figure 5.1ci-contre): (a) (b) (c) Figure 5.1: Modèle 3D visualisé depuis (a) iphone App avec WebKit extension (b) Internet Explorer avec plugin X3D (c) Nokia N900 implémentée du WebGL [X3dom@2011] Page 25

34 Choix et description de la solution retenue Voici la chaîne de traitement du JavaScript X3DOM avec les développements datés de 2011 : Figure 5.2: Traitement du JavaScript avec projet d'avancement [X3dom@2011] De même, sur le site 2011] figure la liste des fonctions reprises du VRML et implémentées dans le JavaScript Choix de la base de données La technique de visualisation étant choisie, il s agit de mettre en place le lien qui va être fait avec la base de données. Les techniques d annotations des modèles 3D étant expérimentales, le lien se fera par le X3DOM qui bénéficie de fonction d interactivité avec un serveur. Il existe deux solutions, l une utilise la base de données MySQL, l autre la base de données spatiales PostgreSQL couplée à PostGIS. Page 26

35 Choix et description de la solution retenue Cette deuxième solution inclut une déstructuration du fichier X3D des éléments nécessaires à la représentation pour leurs insertions dans la base de données. Une fois stocké, il faut restructurer le format X3D pour que le X3DOM le prenne en compte. (Voir Figure 5.3 ci-après) Fichier X3D Insertion dans la base de données PostgreSQL Reconstruction du format X3D Interaction PHP WebGL (X3DOM) Figure 5.3 : Chaîne de traitement de la solution PostgreSQL-PostGIS Cette solution quoique réalisable, semble tout de même incertaine. Les décompositions dans le PFE de [Gruau, 2007] se fait à travers un module d extension installé depuis le logiciel propriétaire 3DSMAX. Aussi, la reconstruction aurait fait appel à des fonctions élaborées par l entreprise Camp2Camp mais qui ne sont plus développées. La deuxième solution utilisant la base de données MySQL a donc été retenue. En effet, même si les éléments stockés sont des éléments 3D, ils n en restent pas moins stockables dans une base de données simple. Elle a été mise en place par l installation de la plate-forme WAMP et sera développée dans le paragraphe Fichier X3D Insertion Base de données MySQL Interaction PHP WebGL (X3DOM) Figure 5.4 : Chaîne de traitement de la solution MySQL Page 27

36 Choix et description de la solution retenue 5.3 Développement de l interface Web 3D interactive Etape de construction de l interface Pour structurer la mise en place de l interface, j ai pris pour exemple de cycle de vie d un projet SIG [Bernard, 1992] qui décompose en 4 étapes la mise en place de l outil : Etude fonctionnelle Etude de faisabilité Test à petite échelle Test à plus grande échelle Figure 5.5: Etape de construction d'un projet SIG L étude fonctionnelle a consisté à décrire l ensemble des objectifs, selon leurs degrés d importance demandés au futur produit. (Voir annexe A ) L étude de faisabilité a été réalisée par l intermédiaire de l état de l art. Elle a permis de trouver la solution adéquate en analysant les différentes solutions possibles. Les tests à petite échelle constituent l ensemble des premiers développements qui sont présentés dans ce chapitre. Les tests à grande échelle consistent à améliorer le produit sur les problèmes rencontrés lors de l intégration de l ensemble des données du projet. Elles seront détaillées dans la dernière partie dans le paragraphe dédié aux perspectives Description des données à intégrer Les données à intégrer sont de différentes natures et représentent un volume important. En effet, l association du Vieux Châtel possède beaucoup de documents de différentes natures (photographies, factures, objets retrouvés, plans, etc.) issus des 40 années de fouilles qu elle a entreprise. Ils représentent par exemple des milliers de photographies. Aussi, beaucoup de documents de grandes valeurs historiques ont été découverts, quelque uns sont exposés au musée situé prés de la forteresse de Châtel-sur-Moselle. Figure 5.7: Coupe de la salle des gardes Figure 5.6: Photographie de l année 1976 de la salle des gardes Page 28

37 Choix et description de la solution retenue De plus, les campagnes de modélisation des parties extérieures et intérieures de la forteresse ont permis d obtenir des modèles 3D. Enfin, lors du PFE de [Poitevin, 2010], des panoramiques des pièces intérieures ont été réalisées et intégrées dans un dispositif de visite virtuelle. Sur les Figure 5.7, Figure 5.6 et ci-dessous Figure 5.8 (b) (c) nous pouvons voir la même pièce intérieure de la forteresse (salle des gardes) sur plusieurs supports différents. (Plan, photographie, modèle 3D et panoramique). (a) (b) (c) Figure 5.8: (a) Modèle 3D des parties extérieures de la forteresse (b) Modèle 3D des parties intérieures, salle des gardes (c) Visite virtuelle de la salle des gardes Page 29

38 Choix et description de la solution retenue Les données à intégrer sont variées, mais ne constituent pas un obstacle au niveau du stockage dans la base de données. En effet, le serveur MySQL est capable d intégrer un ensemble varié de données, mais dans notre cas, nous avons fait le choix du stockage à l extérieur de la base de données. C'est-àdire que le classement est effectué sur le serveur et seul le lien URL du fichier déposé subsiste dans la base. Ce stockage est réalisé grâce au système de gestion de contenu. (cf ) MCD Description Le MCD est une phase importante dans la construction d un SIG. A partir de l analyse des besoins, il permet de recenser les liens entre les données et d en produire une représentation schématique.[koehl, 2010] Il est composé d entités avec leurs relations. Chacune contient des cardinalités qui représentent le nombre minimal et maximal de fois que l association peut se produire entre les entités. La base de données qui structure l interface a été conçue pour satisfaire à l ensemble des demandes formulées lors de l étude fonctionnelle. La structure du projet CISAR a été reprise en partie c'est-à-dire une décomposition en élément simple du bâtiment se limitant aux éléments : sol, plafond, ouverture, mur et mobilier. Le MCD est constitué de trois parties : Les tables des requêtes regroupent à la fois les tables ajoutant de l information, période, lieu et créateur mais aussi une partie administration avec la table rôle ; Les tables du bâtiment comme son nom l indique constituent l ensemble des éléments de l édifice : mur, ouverture, sol, plafond et mobilier ; Les tables des documents représentent l ensemble des documents classés par type : plan, texte, modèle 3D et photographie (simple et panoramique). Elles ont le préfixe «Bd» à leur nom pour signifier qu elle stocke un fichier. Le volet administratif évoqué dans la partie tables des requêtes est constitué des champs mots de passe et login de la table créateur ainsi que de la table rôle dans son intégralité Relations L ensemble tables des requêtes est en relation avec tables du bâtiment. Il est à noter que la table Bd_modèle_3D se démarque des autres tables pour la partie tables des documents. Celle-ci est liée à l ensemble des tables du bâtiment. En revanche, les autres tables de cette partie sont liées par les informations lieu et créateur. Cela sera expliqué par la suite. Les relations et leurs cardinalités sont lisibles sur le MCD de la Figure 5.9 (voir ci-après). 47 Modèle Conceptuel de Données Page 30

39 Choix et description de la solution retenue Figure 5.9: Modèle Conceptuel de Données de l'interface Page 31

40 Choix et description de la solution retenue Mise en place de la plate-forme WAMP La technologie choisie pour le développement de la base de données est le MySQL. (Cf ) Pour mettre en place la partie serveur de l interface, il est plus facile d installer une solution tout en un. A savoir une plateforme WAMP puisque nous étions sous environnement Windows. Celle-ci comprend donc : Un serveur : Apache ; Un Système de Gestion de Base de Données (SGBD) : PhpMyAdmin ; Un langage serveur PHP. Le pack WAMP comprend ces technologies dans leurs dernières versions, mais il est possible de mettre en place des versions antérieures dont la stabilité n est plus à démontrer. Pour la construction de la base de données, le SGBD nous facilite grandement la tâche, il permet de construire les tables, gérer les relations, sauvegarder la base et gérer les privilèges (login, mot de passe). Une notice est présente en annexe. (Cf. Annexe B ) Figure 5.10: Interface de phpmyadmin Quand aux données, il faut les stocker à la racine du serveur, c'est-à-dire dans le fichier www créé lors de l installation de WAMP situé sur le disque local du PC ayant en charge le serveur PHP La création de script PHP fait le lien entre la page web et les données situées sur le serveur Système de gestion de contenu La première étape est la création d un système de gestion de contenu 48 non seulement accessible sur le PC ayant en charge le serveur, mais à l ensemble des utilisateurs de l interface. Un point important est la sécurité de ce système, il faut que cette partie ne soit autorisée qu aux spécialistes ou professionnels afin que les données sensibles ne soient pas accessibles par le simple utilisateur. (Nous y reviendrons au chapitre 3) 48 Ou CMS, Content Management System Page 32

41 Choix et description de la solution retenue Aussi, pour l utilisateur possédant des droits d accès vers ce système, il faut que les scripts PHP vérifient les données soumises. Il est important que les fichiers transmis soient exploitables, ainsi plusieurs vérifications d usage sont systématiquement effectuées comme le contrôle de l extension. Le SGBD est l outil permettant de remplir la base de données à travers des formulaires remplis par l utilisateur. L accès se fait en choisissant la table adéquate. Nous distinguons deux types de formulaires en concordance aux deux types de tables (Voir Figure 5.12) : Les tables du bâtiment et les tables des requêtes prennent en charge des métadonnées intégralement stockées sur les tables concernées ; Les tables des documents sont composées de métadonnées mais aussi d un dépôt de fichier situé sur le PC de l utilisateur et qui sera enregistré sur le serveur. Figure 5.12: Différence des deux formulaires Figure 5.11: Capture d'écran du SGBD (table mur) Pour le premier type de formulaire, l intégralité des données se situe dans les tables. Leurs contenus sont visualisables dans des tableaux situés à la suite des formulaires. Les fonctions associées à chaque ligne de la table sont la modification et la suppression. (Voir Figure 5.11ci-dessus) Pour le deuxième type de formulaires, les fichiers déposés sont situés sur la racine du serveur selon leurs natures. Nous avons donc 5 fichiers présents : plan, photographie, panoramique, modèle 3D et texte. A noter que le système de gestion de contenu gère l ensemble des dépôts des documents à l exception des images panoramiques. En effet, celles-ci ont été intégrées à un système de visite virtuelle encapsulée dans le format flash. Il en résulte un nombre important de fichiers nécessaires pour la bonne exécution de ce programme. De ce fait, j ai déposé l ensemble des fichiers sur le serveur puis j ai récupéré l URL 49 correspondante pour l insérer dans la base de données. Les photographies panoramiques ont été intégrées dans la suite par des images miniatures liées à cette URL. 49 Uniform Resource Locator - hyperlien Page 33

42 Choix et description de la solution retenue Les fonctions associées à chaque champ des tables des documents sont la suppression et le téléchargement. Les fichiers qui sont stockés portent leurs noms d origine en y ajoutant l heure (du serveur). Cela permet de les distinguer et de ne pas écraser un fichier portant le même nom. En effet, il peut arriver qu un élément du bâtiment se situe dans deux périodes différentes. Nous pouvons alors déposer deux fois le même fichier X3D avec un identifiant sur la période différente. (Voir Annexe A ) Seul le cas de la texture associée au fichier X3D fait exception. Elle est située dans le fichier modèle 3D et est renommée de la même façon que le nom attribué lors de la création du modèle 3D sous Sketchup, mais nous en reparlerons dans le paragraphe Le système de gestion de contenu, permet donc de remplir la base de données de documents. Elle gère également l administration en créant des mots de passe avec login ainsi que des rôles au créateur. (Cf ) Lancement de page à la volée L un des avantages de faire appel à un langage serveur comme PHP est la création de page web dynamique. Quand le script PHP est en place, le changement des données dans la base se répercute sur la page HTML. Pour effectuer les requêtes de l utilisateur vers la base de données, nous faisons appel au langage SQL 50. C est à la fois : un langage d'interrogation de la base (SELECT) ; un Langage de Manipulation des Données, LMD (ordres UPDATE, INSERT, DELETE) ; un Langage de Définition des Données, LDD (ordres CREATE, ALTER, DROP) ; un Langage de Contrôle de l'accès aux Données, LCD (ordres GRANT, REVOKE). L utilisateur soumet les données (1), le script PHP les reçoit et les transmet sous des requêtes SQL au serveur MySQL (2), le serveur renvoie les données trouvées ou signifie que l exécution a bien été effectuée, (3) enfin, le script PHP récupère les données et les affiche dans le tableau à la suite du formulaire (4). (Voir Figure ci-dessous) Figure 5.13: Fonctionnement SGBD Gestion des éléments 3D Intéressons-nous maintenant, plus particulièrement, à la gestion du modèle 3D. Le SGBD créé, nous pouvons insérer les modèles 3D dans la base de données sous forme de fichier d extension *.x3d avec une texture associée. 50 Structured Query Language - Langage d interrogation structuré Page 34

43 Choix et description de la solution retenue Enregistrement du fichier en extension *.x3d Le modèle 3D est à la base située sur le logiciel gratuit Sketchup. Depuis ce logiciel, son exportation dans l extension *.x3d n est pas proposée. Il a donc fallu passer par un autre logiciel permettant de l exporter dans l extension voulue. C est le logiciel gratuit MeshLab qui va s en charger. Pour passer de Sketchup à MeshLab, le modèle passe par l exportation Collada (*.dae) qui rappelonsle a été conçu pour servir de passerelle entre différents logiciels. Il remplit ici parfaitement son but initial. Figure 5.14: Chaine de traitement d'un modèle 3D (Chouette) Cette chaîne de traitement comporte quelques subtilités comme l exportation depuis Sketchup des textures recto-verso mais pas des arrêtes composant les mailles pour des problèmes de visualisation du X3DOM. (Voir Annexe A page 85-86) La texture qui est affectée au modèle 3D est, elle aussi, exportée dans un fichier annexe portant le nom du modèle. Mais, elle est produite sous le nom texture0 puis incrémentée pour les autres présentes. Ce changement d appellation est gênant, car cela ne permet plus de faire le lien entre le modèle 3D et sa texture. Il faut alors renommer la texture avec son nom d origine et contrôler si c est bien celle-ci qui est inscrite dans le fichier du modèle 3D. C est pour cela aussi, que nous ne renommons pas le fichier texture dans le SGBD, ainsi sa liaison avec le fichier *.x3d est conservée. (Voir ci-dessus Figure 5.16) Figure 5.16: Exemple fichier X3D Figure 5.15: Décomposition du modèle 3D Page 35

44 Choix et description de la solution retenue Décomposition du modèle Comme il a été signifié dans le paragraphe , le modèle 3D est décomposé en éléments simples de cinq types : Mur ; Ouverture ; Sol ; Plafond ; Mobilier. Le modèle 3D réalisé lors du PFE de Valentin POITEVIN possède déjà une structure en calque par lieu et type d élément. Il ne reste plus qu à les décomposer (voir Figure 5.15, située page précédente). Aussi, pour distinguer l ensemble des éléments exportés du modèle 3D, le nom prend une structure type : LIEU_TYPE_ (ORIENTATION) _ID. L orientation n est affectée qu aux éléments mur et ouverture Intégration des documents X3D dans le DOM Le DOM est l ensemble des balises qui structure un document HTML, ici en l occurrence le HTML 5. Le site du X3DOM 2011] possède un convertisseur online des documents X3D pour les générer en HTML 5 ou XHTML. (Voir Figure 5.18 ci-dessous) Mais, nous voulons que cela se fasse dynamiquement, selon les modèles présents dans la base de données. C est à cet instant que le PHP va intervenir de la même façon qu il insère les données issues des formulaires dans la base, il ajoute les lignes dans le DOM pour l affichage du modèle 3D. (Voir Figure 5.17 ci-dessous) Structure du DOM Le DOM du HTML en incluant les fonctions du X3DOM, intègre de nouvelles balises. La première d entre-elles <x3d> annonce le début du modèle 3D. Puis nous retrouvons également celles qui se situent dans le fichier X3D brut. (<Scene>, <Shape>, <Appearance> ) A l aide du PHP et de la fonction inline qui a été implémentée dans le JavaScript X3DOM, au lieu de reprendre les balises du fichier X3D, nous faisons appel à celui-ci à l aide d une URL. Elle fait appel au fichier *.x3d stocké sur le serveur. Cela permet de générer à la volée l ensemble des modèles 3D à l aide de fonction PHP et MySQL. Figure 5.18: Script HTML intégrant le X3D (sans balise inline) Figure 5.17: Script PHP intégrant le X3D (avec balise inline) Page 36

45 Choix et description de la solution retenue Il en est de même pour les fichiers x3dom.js et x3dom.css qui sont indispensables à la visualisation. Ils peuvent être stockés en local ou être appelés par une URL vers le site internet du X3DOM Ajout d outils de navigation L interface qui doit répondre aux objectifs d accessibilité se doit d être la plus facile et agréable à visualiser. Depuis le succès des logiciels comme Google Map ou Google Earth, le public est habitué à avoir sous la main des dispositifs pour manipuler l objet qu il visualise. C est dans cet esprit que des outils de navigation ont été ajoutés. Ils font partie du SAI (Scene Access Interface) De plus, ceux-ci ont été implémentés que très récemment par le collectif X3DOM et vont, sans nul doute, être améliorés et embellis par de nouvelles fonctions. Parmi les fonctions créées, voici celles que nous utilisons : Gestion de l arrière plan (changement de couleur) ; Gestion des vues (vue suivante-précédente, vue générale) ; Différent mode de visualisation (en mode marche ou en mode examiner l objet). De même, un zoom, fait passer la fenêtre de 400 pixels sur 400 pixels au tout écran. D un point de vue pratique, ces fonctions sont accessibles par des images placées au bord de la fenêtre de l interface. Afin de réaliser ces liens, des puces ont été ajoutées. Elles sont reprises de l environnement Sketchup. En effet, les fonctions citées précédemment étaient, elles-aussi, présentes sur ce logiciel et très bien symbolisées. (Voir ci-dessous Figure 5.19) (a) (b) (c) (d) (e) (f) (g) (h) Figure 5.19: Puces de navigation (a) Zoom de la fenêtre, (b) Mode marche, (c) Mode Examiner l objet, (d) Vue précédente, (e) Vue suivante, (f) Arrière plan blanc, (g) Arrière plan bleu, (h) Zoom étendu Pour placer ces puces, il a fallu avoir recours au langage HTML, JavaScript et CSS. Les deux premiers langages sont utilisés pour réaliser le lien entre la fonction et l action effectuée par l utilisateur. Le dernier est utile à la mise en page. Aussi, cette mise en page est divisée en 2 feuilles de style, x3dom.css pour l interface et style.css pour le reste de la page. Ces puces sont en relation avec des éléments que l on ajoute dans la page HTML. La gestion des vues est rendue possible qu après avoir signifié son nom avec ses coordonnées. Il en est de même avec la gestion des arrière-plans, ils sont nommés et la couleur est interprétée selon un code Rouge Vert Bleu. (Voir Notice C ) Gestion des coordonnées Le modèle 3D, dès sa génération, est placé dans un repère qui peut être déplacé. Ce sont les balises <Transform> qui sont utilisées. Elles peuvent servir de translation et de rotation selon respectivement des vecteurs positions ou des angles en unité radian. Page 37

46

47 6 Développement d un site web Sommaire 6.1 Description Module présentation Module interface 3D Volet présentation Volet interface 3D Module SGBD Volet présentation Module recherche Module fiche de description But du module Description de la fiche Lien vers modèle extérieur 49 Le but de ce site web est d organiser les différents modules que je présenterai dans cette partie. Elle a pour vocation de concevoir une structure permettant à la fois au public de découvrir le site de la forteresse de Châtel-sur-Moselle à travers les documents numériques, mais aussi de servir d outil au spécialiste. Page 39

48 Développement d un site web 6.1 Description Le site se présente sous la forme d un sommaire regroupant l ensemble des modules (voir Figure 6.1). Pour réaliser ce sommaire, j ai utilisé les nouvelles fonctionnalités du CSS3 en créant des formes rondes et en jouant sur les ombres. La partie principale reprend cette trame pour sa couleur de fond. Figure 6.1: Sommaire du site non sécurisé Le site est structuré de la façon suivante : Documents Grand public Autres documents Liens nonsécurisés Liens sécurisés Présentation Présentation Interface 3D SGBD Recherche Identifiant + Mot de passe Interface 3D Fiche descriptive Recherche Modèle extèrieur Fiche descriptive Modèle extèrieur Figure 6.2: Structure du site internet Le passage vers les liens sécurisés se fait à l aide d un mot de passe et d un login qui seront en lien avec les champs des mêmes noms de la table créateur. C est la principale fonction du volet administration évoquée dans le paragraphe La sécurité touche également les documents. En effet, dans les tables bd_texte, bd_plan, bd_panoramique et bd_photographie sont présents les champs visible (voir Figure 5.9). Cela permet par la suite de filtrer les documents qui seront affichés pour les modules interface 3D et recherche. Page 40

49 Développement d un site web 6.2 Module présentation Pour accueillir et présenter le projet de numérisation à l utilisateur, la page d ouverture du site internet présente notamment le cadre institutionnel du projet et l accès au mot de passe et identifiant évoqué plus haut. A noter que la structure constituée du logo, le sommaire et la partie principale se répètent à l ensemble des pages du site à l exception de l interface 3D. (Voir ci-dessous Figure 6.3) Figure 6.3: Page de présentation Le contenu de cette page provient d un site internet créé par M.Alby. [Projet 6.3 Module interface 3D Volet présentation Afin d expliquer les principes techniques nécessaires à une bonne visualisation, un volet présentation a été utile. En effet, comme il a été dit dans la bibliographie, la visualisation du WebGL est soumise à quelques contraintes d ordres logiciels. (Cf ) J ai rappelé ces contraintes, en ajoutant les liens utiles dans le cas ou l utilisateur ne possède pas la configuration adéquate pour la visualisation notamment. Aussi, j ai ajouté les fonctions des différentes «puces de navigations» qui enrichissent la fenêtre de l interface. (Voir Figure 6.4) Volet interface 3D Le module de l interface correspond à l interface 3D représentant le modèle des pièces intérieures de la forteresse. Il n est pas seulement composé de l interface 3D mais aussi d une structure affichant l ensemble des documents étant en relation avec lui. Page 41

50 Développement d un site web L affichage des documents s effectue après avoir choisi un lieu dans une liste déroulante. Celle-ci est remplie dynamiquement par une requête sur la table lieu. Aussi, les documents ayant l identifiant du lieu sélectionné sont générés. (Voir Ci-dessous Figure 6.5) Figure 6.5: Interface 3D Figure 6.4: Page de présentation de l'interface 3D Lors d une entrevue avec M. René ELTER, l idée de pouvoir visualiser le modèle selon son époque a été formulée. Aussi, j ai ajouté des cases à cocher qui correspondent aux dates se trouvant dans la table période. L utilisateur peut ainsi cocher une ou plusieurs cases et la visualisation interagira. Cela permettra d y incorporer les modèles «tel que construit» qu y doivent être réalisés par le CRAI de l ENSA de Nancy. Nous pourrions alors, faire le lien entre les différentes réalisations du projet et percevoir la maquette dans son aspect actuel et virtuel à une époque donnée. La visualisation en interaction avec les périodes matérialisées par les cases à cocher a constitué un défi intéressant. Aussi, la conception de la base de données a permis d être testée car l utilisation de jointures pour les requêtes SQL a été nécessaire afin de lier les deux entités périodes et éléments 3D à travers les tables géométriques (mur, ouverture, sol, plafond, mobilier). (Voir Figure 6.6, situé page suivante) L intérêt de présenter certain document au public (cf. 6.1) aide la mise en page puisque cela évite de surcharger les documents figurants à la suite de l interface. J ai fait appel à des techniques de HTML (pour le dimensionnement des images panoramiques, photographiques et pour le texte) ainsi qu à des feuilles de style (langage CSS) pour la mise en page des différents éléments. La difficulté réside dans la présentation des différents documents puisqu il faut mettre en place la page web en ne sachant pas d avance leurs nombres. De même, le CSS n étant pas interprété de la même manière par les différents navigateurs, j ai simplement vérifié la bonne prise en compte des différents scripts avec les navigateurs Firefox et Chrome. Le navigateur Chrome est celui qui intègre le mieux l ensemble des commandes. Page 42

51 Développement d un site web Table lieu ID Titre 1 Salle des gardes 2 Salle des sources Table Période ID Date Table mur ID Titre Id_Lieu Id_periode 1 Salle des gardes Salle des gardes Salle des sources 2 1 Table modèle 3D ID Titre Id_mur url 1 Gardes_mur_est_ Gardes_mur_est_2 2.. La requête SQL correspondante est : SELECT url_x3d,bd_modele_3d.titre,bd_modele_3d.id FROM bd_modele_3d LEFT OUTER JOIN mur ON ( mur.id = id_mur ) LEFT OUTER JOIN ouverture ON ( ouverture.id = id_ouv ) LEFT OUTER JOIN sol ON ( sol.id = id_sol ) LEFT OUTER JOIN plafond ON ( plafond.id = id_plafond ) LEFT OUTER JOIN mobilier ON ( mobilier.id = id_mob ) WHERE (mur.id_periode = '$id_periode') OR (ouverture.id_periode = '$id_periode') OR(sol.id_periode = '$id_periode') OR (plafond.id_periode = '$id_periode') OR (mobilier.id_periode = '$id_periode')"; Figure 6.6: Schéma de la jointure pour l interface 3D pour un mur et sa requête SQL 6.4 Module SGBD La partie consacrée au SGBD comprend une partie présentation et le module en tant que tel. Le module a été présenté dans le paragraphe gestion de contenu. (Cf ) Volet présentation L accès à ce module nécessite un identifiant (login) et un mot de passe néanmoins une présentation est faite afin de l utiliser à bonne escient et d éviter les erreurs. (Utilisation de la suppression) L ensemble des tables est présenté par un logo. (Voir Figure 6.7) Page 43

52 Développement d un site web Figure 6.7: Page de présentation du SGBD Figure 6.8: Exemple du SGBD (table modèle 3D) 6.5 Module recherche Le module de recherche a été créé afin de chercher en détail un document situé dans la base de données. Pour cela, deux critères de sélection ont été retenus : Créateur Lieu L utilisateur peut choisir un des deux critères ou les deux. Le résultat de la recherche est affiché par type de document. Il ne s agit que de visualiser les documents. Ensuite, si l utilisateur souhaite les récupérer, il pourrait le faire à partir des boutons de téléchargement présent dans le SGBD. Figure 6.10: Page de recherche Figure 6.9: Résultat salle des gardes Page 44

53 Développement d un site web 6.6 Module fiche de description But du module Le module fiche descriptive constitue une piste de réflexion. Il s agit de montrer la possibilité à l interface d effectuer un index de fiche descriptive. En effet, les archéologues sont amenés à indexer l ensemble des objets trouvés lors de fouilles archéologiques. Cet index est constitué de plusieurs métadonnées, photographies, descriptions nécessaires à l identification de l objet décrit. Cela permet de connaître son lieu de dépôt, sa taille, son lieu de découverte. (Voir Figure 6.11) Figure 6.11: Exemple 1 de fiche descriptive Figure 6.12: Exemple 2 de fiche descriptive L exemple 1 de la fiche descriptive (voir Figure 6.11) est un index réalisé sous le logiciel propriétaire FileMaker qui est constitué d une base de données et permet la création de fiche automatique. Il est possible de réaliser cela avec notre outil, mais ici en utilisant notre base de données, le langage PHP et la mise en page en feuille de style. L utilisation d une fenêtre 3D est également envisageable et serait, un plus, pour l identification de l objet. Page 45

54 Développement d un site web Description de la fiche L exemple que j ai réalisé, n est qu une ébauche de ce qui pourrait être construit par la suite. Il ne reprend pas l ensemble des métadonnées présentes dans l exemple précédent. De plus, la mise en place de fiche type selon la nature de l objet devra être faite. Cela pourrait également être en lien avec le rôle de celui qui se rend sur le site. J ai inséré le modèle 3D d un fragment calcaire (chapiteau Corinthien) qui a été obtenu par un scanner à bras faro 51. Le nuage de points a été maillé mais non texturé. J ai inséré ce modèle 3D au sein de la table correspondante et je l ai identifié en tant que mobilier. Le problème est intéressant ici, car l objet est d une densité importante et il va entraîner des questions quant à la taille (en mémoire) des objets. Pour le modèle 3D des pièces intérieures de la forteresse ce problème n était pas apparu. En effet, il avait été simplifié en primitives géométriques le rendant ainsi léger en mémoire Limite de visualisation Le X3DOM a une fonction permettant de réduire le modèle automatiquement pour que celui-ci soit visualisé correctement par le WebGL qui limite sa visualisation en 65k par indices. En effet, le modèle est composé de Vertex et d indices. Les Vertex sont des vecteurs de 3 composantes (x, y, z). Pour construire un triangle, il faut donc 3 vertices (pluriel de vertex). Les indices ont une fonction de simplification du modèle et d optimisation du rendu 3D notamment au niveau de la carte graphique. Voici un exemple concret d après le site internet [Développez 3D@2011] qui permet d éclairer ce principe: «Le principe de fonctionnement des indices est très simple : plutôt que de prendre les vertices dans leur ordre d'apparition, la carte les prendra dans l'ordre dans lequel ils apparaissent dans l'index buffer. Par exemple si notre vertex buffer contient les vertices [V0, V1, V2, V3] et que notre index buffer contient les indices [0, 1, 2, 2, 1, 3], les 2 triangles résultant seront formés des vertices (V0, V1, V2) et (V2, V1, V3).» La limitation WebGL, se situe au nombre d entier qui compose les indices. Ils sont limités à 16 bits, puisque ceux-ci peuvent contenir 2 16 = valeurs différentes. Pour insérer les modèles dans l interface, soit nous laissons faire le JavaScript X3DOM qui simplifiera le modèle de lui-même pour la visualisation (ce qui entraîne un temps de chargement plus conséquent) soit nous simplifions le modèle en amont par les logiciels comme MeshLab ou 3DReshaper. Afin de simuler une visualisation, j ai simplifié le modèle à mon tour en utilisant le logiciel 3DReshaper et sa fonction de simplification qui me permet de réduire le nombre de triangle. 51 Instrument présent au sein du laboratoire qui permet d obtenir un nuage de point extrêmement précis de l ordre du dixième de millimètre. Page 46

55 Développement d un site web (a) (b) (c) (d) (e) (f) Figure 6.13: Les 6 modèles du chapiteau Corinthien, la simplification à consister à diviser par 2 le nombre de triangle entre chaque modèle : (a) points triangles (b) points triangles (c) points triangles (d) points triangles (e) points triangles (f) 7396 points triangles Après avoir généré ces 6 modèles, j ai essayé de les intégrer au sein de mon interface. Seuls les deux derniers modèles ont pu être visualisés. La faiblesse ne vient pas du WebGL, mais du transfert entre le serveur et le PC de l utilisateur. Au bout de 2Mo, le serveur est bridé. Ce test réalisé sur le modèle permet également d apprécier la qualité du modèle en fonction de ces multiples simplifications. Il sera important pour la suite du développement de ce module de savoir le niveau de détail qu il est nécessaire d avoir pour une simple visualisation et pour une recherche scientifique Mise en place de la fiche Il existe deux exemples de modèles 3D, représentent un index, réalisé par le X3DOM et le 3D- Coform. Le premier exemple est un catalogue de modèle 3D (voir Figure 6.15) présenté sous forme d un tableau. L objet peut être visualisé en zoomant dessus. Mais il n apporte pas de métadonnées concernant l objet. Page 47

56 Développement d un site web Le deuxième exemple (Figure 6.16) est plus complet puisqu il est complété par des métadonnées : Le nom ; La date ; L artiste ; Le matériel/la technique ; L identifiant du musée ; La galerie qui l abrite. Figure 6.15: Catalogue de modèle 3D 2011] Figure 6.14: Présentation de modèle 3D [3D-coform@2011] Mon exemple s inspire de la fiche descriptive (Voir Figure 6.11) sans qu elle contienne un ensemble riche de métadonnées. Pour le modèle 3D, il se rapproche donc de l exemple 2 (Figure 6.16). Pour cela j ai utilisé une liste déroulante qui génère l ensemble des modèles 3D correspondant à la table mobilier. Une fois l objet choisi par l utilisateur, la fiche est créée automatiquement. Elle récupère dynamiquement les photographies et les métadonnées (date, identifiant du mobilier, identifiant créateur). Les autres données sont statiques (nom du site, commune, n INSEE, Département). Le tout est mis en page par une feuille de style. Figure 6.16: Fiche descriptive de l'interface Page 48

57 Développement d un site web 6.7 Lien vers modèle extérieur Le lien vers le modèle extérieur a été créé, mais n a pas constitué de développement majeur. Le modèle extérieur produit par la société GéoPhoenix, n est pour l instant pas exploité. Le lien emmène vers une présentation de la création du modèle extérieur issue d un site internet créé par M. Alby. Il décrit la création du modèle par technique aéroportée et montre les résultats obtenus par l intermédiaire de vidéo. [Projet J ai essayé d intégrer le modèle 3D dans ArcGIS Explorer sans succès. Mais cette solution reste intéressante par ces nombreuses fonctionnalités : Création de groupe pour sécuriser les données Outil intégré à la visualisation (création de zone, interrogation des données) Visualisation par couche Importation de différents types de données (raster, fichier de forme, données GPS ) Figure 6.17 : Type de document pouvant être importé depuis ArcGIS Explorer Figure 6.18 : Création de groupe dans ArcGIS Online Page 49

58

59 7 Conclusions et perspectives Ce Projet de Fin d Etude contribue à la mise en place d une interface numérique dans le cadre plus large du programme de mise en valeur numérique de la forteresse de Châtel-sur-Moselle. Cette étude s appuie sur les préceptes des travaux menés l année précédente, c'est-à-dire un projet destiné à l analyse scientifique mais aussi à la valorisation du patrimoine culturel pour le grand public. Aussi, elle intègre sur les produits créés : des modèles 3D des parties intérieures et extérieures, des panoramiques et des données issues des 40 années de fouille (photographies, plans ) La réalisation de l interface a été menée après une importante recherche bibliographique. Elle a permis de choisir les meilleures technologies : X3DOM et WebGL pour la visualisation 3D ; Plate forme WAMP pour la partie serveur. Cette solution concorde avec les objectifs fixés dans l étude fonctionnelle. Elle répond aux questions de sécurité des données, d accessibilité de l interface et d interaction avec l utilisateur. De plus, ces technologies open source sont flexibles et pourront évoluer. La base de données a été conçue afin d obtenir des résultats fonctionnels. En effet, à partir de script PHP, il est possible d obtenir un modèle 3D selon une ou plusieurs périodes. Il en est de même avec les différents documents visualisables selon des critères de lieu ou de créateur. A partir de ce même langage de programmation PHP, un Système de Gestion de Contenu a été créé. Ainsi, les différents acteurs du projet auront ainsi l occasion de stocker les différents documents et informations du patrimoine de Châtel-sur-Moselle (plan, texte, photographie, modèle 3D). Le modèle 3D de la salle des gardes a été inséré dans l interface et le résultat est satisfaisant : Figure 7.2 : Capture d'écran Salle des gardes extérieur Figure 7.1 : Capture d'écran Salle des gardes intérieur Un système de recherche a été également mis en place, il permet de visualiser les documents présents dans la base de données. Page 51

60 Afin d arriver à une interface concrète, un site internet a été conçu. Il structure les différents modules. Sa fonction est de les sécuriser en créant un identifiant et un mot de passe : Module de Présentation ; Module de SGBD ; Module d interface 3D ; Module de recherche des documents ; Module Fiche Descriptive ; Lien vers modèle extérieur. Les deux derniers modules constituent deux axes de recherches. En effet, le module fiche descriptive constitue un outil d indexation des éléments 3D pour les archéologues. Nous avons conçu un exemple, mais il sera amené à évoluer pour répondre au mieux aux attentes des archéologues et aussi pour être en concordance avec les normes pour le classement des métadonnées. L ajout de la 3D dans ce type d index est novateur dans la valorisation du patrimoine et sa conservation. Plus largement, la question de l archivage des données devra être posée. Le fond documentaire accumulé depuis 40 ans par l association du Vieux Châtel va nécessiter un classement et une numérisation. Cela fixera les métadonnées à utiliser pour la description des documents pour une parfaite interopérabilité des différentes bases. Le dernier module constitue également un axe de recherche à poursuivre. Le modèle des parties extérieures n est actuellement pas intégré. Aussi, il devra l être au sein d un autre outil que le X3DOM. À partir de la recherche bibliographique, le format CityGML me semble le mieux approprié. Il est open source et permettra de faire le lien entre le modèle extérieur et intérieur. Il pourra également faire figurer des données comme des planches cadastrales ou des plans anciens sous forme de couches. De plus, l interface va devoir faire l objet d amélioration dans son utilisation. En effet, comme tout logiciel, la mise en service sera effective, après avoir été soumis à des tests à grandes échelles. Pour ma part ce Projet de Fin d étude m a permis de trouver une solution concrète à un problème réel en quittant le domaine propre de la topographie. Il a fallu m adapter à un domaine proche de l infographie et de l informatique et de la conservation du patrimoine. Cette étude s inscrit dans la problématique plus générale de la diffusion des modèles 3D très attractif. En effet, les procédés d acquisitions sont de plus en plus fins et réalistes mais si leurs transmissions n est pas accessible, l intérêt s en retrouvera diminué. Page 52

61 8 Glossaire API : En anglais Application Programming Interface, ce sigle désigne une interface de programmation permettant l interaction des programmes les uns avec les autres. (Source wikipédia) Base de données : Ensemble de données structurées accessibles par requête. Encapsuler : En programmation orientée objet, l encapsulation est l'idée de protéger l'information contenue dans un objet et de ne proposer que des méthodes de manipulation de cet objet. [ ] L'utilisateur extérieur ne pourra pas modifier directement l'information et risquer de mettre en péril les axiomes et les propriétés comportementales de l'objet. (Source wikipédia) Interopérabilité : «Capacité que possèdent des systèmes informatiques hétérogènes à fonctionner conjointement grâce à l utilisation de langages et de protocoles communs, et à donner accès à leurs ressources de façon réciproque» Koehl M. Chapitre XIX-Cours de SIG-INSA Métadonnées : Données qui renseignent sur la nature de certaines autres données et qui permettent ainsi leur utilisation pertinente. Nuage de points «En anglais point cloud, ce terme désigne un ensemble tramé, représentent les points tridimensionnels sur la surface de l objet relevé. Chaque point est référencé par des coordonnées (x, y, z), initialement dans le repère ayant le scanner pour origine. Le nuage de points est le résultat d un balayage laser.» Landes T. Ontologie : Ensemble d'informations dans lequel sont définis les concepts utilisés dans un langage donné et qui décrit les relations logiques qu'ils entretiennent entre eux. [Grand dictionnaire] Module d'extension : En anglais Plug-in, le terme a été officialisé par la Commission générale de terminologie et de néologie, en SAI : En anglais Scene Authoring/Access Interface. C est l ensemble de fonction définit dans le standard X3D qui permettent au programmeur d interagir à l intérieur de la «scène» 3D. Sémantique : Ensemble des relations entre les caractères, ou groupes de caractères, et leur signification, indépendamment de la façon de les employer ou de les interpréter. [Grand dictionnaire] Page 53

62

63 9 Références 9.1 Articles, mémoires et thèses [Arnaud & Parisi, 2007] Arnaud, R., Parisi, T., Developping Web Applications with COLLADA and X3D, Sony Computer Entertainment, Media Machines Inc., Whitepaper. [Aubry, 2007] Aubry, S., Annotations et gestion des connaissances en environnement virtuel collaboratif, Thèse de docteur de l Université de Technologie de Compiègne, spécialité Technologies de l Information et des Systèmes, p 176. [Behr et al., 2009] Behr, J., Eschler, P., Jung, Y., Zöllner, M., X3DOM A DOM-based HTML5/X3D Integration Model, 2009, 9p. [Bernard, 1992] Bernard M., Gestion de projet de S.I.G. urbain, tutorial, 15 Symposium Européen des Systèmes d Informations Urbains (UDMS), Lyon, [Billen, 2002] Billen, R., Nouvelle perception de la spatialité des objets et de leurs relations. Développement d une modélisation tridimensionnelle de l information spatiale, Thèse de docteur de l université de Liège, faculté des sciences département de géographie, 188 p. [Busayarat, 2010] Busayarat, C., La maquette numérique comme support pour la recherche visuelle d informations patrimoniales, définition d une approche par la sémantisation de sources iconographiques par référencement spatiales, thèse de Docteur de l école Nationale d Arts et Métiers, spécialité Conception, 125 p. [Cœur, 2010] Cœur, G., Conception d un système collaboratif d annotations d objet 3D, mémoire de master en système d information de l université de Genève, 65p. [De Luca, 2006] DE Luca, L., Relevé et multi-représentations du patrimoine architectural, définition d une approche hybride de reconstruction 3D d édifices, thèse de Docteur de l école Nationale d Arts et Métiers, spécialité Conception, 173 p. [Desgagné, 2010] Desgagné, E., Conception et Développement d un SIG 3D dans une approche de service Web, exemple d une application en modélisation géologique, Mémoire de Maîtrise de la faculté des études supérieures de l université Laval, 112 p. [Esnault, 2011] Esnault, N., Production automatique d interfaces graphiques 3D pour le web, thèse de docteur de l université de Rennes 1, école doctorale Matisse, mention informatique, 99 p. [Gaborit & Vasseur, 2011] Gaborit, R., Vasseur, M., Intégration des données tridimensionnelles du site de Châtel-sur-Moselle dans un système d information avec mise en relation avec la documentation non géométrique, Projet de Recherche Technologique de l Institut National des Sciences Appliquées de Strasbourg, spécialité topographie, 2011, 38p. [Gruau, 2007] Gruau, N., Mise en place d un SIG-3D navigable consacré aux monuments historiques, mémoires d ingénieur de l INSA de Strasbourg, spécialité Topographie, 60p. [Le Gravier & Moignon, 2007] Le Gravier, G., Moignon, B., La RV/3D appliquée au Génie urbain, 2007, p29-30/50. Page 55

64 Références [Meyer, 2007] Meyer, E., Acquisition 3D, documentation et restitution en archéologie, proposition d un modèle de système d information dédié au patrimoine, thèse pour l obtention du titre de docteur de l université d Henri POINCAR2, Nancy 1, mention modélisation et simulation des espaces bâtis, 277p. [Sauvain, 2008] Sauvain, R., Interface 3D orientés Web, Travail de diplôme réalisé en vue de l obtention du diplôme Haute Ecole de Gestion de Genève filière informatique et gestion, 54p. [Piacentille, 2007] Piacentille, C., Réalisation de représentations bi-et tridimensionnelles interactives pour un système d information archéologique, mémoire de master Design Global, spécialité Modélisation et Simulation des Espaces Bâtis, 66p. [Pornon,1992] Pornon, H., Les SIG, Mise en œuvre et applications, Hermes 1992, 156p. [Poitevin, 2010] Poitevin, V., Mise en valeur de la forteresse médiéval de Châtel-sur-Moselle, d ingénieur de l INSA de Strasbourg, spécialité Topographie, 56p. [Turkowski, 2010] Turkowski, R., Enabling the immersive 3D Web with COLLADA & WebGL, Kronos Group, Whitepaper, [Thouvenin, 2009] Thouvenin, I., Interaction et connaissance : construction d'une expérience dans le monde virtuel, Mémoire présenté pour obtenir une Habilitation à Diriger des Recherches, Université Technique de Compiègne, 2009, 70p. [Wang, 2007] Wang, P.P., De la modélisation spatial vers GML, mémoire présenté pour l obtention du grade de licencié en Informatique, Université libre de Bruxelles, 78 p. 9.2 Notices et livres [Attene et al., 2007] Attene,M., Robbiano, F., Spagnuolo, M., Falcidieno, B., Semantic Annotation of 3D Surface Meshes based on Feature Characterization, 2007.Lecture Notes in Computer Science, Volume 4816/2007, , DOI: / _15, 14p. [De Floriani et al., 2007] De Floriani L., Hui A., Papaleo L., Huang M., Hendler J., A Semantic Web Environment for Digital Shapes Understanding, Lecture Notes in Computer Science: Semantic Multimedia. (vol. 4816/2007, pp ). ISBN: Springer Berlin / Heidelberg (Allemagne), 14p. [Keith, 2010] Keith, J., HTML5 pour les web designers, Edition Eyrolles, ISBN : , 87p. [Koehl, 2010] Koehl, M., Merise, une méthode d analyse le modèle entités-relations, cours SIG- ENSAIS /INSA , 16p. [Pupier, 2009] Pupier T., Flash CS4 pour PC/Mac, Edition La collections des références, ISBN : , 406p. [Ulrich, 2000] Ulrich K., Flash 5 for Windows and Macintosch VQSG. Edition CampusPress, ISBN , p 1-5/566. Page 56

65 Références [Yank, 2009] Yank, K. Créer un site web avec base de données en PHP & MySQL 4 e édition, ISBN , 457p. 9.3 Conférences [Baldissini et al., 2009] Baldissini, S., Manferdini, A.M., Masci, M.E., 2009, An information system for the integration, management and visualization of 3D reality based archaeological models from different operators, 3 rd ISPRS International Workshop, 3D-ARCH 2009, Trento, Italy, Technical Session 8A - 3D models, GIS and databases, February [Brasse et al., 2007] Brasse, C., Heine, K., Zhao, D., Wulf, U., 2007, A 3D Solution for a Web-based Building Information System, 35 th International Conference on Computer Applications and Quantitative Mehods in Archeology (CAA), Layer of Perception, Berlin, Allemagne, 2-6 Avril, S. 241, CD. [Carrozzino et al., 2009] Carrozino M., Fawzi, M., Pecchioli, L., 2009, ISEE: accessing information navigating in a 3D virtual environment, The case study of the crypt in St. Servatius in Quedlinburg, Saxony-Anhalt (Germany), Florence, International conference Florence 15 th -16 th December p [Creelle et al., 2007] Crelle C., De Troyer, O., Kleinermann, F., Pellens, B., Adding semantic annotations, navigation paths and Tour Guides to Existing Virtual Environments, VSMM'07 Proceedings of the 13th international conference on Virtual systems and multimedia Springer-Verlag Berlin, Heidelberg, ISBN: , p [Kolbe, 2007] Kolbe, T.H., CityGML Tutorial, 1st Joint Workshop on the Sino-Germany Bundle Project, Interoperation of 3D Urban Geoinformation, Urumqi, China, 27 Aout [Paulis, 2010] Paulis, P., 2010, 3D Webpages, Studentska vedecka konferencia FMFI UK, Bratislava, p Sites internet [Arius 3D@2011], arius 3d, 2011, URL : [Dublin Core@2010], Eléments de métadonnées du Dublin Core, Version 1.1: Description de Référence, 2010, URL: [GLGE@2011], GLGE, 2011, URL: [Nubes@2006], projet Nubes, 2006, URL: [OGC@2011], Open Geospatial Consortium, 2011, URL: [XML3D@2011], XML3D, 2011, URL: ], X3dom Instant 3D the HTML Way, 2011, URL: [XB Point@2011], XB Point, 2011, URL: [3D-coform@2011], Tools and expertise for 3D collection formation, 2011, URL: Page 57

66 Références [Développez Réalisation d'un moteur 3D en C++ - partie III : les vertex / index buffers, 2011, URL: [Projet Projet de numérisation de Chatel sur Moselle, 2011, URL : Page 58

67 10 Liste des illustrations Figure 4.1 : Logo du projet européen 3D- Coform 4 Figure 4.2 : Logo du Logiciel MeshLab 4 Figure 4.3 : Structure du GML3 [Wang, 2007] 7 Figure 4.4 : Logo du W3C 8 Figure 4.5 : Logo du consortium Khronos 8 Figure 4.6 : Animation d'objet Collada par le JavaScript GLGE 12 Figure 4.7: Objet visualisé en nuage de points ( points) [XBPoint@2011] 12 Figure 4.9: Graphe de description d'un objet selon De Luca [Busayarat, 2008] 14 Figure 4.8: Exemple d'objet annotée par le logiciel Annotator Meshes [Attene et al., 2007] 14 Figure 4.10: Fonctionnement des parties serveur et client 15 Figure 4.11: Structure du projet CISAR [Brasse et al., 2007] 19 Figure 4.12: Application du projet SIG archéologique 20 Figure 4.13: Capture d écran du projet NUBES Visum 20 Figure 5.1: Modèle 3D visualisé depuis (a) iphone App avec WebKit extension (b) Internet Explorer avec plugin X3D (c) Nokia N900 implémentée du WebGL [X3dom@2011] 25 Figure 5.2: Traitement du JavaScript avec projet d'avancement [X3dom@2011] 26 Figure 5.3 : Chaîne de traitement de la solution PostgreSQL-PostGIS 27 Figure 5.4 : Chaîne de traitement de la solution MySQL 27 Figure 5.5: Etape de construction d'un projet SIG 28 Figure 5.6: Photographie de l année 1976 de la salle des gardes 28 Figure 5.7: Coupe de la salle des gardes 28 Figure 5.8: (a) Modèle 3D des parties extérieures de la forteresse (b) Modèle 3D des parties intérieures, salle des gardes (c) Visite virtuelle de la salle des gardes 29 Figure 5.9: Modèle Conceptuel de Données de l'interface 31 Figure 5.10: Interface de phpmyadmin 32 Figure 5.11: Capture d'écran du SGBD (table mur) 33 Figure 5.12: Différence des deux formulaires 33 Figure 5.13: Fonctionnement SGBD 34 Figure 5.14: Chaine de traitement d'un modèle 3D (Chouette) 35 Figure 5.15: Décomposition du modèle 3D 35 Figure 5.16: Exemple fichier X3D 35 Figure 5.17: Script PHP intégrant le X3D (avec balise inline) 36 Figure 5.18: Script HTML intégrant le X3D (sans balise inline) 36 Figure 5.19: Puces de navigation 37 Figure 6.1: Sommaire du site non sécurisé 40 Figure 6.2: Structure du site internet 40 Figure 6.3: Page de présentation 41 Figure 6.4: Page de présentation de l'interface 3D 42 Figure 6.5: Interface 3D 42 Figure 6.6: Schéma de la jointure pour l interface 3D pour un mur et sa requête SQL 43 Figure 6.7: Page de présentation du SGBD 44 Figure 6.8: Exemple du SGBD (table modèle 3D) 44 Figure 6.9: Résultat salle des gardes 44 Figure 6.10: Page de recherche 44 Page 59

68 Liste des illustrations Figure 6.12: Exemple 2 de fiche descriptive 45 Figure 6.11: Exemple 1 de fiche descriptive 45 Figure 6.13: Les 6 modèles du chapiteau Corinthien, la simplification à consister à diviser par 2 le nombre de triangle entre chaque modèle : 47 Figure 6.14: Présentation de modèle 3D [3D-coform@2011] 48 Figure 6.15: Catalogue de modèle 3D 2011] 48 Figure 6.16: Fiche descriptive de l'interface 48 Figure 6.17 : Type de document pouvant être importé depuis ArcGIS Explorer 49 Figure 6.18 : Création de groupe dans ArcGIS Online 49 Figure 7.2 : Capture d'écran Salle des gardes extérieur 51 Figure 7.1 : Capture d'écran Salle des gardes intérieur 51 Figure A.1: Exemple de fiche issue de la BD_Elter 64 Figure A.2 : Structure du modèle 3D pour le projet CISAR 65 Figure B.1: Raccourci bureau 67 Figure B.2: Structure fichier WAMP 67 Figure B.4 : Menu SGBD pour la base 68 Figure B.5 : Menu SGBD pour la table 68 Figure B.3 : Gestion d'une BD depuis phpmyadmin 68 Figure B.6: Visualisation des champs d'une table 69 Figure B.8: Gestion des relations 70 Figure B.9 : Capture d écran pour l export de la base 70 Figure B.7 : Gestion des privilèges 70 Figure C.1 : Capture d'écran du SGBD pour la table "créateur" 78 Figure D.1 : Capture d'écran pour le changement de pilote de la carte graphique 83 Figure D.2 : Capture d'écran du modèle 3D de l'interface 85 Figure D.3 : Repère du modèle 3D 86 Figure D.5 : Paramètres d'exportation du modèle en Collada 90 Figure D.4 : Paramètres d'exportation du modèle en X3D Liste des tableaux Tableau 4.1 : Comparatif de format 3D [Kolbe, 2007] Tableau 4.2: Part de marché des navigateurs (source wikipédia) Tableau 5.1: Comparatif des solutions de visualisation 3D Page 60

69 12 Annexes A. Etude fonctionnelle du SIG avec interface Web du site de la forteresse de Châtel-sur- Moselle (réalisé le 22/02/2011) 62 A.1. L identification des acteurs 62 A.2. Données 62 A.2.a. Données existantes: 62 A.2.b. Données à venir : 62 A.3. La spécification des besoins sur un plan fonctionnel 62 A.3.c. Module interface 63 (1) Gestion des profils 63 (2) Ajout de données 63 A.3.d. Module SIG 2D/3D 64 A.3.e. Module Navigation 3D 65 (1) Structure 65 (2) Interaction avec la base de données 66 (3) Automatisation de la chaîne 66 (4) Visualisation 66 (5) Sécurité des données 66 B. Notice WAMP Serveur 67 B.4. Mise en place de la base de données 67 B.5. Gestion courante de la base de données 68 B.5.a Création et modification d une table 68 (1) Gestion des privilèges 70 (2) Exporter la base 70 C. Notice Système de Gestion Base de Données (SGBD) 71 C.1. Structure sans dépôt 71 C.1.a. Description du fichier index.php 71 C.1.b. Gestion de la suppression 74 C.1.c. Gestion des modifications et Ajout 74 (1) Ajout 74 (1) Explication des cases à cocher (checkbox) 76 C.1.d. Modification 77 C.2. Structure avec dépôt 79 C.2.a. Téléchargement 82 D. Notice script PHP Modèle Interactif 83 D.1. Template Form 83 D.2. Gestion des puces de navigations 85 D.3. Gestion des Transformations 86 D.4. Gestion des points de vue 86 D.5. Gestion des arrières plan 87 D.6. Gestion des inline 87 D.7. Gestion des documents 87 D.8. Contrôleur index.php 87 D.8.a. Gestion du modèle 3D 87 D.8.b. Première hypothèse 88 D.8.c. Deuxième hypothèse 88 D.9. Gestion des documents 89 D.10. Gestion de la liste déroulante et des cases à cocher 90 D.11. Chaîne de traitement pour l intégration des modèles 3D 90 Page 61

70 Annexe A : Etude fonctionnelle du SIG avec interface web de la forteresse de Châtel-sur-Moselle A. Etude fonctionnelle du SIG avec interface Web du site de la forteresse de Châtel-sur-Moselle (réalisé le 22/02/2011) Objectif : fixer le domaine couvert par le Système d information à savoir : L identification des acteurs ; La spécification de leurs besoins sur un plan fonctionnel. A.1. L identification des acteurs Spécialistes de nombreux domaines (archéologues, historiens ); Association du Vieux Châtel ; Administrateurs (INSA Strasbourg vers une remise du produit à l association) ; CRAI (Centre de Recherche en Architecture et Ingénierie) ; Utilisateurs du site. Pour décrire l ensemble des besoins et des possibilités. Je réalise d un point de vue théorique une application idéale permettant d optimiser au mieux les besoins. Cela permettra d identifier les fonctions primaires et secondaires, qui par la suite pourront être modifiées lors de l étude de faisabilité. A.2. Données A.2.a. Données existantes: Modèle 3D des parties intérieures de la forteresse issues du PFE de Valentin POITEVIN avec 2 versions : Une version destinée au grand public où la précision des données a été réduite pour permettre une meilleure navigation; Une version dédiée aux spécialistes avec une précision accrue mais lourde en mémoire. Panoramiques sphériques avec réalisation d une application flash les intégrants dans le modèle 3D ; Ensemble des documents accumulées depuis des décennies (cartes historiques, plans, coupes, photographies) ; Fiches descriptives d éléments structurés en base de données réalisées sous le logiciel File Maker Pro. A.2.b. Données à venir : Modèle 3D de la partie extérieure du site par la société Geophoenix ; Totalité de la modélisation des pièces intérieures ; Modélisations des différentes époques historiques de la forteresse réalisée par le CRAI. A.3. La spécification des besoins sur un plan fonctionnel Le SIG va être structuré classiquement d une base de données, d un système de gestion de base de données et de différents modules nécessaire à l utilisateur. Pour le moment, je dénombre 3 modules nécessaires : Page 62

71 Annexe A : Etude fonctionnelle du SIG avec interface web de la forteresse de Châtel-sur-Moselle Un module servant d interface avec le spécialiste où il pourra s identifier et accéder aux différentes bases de données pour ajouter de nouvelles données ; Un module dédié à un SIG 2D/3D ou l ensemble de la zone sera représentée ; Un module dédié à la navigation 3D immersive avec une visualisation 3D. A.3.c. Module interface (1) Gestion des profils A mon sens, le site web n aurait besoin que de trois profils. Un profil utilisateur; Un profil spécialiste ; Un profil Administrateur. Ces deux derniers profils profiteraient d avantage en droit et accès. On peut penser à l intégration de fonctions et données supplémentaires. Et aussi d autres fonctions secondaires comme la possibilité de mesurer des distances, de déterminer des coordonnées par un simple clic ou encore le changement de contraste des photographies. (2) Ajout de données On peut imaginer également que le contenu de la base de données soit interactif. Les archéologues pourraient ajouter eux-mêmes du contenu. De même que l ensemble des acteurs (données topographiques, schéma de polygonal, fiches signalétiques) Il faudrait alors qu ils remplissent une fiche descriptive de l objet permettant de classer automatiquement ce contenu dans la base de données. Cette fiche descriptive est déjà en place (vue dans BD_Elter). La structure a été réalisée sous File Maker Pro (logiciel propriétaire). Celle-ci reprend un ensemble d informations assez conséquent sous forme de tableau avec pour la plupart des cellules, une liste suggestive d éléments. Cette fiche comprend également un ensemble de clichés décrivant l objet ses 6 vues (face, arrière, dessus, dessous, gauche, droite). Il faut penser à intégrer cette fiche pour l ensemble des objets contenus dans la base en essayant de s aligner au maximum sur l existant pour que les professionnels s adaptent facilement à la structure mis en place. Page 63

72 Annexe A : Etude fonctionnelle du SIG avec interface web de la forteresse de Châtel-sur-Moselle Figure A.1: Exemple de fiche issue de la BD_Elter On peut également penser à des outils permettant de pré-remplir les cellules (outil EXIFTOOL pour les photographies). (À étudier) Pour le reste des documents, il faut décomposer la base de données en différentes tables correspondant aux différents types de données susceptibles d être ajoutées. Je dénombre plusieurs éléments : Les photographies Les plans/coupes Les documents textes (fiches descriptives, ) Modèle 3D d objet A.3.d. Module SIG 2D/3D Pour la visualisation de diverses données, on peut envisager une structure par calque à la manière d un SIG classique comme Géoportail. En effet, cela permettrait de créer différentes couches intégrant d autres données 2D comme le cadastre, des éléments topographiques des différents levé, des orthophotographies, des cartes historiques On pourrait intégrer de la même manière les modèles 3D du CRAI. Ce SIG aurait pour fonction de gérer l ensemble des données sur une plus grande superficie et pouvoir situer la forteresse sur l ensemble du territoire de la commune et ses alentours. L ensemble sera géoréférencé. Les outils de ce SIG seraient en lien avec l outil utilisé (ArcGIS Explorer, API Google Map?) Page 64

73 Annexe A : Etude fonctionnelle du SIG avec interface web de la forteresse de Châtel-sur-Moselle A.3.e. Module Navigation 3D (1) Structure Le modèle 3D des parties intérieures réalisées par Valentin est pour le moment le seul modèle 3D sur laquelle s appuyer. Mais dans quelques temps, nous allons intégrer la modélisation réalisée par la société Geophoenix. Dans ce but, il faut définir comment va s articuler ces deux modèles dans le site internet. Le premier aperçu de la modélisation de la partie extérieur représente une partie du de la ville de Châtel-sur- Moselle avec au centre la forteresse qui n est pas encore modélisée. Le modèle devra prendre en compte les différents niveaux de détails. On peut faire une analogie avec ce qui est fait actuellement pour une modélisation faite avec CityGML. Le premier niveau constitue le socle de la modélisation : Le MNT généré par la société Geophoenix ; Le deuxième niveau comprend la modélisation des volumes de la société Géophoenix ainsi que l ensemble des pièces intérieures de la forteresse. Voir également MNT généré par le modèle de Sam? ; Le troisième niveau prend en compte l ensemble des objets constituant la modélisation du niveau précédent. Ainsi les murs, ouvertures, décorations sont distingués. [Le modèle conceptuel de données s apparente à celui du projet CISAR] Figure A.2 : Structure du modèle 3D pour le projet CISAR Page 65

74 Annexe A : Etude fonctionnelle du SIG avec interface web de la forteresse de Châtel-sur-Moselle Evidemment cette structure n est qu une piste. Il faut adapter cette structure intéressante au site de la forteresse. (2) Interaction avec la base de données L idéale serait une interaction utilisant une fonction analogue de «l anchor» ou au «sensor»du langage VRML. En cliquant sur l objet une requête URL serait envoyée à un serveur, permettant ainsi le lien entre l objet du modèle 3D et les métadonnées de l objet. Le X3D devrait le réaliser (à étudier?) On peut envisager une solution s apparentant à ce qui a été réalisé pour le projet du lycée des Pontonniers. La structure des pièces intérieures va être décomposée en un ensemble d éléments qui sera classé par la suite dans les différentes entités (murs, ouvertures, voutes ) (3) Automatisation de la chaîne Le but dans la création de ce site internet est de créer une méthode qui serait pérenne pour tout type de projet. De plus la chaîne de traitement devrait être la plus automatique possible entre la création du modèle sur un logiciel de conception jusqu à son intégration dans le site internet. Les modifications ou ajouts dans le modèle 3D ou dans la base de données doivent nécessiter le moins de temps possible, avec le minimum d opérations manuelles pour l administrateur. De ce point de vue, il est bon de prendre en compte des technologies actuelles et bien implantées dans le paysage du web. De même, il serait avantageux que les outils utilisés dans la chaîne de traitement soient open source. Cela permettrait outre l aspect financier d avoir un outil qui sera mis à jour régulièrement si la communauté d utilisateur et de développeur est importante. En ce qui concerne l automatisation lors d ajout ou de modification du modèle 3D, le fait de décomposer le modèle en différents objet à l avantage de changer seulement l objet modifié. Si l identifiant de l objet fait le lien avec la base de données, si l objet est modifié en réutilisant ce même identifiant, le lien devrait être toujours valide. (4) Visualisation La visualisation du modèle 3D dépendra de la technologie choisie. Si cette fonction nécessite l installation d un plugin, il faudra mettre en place des liens pour le téléchargement du plugin associé au navigateur utilisé. Un tutoriel sera peut-être envisagé si cette installation n est pas aisée. Du point de vue de la navigation à l intérieur du modèle 3D, il faudra mettre en place des outils de navigation pour signifier à quoi correspondent les raccourcis clavier ainsi que les mouvements de la souris. (5) Sécurité des données La sécurité des données est un élément important à prendre en compte dans l édition des données sur le web. Il faut que les données soit protégées afin de ne pas les perdre. De ce point de vue, les technologies du WebGL ne sont pas encore efficaces car elles permettent de gérer directement le contenu sur la carte graphique. Page 66

75 B. Notice WAMP Serveur Cette notice a pour vocation d expliquer plusieurs opérations courantes de gestion de la base de données mais aussi pour son installation. Si des opérations ne sont pas décrites de nombreux tutoriaux sur internet viendront à votre secours. B.4. Mise en place de la base de données La base de données a été mise en place sous la plate-forme WAMP ( Celui-ci est donc composé de 3 composantes : Apache, MySQL et PHP. Apache version ; MYSQL version ; PHP version Figure B.1: Raccourci bureau Figure B.2: Structure fichier WAMP Une fois l installation effectuée, un logo WAMP apparaît dans les icones situées à gauche de l horloge dans le bureau (Voir figure 1). Ce raccourci permet de gérer l état du serveur (démarrer, redémarrer et arrêter les services) d accéder au fichier de configuration (MySQL, Apache) et vers les deux espaces de travail le serveur (Localhost) et le système de gestion de base de données (phpmyadmin). Les versions installées sont celles de la plate-forme WAMP, mais il est possible d en choisir d autres. Par exemple pour MySQL, une autre version a été téléchargée. Pour qu elle soit reconnue, il faut la placer dans le répertoire /wamp/bin/mysql puis lui adresser la nouvelle version depuis le raccourci bureau. (Clique sur le symbole Wamp figure 1) La mise en place de WAMP est parfois difficile lorsque les versions des trois composantes sont trop récentes. Il est préférable de prendre la version inférieure qui est souvent plus stable et qui communique mieux avec les deux autres entités. Page 67

76 Annexe B : Notice WAMP Serveur B.5. Gestion courante de la base de données Il y a plusieurs façons de gérer la base de données, cela peut être effectué à partir de l exécuteur Windows en lançant des lignes de commande constituées de requêtes SQL ou du système de gestion Figure B.3 : Gestion d'une BD depuis phpmyadmin de base de données. C est cette dernière solution qui est privilégiée. La suite des opérations se passe donc depuis l interface phpmyadmin. (Accessible depuis le raccourci bureau en choisissant Localhost voir Figure 1) Elle est structurée en deux parties, la partie de gauche permet de sélectionner la base de données. La deuxième partie est la partie qui nous intéresse, elle est décomposée en plusieurs onglets une fois la base de données sélectionnée que sont : Figure B.4 : Menu SGBD pour la base B.5.a Création et modification d une table Le plus important est le premier onglet «Structure» qui permet d ajouter, de modifier les tables et les champs associés. Une fois la table créée et sélectionnée, les onglets suivant apparaissent : Figure B.5 : Menu SGBD pour la table Si les champs d une table doivent être modifiés cela se passe dans l onglet «Structure». Depuis cette fonction, un tableau reprend l ensemble des champs avec différents paramètres. Si l on veut modifier un champ, utiliser le crayon (si plusieurs champs doivent être modifiés, cocher les champs et utiliser le crayon du bas). Page 68

77 Annexe B : Notice WAMP Serveur Figure B.6: Visualisation des champs d'une table Cette partie est facile à prendre en main, le type de données est à choisir entre : «Integer» : entier ; «Texte» : texte ; «Varchar» : champs composé de 0 à 32 caractères ; «Char» : champs de 32 caractères fixes ; «Date» : date en écriture anglo-saxonne (mois/jour/année). L interclassement constitue l encodage, ici il a été préféré utf8_bin. De plus l identifiant doit être une clef primaire et incrémenter de façon automatique pour que chaque identifiant soit unique. Un problème d encodage peut survenir quand des caractères spéciaux comme des lettres avec accents se transforment en des symboles comme «Ã». Pour éviter, cette déconvenue il faut bien spécifier l encodage entre les balises <meta> du HTML. Pour autant, cela n est pas suffisant si le PHP est utilisé, il faut également faire attention à l en-tête du script PHP car c est l encodage du serveur qui est en cause dans ce cas. Le lien «gestion des relations» permet de visualiser les jointures entre les différentes tables. Si la jointure est bien effectuée le champ qui constitue la jointure apparaît en bleu sinon, il reste de couleur noir. Page 69

78 Annexe B : Notice WAMP Serveur Figure B.7 : Gestion des privilèges Figure B.8: Gestion des relations (1) Gestion des privilèges La gestion des privilèges se fait depuis l onglet «Privilèges». Il est possible dans cette partie d ajouter un utilisateur avec un nom d utilisateur et un mot de passe. (2) Exporter la base Pour pouvoir reconstruire la base de données sur un autre serveur. Il est important d exporter la base depuis l onglet «Exporter». Il s agit de créer un fichier SQL, permettant de récréer l ensemble des tables, des champs et des données. Pour cela, il suffit d obtenir cette capture d écran : Figure B.9 : Capture d écran pour l export de la base On obtient alors le fichier texte comprenant l ensemble des requêtes SQL. Page 70

79 C. Notice de Système de Gestion de Base de Données (SGBD) Dans cette notice, je décris les scripts PHP qui permettent la gestion de la base de données à distance. Je listerai, également, l ensemble des modifications qu il faut apporter en cas de changement d adresse du serveur. L ensemble de mes codes sont inspiré du livre «Créez un site web avec base de données en PHP MySQL» de l auteur Kevin Yank (édition PEARSON ISBN : , disponible à la bibliothèque de l INSA) notamment les chapitres 7 (structure sans dépôt) et 12 (structure avec dépôt). En effet, il existe deux structures différentes selon la nature de la table : Tables n ayant qu un stockage de métadonnées : Créateur, Lieu, Mobilier, Mur, Ouverture, Période, Plafond, Rôle et Sol ; Tables ayant en plus un stockage de fichier vers un dépôt : Photographie, Plan, Modèle 3D et Texte (à noter que la table photographie panoramique n est pas gérée par le système). Je décrierai dans cet ordre mes scripts. C.1. Structure sans dépôt Cette structure est reprise pour l ensemble des tables ne disposant pas de fichier à intégrer dans la base de données. Cette structure se compose de trois scripts : Index.php ; Form.html.php ; Infos.html.php. Index.php Form Infos Le script index.php (contrôleur) est lu le premier par le navigateur et il commande les deux autres fichiers form et infos. Le fichier form correspond au formulaire qui sera affiché lors de l ajout d un élément ou de sa modification. Le fichier infos permet la visualisation des données déjà intégrées à la base sous la forme d un tableau. C.1.a. Description du fichier index.php Le fichier index.php est constitué d un ensemble de commande PHP anticipant les différentes commandes qui peuvent être lancées par l utilisateur. (Ajouter, Modifier, Supprimer ou ne rien faire) Prenons l exemple de la table Créateur. Voici un extrait d index.php situé dans le fichier Créateur, luimême situé dans le fichier gestion. Page 71

80 Annexe C : Notice de Système de Gestion de Base de Données (SGBD) <?php est la balise signifiant le début d un script PHP. Include est une fonction PHP permettant d aller chercher un autre fichier ici bd.inc.php situé dans le fichier includes $_SERVER[ DOCUMENT_ROOT ] est une variable PHP signifiant la racine du serveur. Le fichier Includes est constitué de plusieurs scripts qui se répéteront, il doit être placé à la racine du serveur, donc dans le fichier www. Ils contiennent des variables ($texte, $lien, $erreur ) qui leurs sont dévolues. Affichage avec fonction print_html($texte) Connexion à la base de données ($lien) Affichage d une erreur echo($erreur) Résolution du problème apostrophe Maintenant il s agit d aller chercher les informations qui se situent déjà dans la base de données afin de les afficher dans le fichier infos : Une requête vers la base de données est effectuée pour y récupérer ses informations. C est la fonction mysqli_query qui s en charge avec pour attribut la requête SQL et la variable $lien. La variable $lien provient de la fonction bd.inc.php pour faire la connexion avec la base de données. On ajoute toujours une erreur si la requête ne marche pas, s il n y a pas de problème les informations sont transmises à la variable $ligne puis $infos. Chaque résultat est stocké dans la variable $ligne puis de nouveau décomposé suivant le champ à laquelle l élément appartient. Page 72

81 On transmet se tableau au fichier infos. Ce template infos forme un tableau (si il ya des infos) les balises th forme les en-têtes du tableau et dans le même ordre, nous allons ajouter nos données. Pour cela nous utilisons du PHP à l intérieur du HTML (le navigateur sait gérer) et plus particulièrement de la fonction foreach. Pour expliciter cela veut dire : Pour chaque variable $info (chaque ligne de la table) transmise elle vaut la variable $infos (la même que le fichier index) nous y ajoutons les informations des champs que nous voulons afficher entre crochet (puisqu il s agit d un tableau) et également deux boutons supprimer et modifier. Au début du script, un lien est fait pour un ajout, nous verrons cela ensuite. Page 73

82 Annexe C : Notice de Système de Gestion de Base de Données (SGBD) C.1.b. Gestion de la suppression Nous revenons au fichier index et la gestion du bouton suppression. Pour signifier l action du bouton suppression, nous utilisons une commande POST, parce que la method post a été utilisée dans le template infos pour la création de nos deux boutons Supprimer et Modifier. (Voir script page précédente) L ensemble des requêtes est relative à un identifiant afin de ne supprimer uniquement les données le concernant. Pour cela on la nomme par la fonction mysqli_real_string qui sécurise le contenu de la variable. Un élément mobilier supprimé entraîne l effacement de l ensemble des tables où se situe celui-ci. Le script se conclue par la commande header ( Location :. ) qui permet au navigateur d être redirigé vers la même page. C.1.c. Gestion des modifications et Ajout (1) Ajout Suite du fichier index avec la table Créateur. NB : La table «créateur» est particulière dans sa création car elle fait le lien avec la table rôle. Dans le fichier index, le script est séparé en deux parties, une qui fait intervenir le fichier infos, l autre le fichier form. Pour l ajout et la modification des données nous nous situons dans la deuxième partie. En effet, l astuce est de reprendre le même formulaire (fichier form) pour une modification et un ajout. Page 74

83 Nous recommençons un script PHP et faisons appel au fichier includes. Nous faisons référence au lien qui était évoqué dans le template infos sur l ajout Cette fois ci la method n est pas POST mais GET. Dés lors, nous initialisons le template form, avec les variables $action, $bouton et $titre_page qui seront différentes selon l ajout ou la modification : Formulaire classique Cas particulier des cases à cocher (checkbox) Bouton soumettre Page 75

84 Annexe C : Notice de Système de Gestion de Base de Données (SGBD) (1) Explication des cases à cocher (checkbox) Nous avons deux parties, une pour le mot de passe et une autre pour les checkboxes constituant les différents rôles. Première partie Cette partie n a qu une singularité, celle d être un input de type password, cela permet de ne pas afficher le mot de passe mais des puces ( ). Deuxième partie Cette partie est plus compliquée. Elle consiste à gérer les cases à cocher. Une boucle for est créée pour apporter un identifiant unique à chaque rôle qui va être affiché. Cela pourra nous servir par la suite. Le type d input est checkboxes pour les cases à cocher. Comme nous ne connaissons pas à l avance le nombre de case qui va devoir être affichés, l attribut name est un tableau, cela est réalisé avec les deux crochets []. Pour distinguer les différentes cases qui sont cochés, dans l attribut id, nous utilisons notre identifiant $i. Pour plus d information sur cette partie, consultez le chapitre 7 du livre de Kevin Yank. Suite du fichier index : Le cas particulier des cases à cocher, nous oblige à aller chercher le nom des rôles pour qu il s affiche en face des cases. Pour cela nous utilisons les mêmes techniques que vu précédemment avec en plus l attribut selected =>FALSE qui indique qu initialement les cases ne seront pas cochées. Page 76

85 Le code de l ajout est séparé en deux, d abord nous initialisons la page pour l afficher en mode ajouter if isset GET[ ajout ], puis nous reprenons le cours du traitement en ajoutant les données à la base if (isset($_get[ ajoutform ])). Nous finissons par envoyer toutes ces données au fichier form. Suite du code pour le cas particulier des rôles : L astuce ici, est de faire appel à la fonction mysqli_insert_id. Celle-ci récupère l identifiant du créateur que nous venons d ajouter. La deuxième fonction utilisée est md5, elle chiffre le mot de passe en lettre et chiffre sur 32 caractères. D où le champ mdp qui est de type CHAR (32 caractères). Cette partie de code n utilise pas une requête INSERT, mais un UPDATE, car le créateur est déjà enregistré, il s agit ici de mettre à jour son mot de passe. Il en va de même pour le rôle. C.1.d. Modification Passons maintenant à la modification des données. Le but est de pouvoir afficher les données déjà inscrite dans la base de données dans le formulaire et de pouvoir les modifier. Page 77

86 Annexe C : Notice de Système de Gestion de Base de Données (SGBD) Même introduction que pour l ajout. Ici on va chercher les données et les inscrire aux inputs du fichier form au travers de leurs variables respectives. Il en est de même pour les rôles affectés aux créateurs. Les cases cochées sont transmises par l intermédiaire de la fonction array() qui crée un tableau et in_array qui teste les identifiants des cases cochées s ils appartiennent également à des identifiants de rôle. A la fin de cette partie tout est envoyé au fichier de form. On obtient alors : Figure C.1 : Capture d'écran du SGBD pour la table "créateur" Les informations vont maintenant être modifiées, le code est similaire à l ajout nous passons d un INSERT à un UPDATE comme il a été dit précédemment. Aussi une boucle foreach est effectuée sur les cases cochées dans le cas où plusieurs de celles-ci le sont. Page 78

87 C.2. Structure avec dépôt La structure sans dépôt devrait être la même mais par manque de temps, la fonction modification n a pas été réalisée. Nous nous retrouvons donc, avec deux fichiers : Index.php Fichiers. html.php La principale distinction entre les deux structures est l ajout d un fichier qui va être stocké en externe sur le serveur. C'est-à-dire qu il n est pas stocké dans la table elle-même mais au niveau d un fichier situé sur le répertoire racine du serveur. Seul l URL, le type du fichier stocké et le nom du fichier est inscrit dans la table. Page 79

88 Annexe C : Notice de Système de Gestion de Base de Données (SGBD) Voici le script de fichiers.html.php : Formulaire classique Tableau des données Boutons «Supprimer» et «Télécharger» Page 80

89 Intéressons-nous maintenant au contrôleur de ce template : Nous allons décrire seulement les fonctions que nous n avons pas encore abordées. La première partie est le dépôt du fichier, mais il faut également le copier sur le répertoire. Pour cela, la fonction copy est utilisée, nous utilisons également les variables créées automatiquement lors d un dépôt de fichier : Variables $FILES[ depot ][ tmp_name ] $FILES[ depot ][ name ] $FILES[ depot ][ size ] $FILES[ depot ][ type ] Description Contient le nom du fichier stocké sur le disque dur du serveur Contient le nom du fichier stocké sur le disque dur de la machine du client Contient la taille du fichier en octet Contient le type MIME( image/jpeg, text/plain ) La copie du fichier se fait sous le nom du fichier que l utilisateur place dans le SGBD avec un préfixe qui correspond au temps lors de son dépôt. Ce préfixe, time(), permet de ne pas écraser deux fichiers ayant le même nom. Nous y ajoutons également le chemin de destination : Page 81

90 Annexe C : Notice de Système de Gestion de Base de Données (SGBD)!copy($_FILES[ depot ][ tmp_name ], C:/wamp/www/photo.time().$_FILES[ depot ][ name ] C.2.a. Téléchargement La principale difficulté du téléchargement, c est le remplissage des champs liés au fichier inséré au sein de la table de destination (url, type mime, nom de fichier). En effet, il est indispensable d ajouter ces informations ne serait ce que pour retrouver notre fichier, mais aussi pour son téléchargement. Nous retrouvons ces informations lors de l utilisation de la fonction header (en bas du script): Modification de l emplacement du serveur Dans la réalisation de notre SGBD, le changement de place du serveur va provoquer des disfonctionnements à deux endroits : Tout d abord, le fichier includes est à modifier pour tout changement de nom de la base de données ou de changement de nom d utilisateur et de mot de passe. De plus, les tables ayant un dépôt de fichier, il faudra changer les chemins de destination et les url associés au fichier au niveau des scripts PHP. Page 82

91 D. Notice script PHP Modèle Interactif Cette notice décrit le fonctionnement de l interface 3D. Il est préférable d avoir déjà lu la notice sur le Système de Gestion de Base de Données. L interface est composée de différentes fonctions : Le modèle 3D ; Une liste déroulante qui permet d afficher les documents en dessous du modèle 3D ; Un ensemble de cases à cocher reprenant l ensemble des périodes et permettant de faire interagir le modèle 3D. Pour gérer ces différentes fonctionnalités, la structure est la suivante : Un contrôleur Index.php et le template HTML form.html.php Index.php Form.html. php D.1. Template Form Pour comprendre le fonctionnement de la fenêtre 3D de l interface, je vais décrire le fichier form puis ensuite nous passerons au contrôleur. La première étape est de chercher à savoir si votre PC est compatible WebGL, il faut installer la dernière version de firefox ou chrome. ( Puis, allez sur le site du X3DOM, choisissez un exemple basique, si vous obtenez un cube bleu et que vous savez le manipulez, vous êtes prêt. Sinon, vérifier le pilote de votre carte graphique, il doit être à jour pour avoir la compatibilité OpenGL. Chercher le type de votre carte graphique, Dans le panneau de configuration>système>matériel>gestionnaire de périphérique>carte graphique puis rendez vous sur le site : Figure D.1 : Capture d'écran pour le changement de pilote de la carte graphique Page 83

92 Annexe D : Notice script PHP Modèle Interactif Pour commencer, voici le début du fichier form.html.php : Lien vers les scripts CSS & JavaScript du X3DOM + style.css (en local) Sommaire & logo site internet Liste déroulante Cases à cocher Nous nous intéresserons à la liste déroulante puisque les cases à cocher ont été déjà vues dans la notice consacrée au SGBD. C est en fait le même principe que pour les cases à cocher, puisque nous ne savons pas à l avance combien de lieux vont être affichés, il nous faut affecter l identifiant du lieu à l attribut value suivie de sa description. De même une boucle foreach ira chercher l ensemble des variables trouvées par le contrôleur. Page 84

93 Annexe D : Notice script PHP Modèle Interactif Passons maintenant au cœur du projet, la fenêtre contenant l objet x3d : Puces de Navigation Gestion des arrière-plans et des points de vue Gestion des transformations Gestion des «inline» D.2. Gestion des puces de navigations Les puces de navigation sont situées en haut à gauche de la fenêtre du modèle 3D : Figure D.2 : Capture d'écran du modèle 3D de l'interface Chaque puce est reliée à une ligne en JavaScript qui fait appel à des fonctions situées en bas du script. Les images des puces sont situées dans le fichier puce situé dans le fichier interface. Page 85

94 Annexe D : Notice script PHP Modèle Interactif D.3. Gestion des Transformations Le système de coordonnées de l interface est le suivant : Figure D.3 : Repère du modèle 3D A partir de ce système, il s agit de faire afficher le modèle dés que l utilisateur clique sur Afficher. Pour cela, nous utilisons les balises <Transform> avec comme possibilité soit des rotations soit des translations. Les translations sont faciles à comprendre, il suffit d inscrire le vecteur translations dans les 3 dimensions. Pour les rotations en revanche, il ya une petite subtilité, pour commander selon l axe X il faut au préalable lui indiquer en mettant un 1 en première position suivie de deux 0 et enfin en quatrième position lui indiquer l angle (en radian) de déplacement du modèle. Pour agir N oublier pas de fermer vos balises par </Transform>. D.4. Gestion des points de vue Les points de vue sont régis selon les mêmes règles que les balises transformations, il suffit de lui indiquer la position en 3D selon le point de vue déjà transformer. Plusieurs autres paramètres peuvent être ajoutés : CenterOfRotation : centre de rotation ; Orientation : pour faire pivoter la position du point de vue (même principe que pour les balises transformations 4 paramètres, 1 pour chaque axe de rotation et le quatrième paramètre pour la valeur de l angle en radian) ; FielOfView : littéralement champs de vue, pour zoomer sur la position et réduire ainsi le champ de vue. Les points de vue peuvent être nommés, nous pourrons par la suite indiqués les vues selon les lieux quant ils seront modélisé pour faire le lien avec les documents. L exemple qui m a servi de modèle est le suivant : Page 86

95 Annexe D : Notice script PHP Modèle Interactif D.5. Gestion des arrières plan La gestion des arrière plan est facile à comprendre pour changer de couleur, il suffit de changer les couleurs en coordonnées rouge-vert-bleu. D.6. Gestion des inline Pour constituer le modèle 3D, la technique utilisée est la même que précédemment. Le contrôleur index.php va générer les modèles 3D selon les requêtes de l utilisateur dans la variables $x3dx. Nous récupérons cette variable qui est constituée d un tableau et nous allons le décomposer avec la fonction foreach. D.7. Gestion des documents Pour afficher les documents selon la liste déroulante, le code suivant reprend également la même technique : D.8. Contrôleur index.php D.8.a. Gestion du modèle 3D Passons maintenant, à la description du contrôleur : L affichage du modèle 3D et des documents se fait après avoir cliqué sur Afficher donc, l ensemble des requêtes se feront à l intérieur de ses accolades d où : If (isset($_post[ action ]) and $_POST[ action ]== Afficher ) A partir de cet événement, il faut anticiper les différentes actions de l utilisateur: La première hypothèse : l utilisateur clique directement sur afficher avec un lieu sélectionné ou non ; La deuxième : l utilisateur clique sur une ou plusieurs périodes avec un lieu sélectionné ou non ; Page 87

96 Annexe D : Notice script PHP Modèle Interactif D.8.b. Première hypothèse Pour la première hypothèse, nous sélectionnons l ensemble des modèles 3D sans restriction. D.8.c. Deuxième hypothèse Pour la deuxième hypothèse, il faut rajouter une condition qui signifie qu une période a été sélectionnée: If (isset($_post[ periodes ]) ) Nous ajoutons une condition dans la requête SQL, selon les périodes sélectionnées selon l utilisateur. Et nous générons les résultats à la variable $x3dx. Page 88

97 Annexe D : Notice script PHP Modèle Interactif D.9. Gestion des documents Les documents sont générés selon la sélection faite dans la liste déroulante. Il n y a qu une hypothèse, l utilisateur sélectionne un lieu et nous affichons les documents qui y sont relatifs. Si rien n est sélectionné, rien ne se passe au niveau des documents. Nous effectuons les différentes requêtes SQL et nous générons les résultats variable par variable ($planx, $textes, $panos). Ainsi, si une requête SQL n obtient aucun résultat les autres variables ne sont pas affectées. Page 89

98 Annexe D : Notice script PHP Modèle Interactif D.10. Gestion de la liste déroulante et des cases à cocher Pour générer les listes déroulantes et les cases à cocher, il faut aller chercher les informations situées sur le serveur. C est une partie similaire à celle expliquée pour le Système de Gestion de Base de Données. Voici la dernière partie du script : D.11. Chaîne de traitement pour l intégration des modèles 3D Pour une bonne intégration des modèles 3D dans l interface, il est nécessaire d avoir les bons paramètres d exportation depuis Sketchup et MeshLab. De plus, le contrôle du nom des textures dans le fichier *.x3d est nécessaire. Pour l exportation les paramètres doivent être les suivants : Figure D.4 : Paramètres d'exportation du modèle en Collada Figure D.5 : Paramètres d'exportation du modèle en X3D Page 90

99 Annexe D : Notice script PHP Modèle Interactif Pour la gestion des textures, lors de l exportation en Collada depuis Sketchup, vérifier le nom des textures. Elles doivent correspondre à celle de Sketchup. Si, un fichier comprend plusieurs textures, insérer dans le SGBD celle qui n a pas encore était intégrée ou sinon l une des deux au choix. En effet, le système est actuellement fonctionnel qu en intégrant une texture par modèle. Une texture étant commune à de nombreux modèles, vous insérez souvent la même. De plus, le nom qui est stocké étant le même que celui se situant sur le PC sur lequel vous travaillez, si vous insérez une texture déjà stockée elle va écraser la précédente. Donc, si vous insérez qu une seule des deux textures que vous devez théoriquement insérer, prenez la nouvelle la précédente l est surement déjà! Enfin, le nom des textures doit correspondre dans le fichier X3D. Générez le fichier dans Notepad++ et vérifiez : Lors de l intégration d une nouvelle texture, il se peut que X3DOM ne la génère pas, essayez de la «retailler» depuis le logiciel Irfanview. Et testez son intégration de nouveau! Le fichier X3D doit être débarrassé de ses accents!! Sinon, le modèle sera visible depuis Chrome mais pas depuis Mozilla!! Exemple : <meta content= «23 août 2011» name= «created»/> <meta content= «23 aout 2011» name= «created»/> Page 91