Communauté
Forums
Objectifs de Web3d-fr
Chat 3D (Martisse)
Faites un lien sur notre site

Voici un petit cours qui vous permettra
d'acquérir les bases du VRML 2



Sommaire
 
Étape 1 :  Le premier pas 
> Le viewer
> Le type de fichier
> La couleur du fond
> Les points de vu
Étape 2 :  Les primitives du VRML 2 
> Le parallélépipède rectangle
> La sphère
> Le cylindre
> Le cône
Étape 3 :  Le premier objet 
> Récapitulons...
Étape 4 :  Les choses sérieuses commencent ;-) 
> Les formes complexes
> Le texte
> L'homothétie et la symétrie
> Les couleurs
> Les textures
> Le sol
> Définir le mode de déplacement du visiteur dans la scène
> En savoir plus sur les textures
> La fausse 3D
> La navigation dans le site entre les pages web-2D et web-3D
Étape 5 :  Créer des formes 
> Et la modélisation dans tout ça ?
Étape 6 :  L'optimisation 
> Arrondir les coordonnées et compresser

 

    Tout d'abord merci de me faire part des erreurs, fautes d'orthographes et coquilles que vous trouverez sûrement dans ce document (d'autres commentaires sont également les bienvenues).

  > Le viewer :
    Pour visualiser les espaces virtuels VRML vous devez posséder un plug-in VRML.

Vous pouvez naturellement en installer un dans IE et un autre dans Netscape.

  > Le type de fichier :
    Pour commencer une scène, ouvrez Bloc-notes (ou Simpletext pour mac) et enregistrez le document avec une extension *.wrl (si vos extentions de fichier ne sont pas visibles, désactivez la case à cocher «Masquer les extensions MS-DOS pour les types de fichier enregistrés» dans les options du menu affichage de l'explorateur windows), puis écrivez au début du document: 

#VRML V2.0 utf8

    Vous devez copier ce commentaire à la première ligne de tous vos documents VRML.

  > La couleur du fond :
    Vous devez ensuite définir la couleur d'arrière plan de votre scène en écrivant le noeud suivant:
 

Background { skyColor .1 .4 .7 }

    Les trois nombres (qui doivent être compris entre 0 et 1) sont respectivement les valeurs RVB (rouge vert bleu) qui définissent la couleur du fond. (0,1 pour le rouge, 0,4 pour le vert et 0,7 pour le bleu, cette dernière étant la plus élevée, nous aurons un fond dans les tons bleu.)

  > Les points de vue
Vous devez ensuite définir le point de vue qu'aura le visiteur en entrant dans votre scène avec le noeud suivant:
 

Viewpoint {
 position  0  .8  2
 orientation  0  1  0  -1.571
 description "vue 1"
}

Les trois nombres définis dans le champ «position» sont respectivement les coordonnées dans le repère d'axes X, Y et Z.
Y est la hauteur, Z est la profondeur (axe du regard par défaut de la caméra avant rotation) et X est la largeur (axe allant de droite à gauche avec la position par défaut de la caméra).
(il est important de remarquer que l'unité est le mètre pour que la navigation des plug-ins soit convainquante).
 
Les trois premiers nombres placés après "orientation" définissent les coordonnées XYZ d'un vecteur, et le quatrième définit l'angle de rotation en radians autour du vecteur. (Ici nous avons une rotation de 1.571 radian autour de l'axe Y, ce qui correspond à un quart de tour vers la droite, car le sens de rotation utilisé est le sens trigonométrique qui est l'inverse des aiguilles d'une montre.)
 
    Le nom entre guillemets du champ «description» seras le nom du point de vue. 

Viewpoint { 
 position 0 1.6 1.8 
 orientation 1 0 0 -.6 
 description "vue 2" 
} 
Viewpoint { 
 position 0 .05 1.5 
 orientation .3 -.1 .5 .4 
 description "vue 3" 
}

Vous pouvez mettre autant de point de vue que vous voulez, le visiteur pourra les voir successivement à l'aide de sont navigateur VRML. (Le premier point de vue seras celui utilisé à l'ouverture du document.)

  > Le parallélépipède rectangle :
Les formes de base à votre disposition sont le parallélépipède rectangle, la sphère, le cylindre et le cône.
 
Le noeud codant pour le parallélépipède rectangle est: 

Transform { 
 translation 0 -.1 0 
 rotation 0 1 0 1.05 
 children [ 
  Shape { 
   geometry Box { 
    size 1 .2 1 
   } 
   appearance Appearance { 
    material Material { 
     diffuseColor .5 0 0 
    } 
   } 
  } 
 ] 
}

Les nombres placés après «translation» sont les coordonnées dans un repère XYZ du centre du parallélépipède rectangle.
 
Les trois premiers nombres placés après «rotation» définissent les coordonnées XYZ d'un vecteur, et le quatrième définit l'angle de rotation en radians autour du vecteur. (Ici nous avons une rotation de 60 degrés autour de l'axe Y.)
 
Dans le champ "size" nous avons les dimensions suivant X, Y et Z du parallélépipède rectangle.
 
Enfin dans le champ "diffuseColor" nous avons les valeurs en RVB qui définissent la couleur de notre objet. (Les trois nombres doivent être compris entre 0 et 1 comme pour la couleur de fond.)
 
Vous pouvez voir à quoi ressemble ce parallélépipède rectangle (ainsi que les autres primitives vrml qui vont suivre) sur la première image de l'étape 3: Récapitulons.
 
 Note sur la mise en forme du code :  (si vous ne connaissez aucun langage de programmation vous serez peut-être étonné par la présentation du code) chaque élément contenu est décalé avec une tabulation par rapport à l'éléments contenant (cela s'apelle l'indentation), et les accolades (ainsi que les crochets) fermantes sont placées à la ligne au même niveau que le noeud qui l'a ouverte. L'ensemble des retours charriots (retours à la ligne), des espaces et des tabulations s'apellent l'extraneous et est purement facultatif mais grandement recommandé pour la lisibilité.

  > La sphère :
    Le noeud codant pour la sphère est :
 
Transform { 
 translation 0 .9 0
 children [ 
  Shape { 
   geometry Sphere { 
    radius .21 
   } 
   appearance Appearance { 
    material Material { 
     diffuseColor .8 1 .8 
    } 
   } 
  } 
 ] 
}

Les champs «translation» et «diffuseColor» ont ici les mêmes fonctions que pour le parallélépipède rectangle (le champ «rotation» est ici inutile sauf cf ci-dessous). Le champ «radius» est comme vous devez vous en douter le rayon de la sphère.
 
Pour réaliser une sphère applatie type Smarties, ou un ballon de rugby allez voir la section homothétie

  > Le cylindre :
Le noeud codant pour le cylindre est:
 
Transform {
 translation 0 .1 0
 rotation 1 0 0 0
 children [
  Shape {
   geometry Cylinder {
    height .2
    radius .28
    top TRUE
    side TRUE
    bottom FALSE
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
    }
   }
  }
 ]
}

Les champs «translation», «rotation» et «diffuseColor» ont toujours les mêmes fonctions que pour le parallélépipède rectangle. Le champ «radius» est le rayon du cylindre et «height» est sa hauteur.

  > Le cône :
Le noeud codant pour le cône est:
 
Transform {
 translation 0 .6 0
 rotation 0 0 1 0
 children [
  Shape {
   geometry Cone {
    bottomRadius .25
    height .8
    side TRUE
    bottom TRUE
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
    }
   }
  }
 ]
}

Le champ «bottomradius» est le rayon de la base du cône et «height» sa hauteur. Les autres champs ont les même fonctions que précédament.

  > Récapitulons...
Ainsi si vous avez copié-collé tous les noeuds présentés jusqu'ici dans Bloc-notes vous devez obtenir le code suivant:
 
#VRML V2.0 utf8

  # Couleur du fond
Background { skyColor .1 .4 .7 }

  # Point de vue par defaut
Viewpoint {
 position 0 .8 2
 orientation 1 0 0 -.22
 description "vue 1"
}

  # Autres points de vue
Viewpoint {
 position 0 1.6 1.8
 orientation 1 0 0 -.6
 description "vue 2"
}
Viewpoint {
 position 0 .05 1.5
 orientation .3 -.1 .5 .4
 description "vue 3"
}
  # parallelepipede rectangle bordeaux
Transform {
 translation 0 -.1 0
 rotation 0 1 0 1.05
 children [
  Shape {
   geometry Box {
    size 1 .2 1
   }
   appearance Appearance {
    material Material {
     diffuseColor .5 0 0
    }
   }
  }
 ]
}
  # Sphere verte
Transform {
 translation 0 .9 0
 children [
  Shape {
   geometry Sphere {
    radius .21
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
    }
   }
  }
 ]
}
  # Cylindre vert
Transform {
 translation 0 .1 0
 rotation 1 0 0 0
 children [
  Shape {
   geometry Cylinder {
    height .2
    radius .28
    top TRUE
    side TRUE
    bottom FALSE
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
    }
   }
  }
 ]
}
  # Cone vert
