Et voici un petit cours en 21 étapes pour ceux qui souhaitent se mettre au
   WEB 3D   
en utilisant le VRML-2

 
       Retour Accueil
Une mise à jour de ce didacticiel est disponible à cette adresse :

  Sommaire
 
Étape 1: le viewer
Étape 2: type de fichier
Étape 3: la couleur du fond
Étape 4: les points de vu
Étape 5: le parallélépipède rectangle
Étape 6: la sphère
Étape 7: le cylindre
Étape 8: le cône
Étape 9: récapitulons...
Étape 10: les formes complexes
Étape 11: le texte
Étape 12: l'homothétie et la symétrie
Étape 13: les couleurs
Étape 14: les textures
Étape 15: le sol
Étape 16: définir le mode de déplacement dans la scène
Étape 17: en savoir plus sur les textures
Étape 18: la fausse 3D
Étape 19: la navigation dans le site en web 3D
Étape 20: et la modélisation dans tout ça?
Étape 21: la compression

 

    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 bienvenue).
 

 

  Étape 1: le viewer
    Pour visualiser les espaces virtuels VRML vous devez posséder un plug-in VRML, il en existe beaucoup mais trois sont dominants:
 
Cosmo Player, qui est parait-il le plus utilisé :P , est téléchargeable en quelques minutes à: www.cosmosoftware.com
    ses avantages sont une navigation fluide et une interface simple que l'on maitrise rapidement (malheureusement n'est pas très stable, enfin du moins sur mon système).
 
Ou CORTONA téléchargeable à: www.parallelgraphics.com
    ses avantages sont une exeptionnelle qualité du rendu des textures de l'images par rapport aux autres plug-in grâce à la possibilité d'utiliser un filtrage bilinéaire (interpolation qui permet de ne pas voir les pixels d'une texture quand on se raproche de celle-ci), une navigation extrèment flexible et efficace et un poid plume par rapport aux autres plug-in ainsi qu'une installation automatique avec détection du navigateur utilisé.
 
ou encore Blaxxun Contact à www.blaxxun.com
    son avantage est de permettre l'accès à des communautés virtuelles et ses inconvénient sont une navigation impossible à maitriser en mode "FLY", et un rendu de l'image médiocre. (un plus cependant est son utilisation d'une mémoire cache qui outre les avantages bien connus de cette technique permet de retrouver une scènes que vous avez visitée sur la grande toile et que vous n'avez pas enregistrée sur le moment et dont vous n'arrivez pas à retrouver l'url)
 
    Vous pouvez naturellement en installer un dans IE et un autre dans Netscape.
 

  Étape 2: 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.
 

  Étape 3: la couleur du fond
    Vous devez ensuite définir la couleur d'arrière plan de votre scène en écrivant le nœud 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.)
 

  Étape 4: 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 nœud 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 (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.)
 

  Étape 5: 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 nœud 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.)
 
    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 nœud 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é.
 

  Étape 6: la sphère
    Le nœud 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). Le champ "radius" est comme vous devez vous en douter le rayon de la sphère.
 
 

  Étape 7: le cylindre
    Le nœud 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.
 

  Étape 8: le cône
    Le nœud 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.
 

  Étape 9: 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 

Background { skyColor .1 .4 .7 } 

Viewpoint { 
	position 0 .8 2 
	orientation 1 0 0 -.22 
	description "vue 1" 
} 
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" 
} 

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 
				} 
			} 
		} 
	] 
} 

Transform { 
	translation 0 .9 0 
	children [ 
		Shape { 
			geometry Sphere { 
				radius .21 
			} 
			appearance Appearance { 
				material Material { 
					diffuseColor .8 1 .8 
				} 
			} 
		} 
	] 
} 

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 
				} 
			} 
		} 
	] 
} 

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:
 

 
    Donc voici ce que vous pourriez obtenir en utilisant les divers primitives vues jusqu'à présent:
 

 
 

  Étape 10: les formes complexes
    Pour réaliser des formes complexes on utilise le nœud "IndexedFaceSet". Le principe de ce nœud 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 nœud dansl'étape 20.
 

  Étape 11: le texte
    Pour inclure du texte dans vos scènes vous pouvez utiliser le nœud "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 d'accents." 
				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".
 

  Étape 12: 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 aller voir le didacticiel correspondant sur wen3d-fr.com.
 
 

  Étape 13: 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
		}
	}
}

  Étape 14: les textures
    Pour réaliser une texture on remplace le nœud "material" par le nœud "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 "maps", l'adresse relative spécifiée dans le champ "url" sera alors "maps/image.jpg". Le document VRML et le dossier "maps" doivent être placés dans le même dossier.
 
 
    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"}
	}
}

  Étape 15: le sol
    Pour réaliser le sol de vos scènes vous pouvez utiliser le nœud "ElevationGrid"; son code est:
 
  
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.
 
 

  Étape 16: définir le mode de déplacement 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 nœud "Viewpoint").
 
  
NavigationInfo { 
	type ["WALK", "ANY"]
	headlight FALSE
}

  Étape 17: 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 18: 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 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 capable de les afficher [devinez lequel l'est ;P ])
 

  Étape 18: la fausse 3D
    Un principe bien connu en modélisation est l'intégation d'éléments 2D dans des environnement 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" }
	}
}
	]
}

  Étape 19: la navigation dans le site en web 3D
    Pour créer des liens au sein d'une scène web utilisez le nœud "Anchor".  url "page2.wrl" sera comme vous l'aurez deviné un lien vers une autre page web 3D et  url "page2.htm" 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 nœud "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" .
 

  Étape 20: 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. Ainsi vous pouvez utiliser Blender pour modéliser vos propres scènes (Vous trouverez un didacticiel sur ce sujet à cette adresse : web3d.tuxfamily.org/tutblend.php) Vous pouvez égalment réutiliser des objets trouvées sur internet (au format VRML 1 ou 2) pour l'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? He 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. Deplus pour ne pas avoir un fichier trop lourd à charger pour vos visiteurs il vaut mieux évidemment utiliser les primitives du VRML-2, que 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 (mdr)...
 
    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, ils 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).
 
 

  Étape 21: la compression
    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, 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 (Ark par exemple); 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.
 
    Pensez également à utiliser le compresseur de mon nouveau 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:
 
    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...
 

  Si vous avez enregistré ce didacticiel et que vous avez oublié l'adresse de mon site c'est www.multimania.com/weben3d et bientôt ce sera web3d.tuxfamily.org
 

  © 2001 Blue Prawn
 
Si vous voulez reprendre ce didacticiel (avec ou sans améliorations et compléments) sur votre site, vous trouverez les conditions que je demande en commentaire à la suite de ce paragraphe dans la source.
 
Pour intégrer ce didacticiel à la charte graphique de votre site utilisez la feuille de style intégrée dans l'entête; et pensez à m'envoyer un mel pour me donner l'url de votre site.