Atelier : Créer des mondes complexes avec un script

Nous allons apprendre ici à utiliser la fonction javascript CreateVrmlFromString, qui va nous permettre de créer une grande quantité d'objets divers et variés avec seulement quelques lignes de codes. Cette technique, pas très compliquée mais très puissante, se trouve bien illustrée dans le monde VRML City, présentant une ville entière dans un fichier de 3 Ko seulement.

Nota : la technique employée fonctionne avec les plugins Contact, Cortona et CosmoPlayer, ce qui malheureusement est souvent difficile à atteindre lorsque l'on utilise du script en VRML.

Étape 1 : Créer une boite en VRML

Vous savez créer une boite en VRML ? Et bien allons y... Un nœud Shape pour la boite, dans un nœud Transform pour la positionner, et le tour est joué.

voir source
voir résultat

Étape 2 : Créer une boite en Javascript

Nous allons essayer de faire la même boite, mais en utilisant un script. Ce script utilise la fonction CreateVrmlFromString, qui permet comme son nom l'indique de créer du VRML à partir de texte.

Nous plaçons d'abord dans notre monde un nœud Transform que nous appelons ROOT, par exemple. C'est lui qui contiendra tout ce que nous allons créer par script.

Pour notre script, nous n'allons pas créer de nouvelle fonction, mais utiliser la fonction initialize(), qui est une fonction automatique de vrmlscript, et qui se lance à chaque chargement de la scène.

La première partie du script consiste à définir la chaîne de texte. On la crée en concaténant (=additionnant) plusieurs chaînes sur plusieurs lignes, pour garder la lisibilité du code VRML d'origine. Mais on pourrait très bien stocker cette chaîne sur une seule longue ligne. La chaîne finale reprend exactement le code VRML utilisé lors de l'étape 1 pour créer la boîte.

Enfin, la fonction CreateVrmlFromString permet de créer un nœud VRML, que l'on va ensuite définir comme enfant du nœud principal ROOT.

voir source
voir résultat

Étape 3 : Introduire du hasard

Pour rompre la monotonie, nous allons maintenant introduire une dose de hasard dans notre code. Nous créons une fonction R(), utilisant la fonction javascript Math.random(). Elle renvoie une valeur quelconque entre 0 et 1. Puis nous utilisons cette fonction R() pour "aléatoiriser" (hum!) la taille, la position et la couleur de notre boite dans la chaîne de texte. Ce code va créer une boîte dont la longueur et la largeur vont varier entre 0 et 20 m ( 20 x R() ), la hauteur entre 0 et 40 m  ( 40 x R() ), et la positon sera au hasard sur un champ de 100 m x 100 m ( 100 x R() ).

Ce script crée toujours une boite à chaque chargement de la scène, mais celle-ci est différente à chaque fois.

voir source
voir résultat

Étape 4 : Multiplier les petites boîtes

A l'aide d'une boucle for... en javascript, nous allons répéter la création de cette boite aléatoire une trentaine de fois.

voir source
voir résultat

Étape 5 : Et voilà !

Quelques finitions : une grande dalle transparente, un ciel, des lumières... et en avant pour la Venise Intergalactique !

voir source
voir résultat

Exercice : des astéroïdes

Vous allez appliquer le même principe pour consteller d'astéroïdes le ciel de notre Venise Intergalactique. Vous allez donc procéder exactement de la même manière, mais avec :
- des sphères
- au nombre de 100
- de diamètre variant entre 0 et 0.5 m
- dans un champ de 100 m x 100 m
- à une altitude comprise entre 0 et 30 m

Attention : il y a un petit piège ! Vous allez refaire une 2ème boucle for... Il faudra aller de i=30 à i<130, car si on va de i=0 à i<100, les 30 premiers astéroïdes remplacent les 30 immeubles de la boucle précédente.

voir source
voir résultat

A vous de jouer !

Vous pouvez utiliser ce principe pour créer toutes sortes d'objets avec du code : des boites, des cylindres, des sphères, des Inlines, qui seront dans votre monde des bâtiments, des arbres, des étoiles... Je vous laisse imaginer les nombreuses possibilités de cette technique.

Vous pouvez pousser plus loin, en fabriquant de la sorte des objets mobiles, pouvant figurer des véhicules, des oiseaux, de la neige. Il faut pour cela utiliser en plus la fonction addRoute.

Attention :  telle qu'elle est utilisée ici, cette technique produit des mondes différents à chaque chargement de la scène. Pour des mondes partagés, cela pourrait avoir avoir pour effet que chaque personne le visitant, même simultanément, verrait un monde différent. A vous de voir si cela convient ou non suivant les cas : cela peut vous gêner que plusieurs visiteurs ne voient pas les mêmes bâtiments au même endroit, alors que cela ne gênera pas pour des flocons de neige ou des oiseaux dans le ciel...

Quelques liens

Si cette technique vous intéresse, voici quelques liens essentiels :
(malheureusement tout en anglais !)
- Dynamically Creating VRML par Sandy Ressler
- Random Keys and Keyvalues par Matthew Lewis
- 3D VRML Lab par Evgeny Demidov