Transform {
 translation 0 .6 0
 rotation 0 0 1 0
 children [
  Shape {
   geometry Cone {
    bottomRadius .25
    height .8
    side TRUE
    bottom TRUE
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
    }
   }
  }
 ]
}

Ce code copié dans Bloc-notes et enregistré avec une extension de fichier *.wrl, vous donnera ceci ouvert avec un navigateur muni d'un plug-in VRML:  
Green Pawn
 
Donc voici ce que vous pourriez obtenir en utilisant les divers primitives vues jusqu'à présent :
Chessboard

  > Les formes complexes
Pour réaliser des formes complexes on utilise le noeud «IndexedFaceSet». Le principe de ce noeud est de donner les coordonnées des points de la forme puis de préciser quels points formeront une facette. Les coordonnées des points sont donnés dans le champ «point» (qui seront numérotés à partir de 0; ici nous avons 12 points de 0 à 11), puis des séries de trois numéros corespondant à trois points formant une facette sont donnés dans le champ «coordIndex»; chaque groupe de trois numéros est suivie du nombre -1 .
 
Transform {
 translation 0 0 0
 rotation 0 1 0 0
 children [
  Shape {
   geometry IndexedFaceSet {
    coord Coordinate {
     point [
.2 0 .2,   .2 0 -.2,   -.2 0 -.2,   -.2 0 .2,      # 0  1  2  3
.1 1 .1,   .1 1 -.3,   -.3 1 -.3,   -.3 1 .1,      # 4  5  6  7
.2 2 .2,   .2 2 -.2,   -.2 2 -.2,   -.2 2 .2,      # 8  9 10 11
     ]
    }
   coordIndex [
0, 1, 4, -1,   1, 4, 5, -1,
1, 2, 5, -1,   2, 5, 6, -1,
2, 3, 6, -1,   3, 6, 7, -1,
3, 0, 7, -1,   0, 7, 4, -1,

4, 5, 8, -1,   5, 8, 9, -1,
5, 6, 9, -1,   6, 9, 10, -1,
6, 7, 10, -1,   7, 10, 11, -1,
7, 4, 11, -1,   4, 11, 8, -1,
   ]
   solid FALSE
   }
   appearance Appearance {
    material Material {
     diffuseColor .6 .9 .7
    }
   }
  }
 ]
}

