Valeur de cette activité : 5 points
Compétence :
Compétence :
Compétence :
PEPS - Le WebGl avec X3DOM : L'avenir du web3d

A-Module 25 : Web-3D : 5 points - difficulté : 2

Le WebGl avec X3DOM : L'avenir du web3d

Description

Plusieurs technologies différentes ont été utilisées afin de produire des scénes 3D sur le web : java , vrml, ...
La technologie X3dom est très récente et prometteuse.

Le X3DOM est un dérivé du langage VRML, c'est une combinaison des langages suivants : HTML, CSS, VRML, JAVASCRIPT et SVG.
Cette activité peut également être liée aux activités des Modules 3D (blender + wings3d) et 2D (traitement de l'image).
Voici quelques options utiles pour visualiser vos fichiers au format .x3d et/ou .wrl
  1. Utilisez blender et le menu fichier + importer
  2. télécharger et installer un lecteur de fichier .x3d x3dedit ou X3DEDIT ou Lecteur xj3d ICI ou whitedune (tapez dans le terminal sudo apt-get install whitedune ) .
  1. Une autre option pour visualiser vos fichiers .x3d est d'utiliser le lecteur vrml whitedune (site officiel et téléchargement de la dernière version 64 bits):
    sudo apt-get install whitedune
  2. Téléchargez et extrayez le convertisseur en tapant dans le terminal :
    wget http://ladifference.info/i/images/profPierreMorissette/x3dom/tovrmlx3d.zip && unzip ./tovrmlx3d.zip &&sudo chattr +i ./tovrmlx3d &&rm ./tovrmlx3d.zip
  3. Lancez whitedune et utilisez le menu OPTIONS + INPUT SETTINGS et identifier le convertisseur à utiliser : /home/cb/tovrmlx3d
  4. Créez votre scène 3D dans whitedune
  5. Exportez au format X3DXML au format .x3d
  6. Ouvrez votre fichier .x3d dans geany
  7. Supprimez les deux premières lignes <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" "http://www.web3d.org/specifications/x3d-3.0.dtd">  
  8. Ajoutez au début du fichier les librairies x3D Css et Javascript <link rel="stylesheet" type="text/css" href="http://ladifference.info/i/images/profPierreMorissette/x3dom/x3dom.css"></link> <script type="text/javascript" src="http://ladifference.info/i/images/profPierreMorissette/x3dom/x3dom.js"></script>
  9. Copiez le code en entier
  10. Collez-le dans votre page
  11. Ajoutez les paramètres de largeur et hauteur à votre balise X3D :
    width="1000" height="800"
Voici quelques autres logiciels utiles :
  1. mm3d :
    Éditeur d'objets au format .obj et .md3
    sudo apt-get install mm3d
  2. wings3d : >Éditeur d'objets au format .obj et .3ds, exporte également au format .wrl
    sudo apt-get install wings3d
  3. VariCad (enregistrement requis) Lecteur et convertisseur de fichiers 3d
  4. orbisnap : lecteur de fichiers .wrl
  5. Liste de plusieurs lecteurs de fichiers 3D


Une connaissance de base de ces langages vous permettra d'apprendre facilement le langage X3DOM.

Un des avantages de ce langage est qu'il est intégré aux navigateurs web récents (contrairement au langage VRML), ce qui évite l'obligation d'utiliser des programmes externes ("plug-ins").

Cliquez ici pour afficher un exemple impressionnant!

Autres exemples à voir Essayons cette technologie.
ATTENTION : votre navigateur web doit supporter cette technologie.
Cliquez ici afin d'afficher la liste des navigateurs supportés
Vous pouvez utiliser les navigateurs iceweasel, chromium, firefox, google-chrome ou opera.

Si vous utilisez le navigateur Iceweasel, tapez dans la barre d'adresse :
about:config
Recherche le terme webgl
Réglez par un double clic webgl.force-enable à true

Si vous utilisez le navigateur Google-Chrome, fermez votre navigateur et lancez-le en tapant dans le terminal :
google-chrome --enable-webgl --ignore-gpu-blacklist
Vous pouvez tester ensuite en tapant dans le terminal :
google-chrome --enable-webgl --ignore-gpu-blacklist http://ladifference.info/i/images//profPierreMorissette/x3dom/x3dom1.html

Si vous utilisez le navigateur Opera, tapez dans votre barre d'adresse :
opera:config#Enable%20WebGL
et indiquer la valeur 1 dans le champ Enable Webgl et cliquez sauvegarder Vous pouvez tester ensuite en tapant dans le terminal :
opera http://ladifference.info/i/images//profPierreMorissette/x3dom/x3dom1.html


Voici ma première réalisation



Voici le code utilisé : (lien vers ce fichier) <x3d width="500px" height="400px"> <scene> <shape> <appearance> <material diffuseColor='red'></material> </appearance> <box></box> </shape> </scene> </x3d>

Si vous avez réalisé des activités du module VRML, vous noterez une grande similitude entre le code X3DOM et le langage VRML.
Notez que vous pouvez répéter cette activité plus d'une fois en réalisant les différentes tâches demandées ci-dessous.

Au besoin, vous pouvez installer l'éditeur x3dEdit en tapant dans le terminal (au labo seulement) :
wget http://10.114.6.69/prof/X3D-Edit3.3.zip && unzip ./X3D-Edit3.3.zip && chmod a+x /home/cb/x3dedit33/bin/x3dedit33

Lancez en tapant dans le terminal /home/cb/x3dedit33/bin/x3dedit33

Tutoriel et exemples : http://doc.instantreality.org/tutorial/


Voici une liste des tâches à effectuer
  1. Les formes 3D : cylindre, sphère, cube , ... : insérer 4 formes de base en modifiant les différents paramètres de position et de couleur
  2. Les textures images : insérer 2 formes en utilisant une texture-image différente pour chacune (ne fonctionne pas avec le navigateur google-chrome mais fonctionne avec firefox)
  3. Le redimensionnement d'objets : modifier les dimensions de 5 formes de bases dans une même scène (aide)
  4. Le positionnement : modifier les positionnement de 5 formes de bases dans une même scène
  5. Le texte : insérer 2 textes différents dans une même scène
  6. L'environnement : ciel, brouillard,... : créez et modifiez les paramètres du ciel et du brouillard dans une même scène
  7. Les informations de navigation : ...
  8. Les vues : créez 2 vues différentes dans une même scène afin de voir un objet sous ces 2 vues
  9. La mise à jour de propriétés : modifier 2 propriétés d'un même objet dans une même scène sur un même bouton ou sur un bouton séparé(distinct)
  10. Insérer plus d'un fichier dans la même page : insérer 3 fichiers dans une me page
  11. Ajouter et supprimer dynamiquement des objets : créer un bouton pour ajouter et un bouton pour supprimer un objet et répéter pour un deuxième objet
  12. L'éclairage, lumières, lampes, soleil : insérer une source de lumière et modifiez les propriétés
  13. Afficher un fichier devant le texte de la page : vous devez ajouter deux fichiers devant un texte de la page
  14. L'utilisation de modèles : utilisez deux modèles différents dans une même scène
  15. Insérer un fichier externe (inline) : utilisez deux fichiers externes différents dans une même scène
  16. Les formes 2D : insérer 4 formes en modifiant les différents paramètres
  17. Insérer un fichier produit avec Blender et exporter au format .x3D et convertir en X3dom (guide ici) : créez un objet avec blender, exportez-le au format .x3d et convertissez cette objet en x3dom
    ATTENTION : le logiciel InstantReality ne peut être installé sur notre système Debian/Crunchbang.
    L'enseignant l'a installé sur Ubuntu 12.04 sur virtualbox sur son ordinateur.
    Vous pouvez utiliser l'ordinateur de l'enseignant afin de convertir votre objet .x3d en page .html x3dom.
    Cliquez ici afin de voir le résultat du test du prof.
    Fichier .x3d utilisé Une autre option est d'utiliser l'add-on de blender nommée x3dom-template pour exporter directement à partir de blender une scène au format .html
    Voici la procédure pour installer l'add-on
    1)tapez dans le terminal :
    wget http://opendimension.org/projects/x3dom_addon/2013_11_27_io_scene_x3dom.tar.gz
    2) Extraire le contenu du fichier en tapant dans le terminal :
    tar xvfz 2013_11_27_io_scene_x3dom.tar.gz
    3)copiez le répertoire créé et son contenu dans le répertoire des scripts de blender:
    sudo cp -R ./io_scene_x3dom /usr/lib/blender/scripts/addons/ ou
    sudo cp -R ./io_scene_x3dom /usr/share/blender/scripts/addons/
  18. Insérer un fichier produit avec Wings3D et exporté au format .wrl et converti en X3dom
  19. Les détecteurs
  20. L'animation : animez un cube qui se déplace selon l'axe des y
  21. Les scripts
  22. Convertir un fichier vrml (.wrl) au format .x3d Outil en ligne et logiciel à installer
    Convertir ce fichier ou tout autre fichier .wrl de votre choix


     
    Une autre option est d'ouvrir votre fichier .wrl avec whitedune et de l'exporter au format .x3d.
    Ensuite vous copiez le code de ce fichier compris entre les balises <x3d> </x3d> dans un fichier .html en y ajoutant les librairies css et javascript au début : <link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/x3dom.css"></link> <script type="text/javascript" src="http://www.x3dom.org/download/x3dom.js"></script> Autre information : logiciel tovrmlx3d pour convertir un fichier .x3d en fichier .wrl (vrml)
  23. Plusieurs autres
  24. Le X3DOM et le langage CSS
  25. Modifier dynamiquement un paramètre d'un objet


  1. Affichez les sites suivants :

    Exemples d'applications plus complexes

    Veuillez utiliser le navigateur firefox ou tout autre navigateur qui supporte le WebGl

  2. Affichez au besoin les exemples du profs :

  3. IMPORTANT : Cliquez le bouton 4- Accès à mon espace de téléchargement de votre portfolio

  4. Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 94372 dans le champ No de la directive



  5. Insérez, au début de votre page ces deux éléments: <link rel="stylesheet" type="text/css" href="http://ladifference.info/i/images/profPierreMorissette/x3dom/x3dom.css"></link>

    <script type="text/javascript" src="http://ladifference.info/i/images//profPierreMorissette//x3dom/x3dom.js"></script>

  6. Sélectionnez une tâche parmi celles présentées plus haut

  7. Réalisez cette tâche

  8. Enregistrez votre page au format html

  9. Validez le fonctionnement de votre page
  10. Ajoutez ensuite une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 94372

  11. Inscrivez dans le champ titre : Le WebGl avec X3DOM : L'avenir du web3d

  12. Sélectionnez la section : MODULE Web-3D

  13. Sélectionnez la matière : informatique

  14. Inscrivez dans le champ no de la directive : 94372

  15. Inscrivez dans votre page le titre de niveau 1 décrivant cette tâche Exemple : insérer 5 formes en modifiant les différents paramètres



  16. Ajoutez un LIEN direct vers votre page html

    ou

    Insérez dans votre page en utilisant les balises IFRAME votre réalisation
    Exemple :
    <iframe src=URL_DE_VOTE_PAGE.html style="width:500px;height:400px;"></iframe>

  17. Visualisez votre page et apportez des modifications au besoin.