Ce qui suit le caractère # correspond à du commentaire et est facultatif; cependant il permet de numéroter chaque point.
 
Vous trouverez de plus amples informations sur comment exploiter ce noeud dans l'étape 5.
 
Vous ne réaliserez peut-être jamais d'objet entièrement au NotePad avec un noeud IndexedFaceSet (sauf si vous êtes un peu fou comme moi et que vous partez dans un trip modélisation au NotePad ;-) ) mais il est néanmoins intéressant de connaître sa structure.
Vous remarquerez ainsi que pour traduire un fichier vrml-1 en vrml-2 il suffit de copier-coller les définitions de points et de facettes du fichier vrml-1 dans ce noeud vrml-2.

  > Le texte
Pour inclure du texte dans vos scènes vous pouvez utiliser le noeud "Texte" :  
  # texte
Transform {
 translation 4.5 1.6 -8.5
 rotation 0 1 0 0
 children [
  Shape {
   geometry Text {
    string "Copiez ici votre texte sans utiliser de caracteres accentues."
    fontStyle FontStyle {
     size .3
      family ["SANS"]
     justify ["MIDDLE"]
    }
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
     ambientIntensity .3
     shininess .3
    }
   }
  }
 ]
}

Copiez dans le champ «string» votre texte sans accents (sinon rien ne s'affichera). Dans le champ size entrez la taille du texte et dans le champ «family» trois types de tipo sont disponibles: "SANS", "SERIF" et "TYPEWRITER". L'alignement du texte est défini dans le champ «justify», ici aussi trois valeurs possibles: "BEGIN", "MIDDLE" et "END".

  > L'homothétie et la symétrie
Le champ «scale» permet de déformer la sphère dans les différentes directions (une déformation nulle est  scale 1 1 1  puisque ceci multiplie les dimensions de l'objet). 
Transform {
 translation 0 .9 0
 scale .8 1.3 1
 children [
  Shape {
   geometry Sphere {
    radius .21
   }
   appearance Appearance {
    material Material {
     diffuseColor .8 1 .8
    }
   }
  }
 ]
}

Ce champ est aussi très utile pour réaliser des symétries avec -1 en X, Y ou Z suivant l'axe de symétrie voulu. Ainsi  scale 1 -1 1  multiplie par -1 toutes les coordonnées en Y de l'objet.
 
Pour voir comment utiliser cette technique pour simuler un reflet allez voir le didacticiel correspondant sur Wen3D-fr.com.
 

  > Les couleurs
Les différents paramètres permettant de régler la couleur des objets sont diffuseColor pour la couleur principale (dont le principe de réglage avec des valeurs en RVB à déjà été expliqué plus haut), ambientIntensity est l'intensité d'éclairage ambiant (une valeur entre 0 et 1), emissiveColor pour la couleur émise (type néon; se règle avec une valeur en RVB comme diffuseColor), specularColor pour la couleur des reflets (idem: une valeur RVB), shininess pour la brillance (une valeur entre 0 et 1) et transparency pour la transparence (une valeur entre 0 et 1).
 
 

Shape {
 geometry Box {size 9 .2 9 }
 appearance Appearance {
                material Material {
   diffuseColor .2 .1 .3
   ambientIntensity .5
   emissiveColor 0 0 .1
   specularColor 0 .2 .1
   shininess .6
   transparency .2
  }
 }
}

  > Les textures
Pour réaliser une texture on remplace le noeud «material» par le noeud «texture».
 
Le code d'une boîte avec une texture est alors:
 
Transform {
 translation   0   -.1   0
 rotation   0   1   0   1.05
 children [
  Shape {
   geometry Box {
    size   1   .2   1
   }
   appearance Appearance {
    texture ImageTexture {
     url "image.jpg"
     repeatS TRUE
     repeatT TRUE
    }
   }
  }
 ]
}

La texture utilisée ici est l'image "image.jpg". Le document VRML et l'image doivent être placés dans le même dossier.
 
Par soucis de clareté lorsqu'un document VRML utilise beaucoup de textures on peut regrouper toute les images dans un dossier appelé par exemple «textures», l'adresse relative spécifiée dans le champ «url» sera alors "textures/image.jpg". Le document VRML et le dossier «textures» doivent être placés dans le même dossier.
(C'est le même principe que les liens relatifs html.)
 

Pour réaliser une texture transparente voici la solution (idéal pour recréer de l'eau):
 
 
Shape {
 geometry Sphere {radius 1.8}
 appearance Appearance {
  material Material { transparency .5 }
  texture ImageTexture { url "maps/votre_texture.gif"}
 }
}

  > Le sol
Pour réaliser le sol de vos scènes vous pouvez utiliser le noeud «ElevationGrid»:
 
Transform {
       translation -125 0 -125
       rotation 0 1 0 0
       children [
  Shape {
   geometry ElevationGrid {
    xDimension 6
    zDimension 6
    xSpacing 50
    zSpacing 50
    height [
     0, 0, 2, 5, 7, 8,
     1, 0, 0, 2, 4, 7,
     2, 1, 0, 0, 2, 5,
     3, 1, 0, 0, 0, 2,
     3, 2, 1, 0, 0, 2,
     4, 3, 2, 1, 0, 0
    ]
   }
   appearance Appearance {
    material Material {
     diffuseColor .2 .6 .4
    }
   }
  }
 ]
}

Les champs «xDimension» et «zDimension» donnent le nombre de point que possède la grille suivant les axes x et z.
 
Les champs «xSpacing» et «zSpacing» donnent l'espacement suivant x et z entre chaque point de la grille.
 
Le champ «translation» indique ici les coordonnées du premier point et non le centre de la grille.
 

  > définir le mode de déplacement du visiteur dans la scène
Ici le visiteur sera en mode marcher en arrivant dans la scène mais pourra choisir le mode qu'il désir par la suite. Avec  type ["EXAMINE", "FLY"]  le visiteur sera initialisé avec le mode examiner mais ne pouras choisir que voler en deuxième ressort. Avec  type ["WALK"]  on impose la marche comme seule navigation possible. Et avec  type ["NONE"]  le visiteur ne peut naviguer dans la scène (peut-être utilisée pour réaliser une animation ou la caméra est en mouvement grace à une animation du noeud "Viewpoint").
 
 
NavigationInfo {
 type ["WALK", "ANY"]
 headlight FALSE
}

  > En savoir plus sur les textures
Pour optimiser votre page/scene web en 3D vous pouvez utiliser la même texture pour plusieurs objets différents en colorant cette texture de couleurs différentes. Pour cela il faut enregistrer votre texture en niveau de gris et indiquer la couleur avec laquelle la colorer dans «diffuseColor».
 
 

Shape {
 geometry Cylinder { height .4 radius .3 }
 appearance Appearance {
  material Material {diffuseColor .3 .8 .5}
  texture ImageTexture {url "maps/tex.gif"}
 }
}

Pour répéter une texture dans 2 dimensions, c'est comme ceci:
 
 

Shape {
 geometry Cylinder { height .2 radius .28 }
 appearance Appearance {
  texture ImageTexture {url "maps/bois.jpg"}
  textureTransform TextureTransform {scale 5 3}
 }
}

Vous pouvez aussi utiliser la propriétéde transparence des images *.gif (une application directe est vue à l'étape : la fausse 3D)
 
Pour optimiser vos scènes par rapport à l'accélération matérielle il faut également utiliser des tailles de textures précises : il faut utiliser des puissances de 2 qui sont des multiples de 64, donc vous avez le choix entre les dimentions en pixels : 64 x 64 ou 128 x 128 ou 256 x 256 (ou pourquoi pas 512 x 512 mais ça commence à faire grand pour du Web-3D et tous les plug-in ne sont pas capables de les afficher et les interprèteront tout simplement comme une texture 256 x 256)
 
Et pour optimiser le poid de ces textures, c'est comme l'optimisation des images pour un site Web-2D, pour les *.gif réduisez le nombre de nuances différentes au maximum (Gimp le fait excellement bien ;-) ) sinon pour les *.jpg vous savez comment faire...

  > La fausse 3D
Un principe bien connu en modélisation est l'intégation d'éléments 2D dans des environnements 3D. Pour réaliser ceci on utlise la propriétée des *.gif intégrants la transparence pour réaliser une image de notre objet détourée puis on plaque cette image sur un plan qui fera toujours face au visiteur. (ainsi on peut intégrer des personnages et des arbres [comme dans les modélisations d'archi] pour donner du réalisme sans avoir une scène qui pèse trop lourd pour être utilisable sur le réseau) (attention la facette doit être carrée si votre map est carrée comme je vous l'ai conseillé plus haut)
 
 
Billboard {
 axisOfRotation 0 1 0
 children [
Shape {
 geometry IndexedFaceSet {
  coord Coordinate { point [ 1 0 0, -1 0 0, -1 2 0, 1 2 0 ] }
  coordIndex [ 0, 1, 2, 3, -1, ]
  solid FALSE
 }
        appearance Appearance {
  material Material {diffuseColor 1 1 1 }
  texture ImageTexture { url "maps/arbre.gif" }
 }
}
 ]
}

  > La navigation dans le site entre les pages web-2D et web-3D
Pour créer des liens au sein d'une scène web utilisez le noeud «Anchor».  url "page2.wrl" sera comme vous l'aurez deviné un lien vers une autre page web 3D et  url "page2.html" sera comme vous l'aurez également deviné un lien vers une page web classique en HTML. Mais me direz-vous comment utiliser les frames et autres paramètres de naviguation? Eh bien, lisez la suite ;) 
Anchor {
 url "page2.wrl"
 description "aller a la page 2"
 children [
  Shape {
   geometry Sphere {radius .23}
   appearance Appearance {material Material {diffuseColor .3 .8 .5} }
  }
 ]
}

Attribuez les même commandes qu'en HTML à l'attribut "target" du noeud «parameter» pour utiliser les frames et autres paramètres de naviguation.
Petit rappel de HTML  _new pour ouvrir la page dans une nouvelle fenêtre (qui sera la même pour tous les liens avec ce paramètre), et si vous êtes dans une frame:  NameOfFrame  pour définir dans quelle frame doit s'afficher la page,  _blank pour définir un lien vers une nouvelle fenêtre (une nouvelle fenêtre à chaque lien),  _self valeur par défaut (lien à l'intérieur de la même frame),  _parent indique que la page doit s'ouvrir en occupant tout le frameset de la frame courante et  _top permet à la nouvelle page d'occuper l'intégralité de la fenêtre du navigateur supprimant ainsi tout frameset. 
Anchor {
 url "commentaire.htm"
 parameter [ "target=frame" ]
 description "afficher un commentaire sur cet objet"
 children [
  Shape {
   geometry Sphere {radius .23}
   appearance Appearance {material Material {diffuseColor .3 .8 .5} }
  }
 ]
}

Vous pouvez bien sûr utiliser des liens relatifs ou absolus ainsi que le protocol mailto: . Les commandes JavaScript pour effectuer un retour ou une fermeture de fenêtre fonctionnent aussi.
 
Vous pouvez aussi utiliser les cibles bien connues en HTML (lien dans un même document comme utilisé ici avec le sommaire) pour permettre une navigation dans la scène, c'est alors le nom DEF du «Viewpoint» qui doit être utilisé dans l'attribut url avec une dièse devant celui-ci:  url "#vue3" .
Vous pouvez aussi faire un lien (à partir d'une page html ou vrml) vers une cible d'une scène vrml et ainsi elle se chargera sur ce Viewpoint et non celui par défaut:  url "page2.wrl#vue3" 

  > et la modélisation dans tout ça ?
Bon malgré tout vous l'aurez compris c'est pas au NotePad que l'on va modéliser des objets très complexes, donc pour cela vous pouvez utiliser le modeleur de votre choix s'il exporte en VRML (s'il n'exporte pas en vrml, exportez votre objet dans un format que vous pourrez convertir en vrml). Ainsi vous pouvez utiliser Blender pour modéliser vos propres scènes (lisez le didacticiel sur ce sujet) Vous pouvez égalment réutiliser des objets trouvées sur internet (au format VRML 1 ou 2) pour les intégrer dans vos scènes (veillez cependant à avoir l'accord de l'auteur pour les publier sur internet).
Cependant vous me demanderez sûrement pourquoi s'intéresser au code alors que les modeleurs exportent en VRML 2 ? Hé bien c'est parce que si vous utilisez Blender ou un des autres modeleurs les plus répendus, ceux-ci n'étant pas spécialisés pour le VRML-2, vous aurez probablement besoin d'éditer le code généré pour arriver à ce que vous voulez obtenir, ou pour l'optimiser. Deplus pour ne pas avoir un fichier trop lourd à charger pour vos visiteurs il vaut mieux évidemment utiliser les primitives du VRML-2, plutôt que de laisser l'ensemble des coordonnées nécessaire pour réaliser par exemple une sphère, surtout quand ses points sont définis avec une précision au micron...
 
D'autre part, il existe malgré tout des modeleurs spécialisés pour le vrml (et ceux pour le X3D viendront sûrement eux aussi) mais le code généré est souvent mal optimisé et connaître le fonctionnement du code source permet de mieux choisir les options en sachant ce qui se passe derrière. Deplus les options avancées du code ne pourront jamais être prises en compte. Et comme l'a dit John Maxwell utiliser un logiciel Wysiwyg «est une méthode rapide, mais [...] le code résultant est toujours plus volumineux et moins performant qu'un travail codé à la main» et pour Jean-Michel Réveillac les modeleurs exportant en vrml «présentent l'inconvénient de générer un code peu optimisé et donc des fichiers de taille importante. Par ailleurs, ces logiciels ne considèrent pas l'intégralité des fonctions vrml et certains cas de figure sont impossibles à créer, ce qui oblige le développeur à reprendre le code».
 
(Attention si vous publiez des choses, faites attention de respecter les droits d'auteur et ne publiez rien que vous ayez obtenu avec un logiciel dont vous ne possédez pas la licence, c'est pourquoi je prends Blender comme exemple qui est libre pour une utilisation non commerciale et non professionnelle. Deplus il a l'avantage d'être extrêmement bien documenté sur le web, et c'est un logiciel avec lequel on peut travailler très vite grâce à son interface «deux mains»).
 

  > L'optimisation des fichiers VRML :
Un dernier point mais qui a une très grande importance concerne la taille des fichiers générés, car même si vous avez l'adsl pensez que c'est loin d'être le cas pour tous le monde, donc il faut absolument penser à optimiser vos scènes au maximum. En effet une fois compactées vos scènes resteront consultables en ligne, car cette compression ne sert pas à rendre votre scènes plus facilement téléchargeables mais simplement plus légères, car il ne s'agit pas ici de zipper l'ensemble des fichiers dans une même archive, mais de compresser chaque fichier individuellement, car les plug-ins sont capables de visualiser les fichiers vrml compactés. Pour cela vous pouvez utiliser le logiciel de commpression de votre choix s'il peut compresser au format gunzip *.gz ou équivalent; renommez alors le fichier résultant de cette compression *.wrl.gz en *.wrz qui corespond au packed-vrml. Mais pensez bien alors si vous avez des Inline de corriger l'extention des liens relatif! :-) De même pour voir le code d'un fichier récupéré sur internet faites l'opération inverse.
 
(Utiliser l'extension *.wrz permet d'indentifier facilement la nature de vos fichiers, mais l'extension classique *.wrl fonctionne tout aussi bien pour le packed-vrml. Ça peut-être utile de savoir ça si vous avez une scène composée de nombreux "Inlines" et que vous avez la flême de renomer tout vos liens relatifs.)
 
Pensez également à utiliser l'optimiseur de fichier de mon site pour supprimer les décimales superflues des coordonnées de points de vos modèles réalisés avec Blender (ou un autre modeleur et ce même si vous compressez ensuite vos fichiers), en effet une précision au micron est tout de même un peu exagérée pour du web3D, une précision au milimètre, au centimètre ou au décimètre suivant les cas de figure c'est quand même suffisant :o)
 
Lorsque vous avez une scène composée de nombreux fichiers et qu'il devient fastidieux de tous les convertir individuellement vous pouvez utiliser les commandes ci-dessous si vous avez la possibilité d'utiliser des commandes Unix (Linux, Mac Os X) :
 
Pour convertir du vrml en packed-vrml placez vous dans le bon répertoire et faites :
 $ gzip -9 *.wrl
puis
 $ rename .wrl.gz .wrz *.wrl.gz

Pour convertir du packed-vrml en vrml placez-vous dans le bon répertoire et faites :
 $ rename .wrz .wrl.gz *.wrz
puis
 $ gzip -d  *.gz
Bon courage pour vos créations ;-)
Retour Accueil

Et voici la fin de ce petit cours de VRML, il n'y a que les bases pour l'instant, mais cela devrait vous permettre de faire vos premiers pas en VRML... Surtout qu'il n'est pas dur de progresser car il suffit de chercher des scènes existantes sur le réseau et d'afficher le code source (ou après décompression s'il est compressé)...
Si vous avez enregistré ce didacticiel, vous pourrez consulter ses mises à jour sur :
Web3D-fr.com ou sur Web3D.TuxFamily.org
© 2001-2002 Blue Prawn
Document sous licence GnuFDL

 

 
20 internaute(s) sur Web3d-fr
Copyright Web3d-fr 2001-2004

   Création de
   mondes VRML/X3D
Apprenez le VRML
Ateliers VRML
Les autres cours VRML
Astuces de modélisation
Appliquer des textures
Dossier sur le X3D

   Autres technos
   Web3d
Tutoriel Java3D
Wirefusion
Autres technologies 3D

   Outils et logiciels
Les viewers VRML
Modeleurs et utilitaires
Conversion de format
Utiliser Blender

   3D multi-utilisateurs
Créer un chat 3D en VRML
Active Worlds
Technos multi-utilisateurs

   Articles et informations
Interviews / articles
Symposium Web3d 2003

   Ressources gratuites
Textures
Objets et Modèles
Avatars
Sons
Annuaire des mondes 3D

   Autres sites et
   portails 3D
Portails 3D francophones
Sites anglais sur le VRML
Portails 3D anglophones
Autres sites

   Trouver un emploi
Déposez votre CV
Rechercher une offre