Modélisation d`objets en 3D — Cours d`initiation Conception

Transcription

Modélisation d`objets en 3D — Cours d`initiation Conception
Modélisation d’objets en 3D
—
Cours d'initiation
Conception :
Comète – Didier Strasser
version 2.3e - septembre 2002
Cours d'informatique 5e — Florimont 02-03
VRML — Modélisation d’objets en 3D
Introduction
Dans ce cours, vous allez apprendre à modéliser (construire, modifier, bouger, etc.) des
objets en 3 dimensions. Pour ce faire, vous allez utiliser un langage de programmation
nommé le VRML (Virtual Reality Modeling Language ou Langage de Modélisation de Réalités
Virtuelles).
Tutoriels On-line et Spécifications
•
TECFA VRML Primer and Tutorial (en anglais):
http://tecfa.unige.ch/guides/vrml/vrmlman/vrmlman.html
•
TECFA’s VRML Pointers (en anglais):
http://tecfa.unige.ch/guides/vrml/pointers.html
•
The VRML Repository (en anglais):
http://www.web3d.org/vrml/vrml.htm
•
The VRML 97 Specifications (en anglais):
http://www.web3d.org/Specifications/VRML97/
Copie locale au Tecfa (en anglais):
http://tecfa.unige.ch/guides/vrml/vrml97/spec/
•
Une autre Introduction au VRML en fançais
http://www.inf.enst.fr/~icc/tp-vrml97.html
Les fichiers de description
La description d'un objet en langage VRML s'écrit dans un fichier qui est caractérisé par
sa terminaison ".wrl ". Pour l'écrire, on utilise un simple bloc-note (WordPad ou NoteTab
pour les PC et SimpleText ou BBEdit pour les Macintosh) et on l’enregistre au format
"Texte seulement".
La visualisation des objets
Pour voir les objets que nous créons en VRML, il nous suffit d'ouvrir les fichiers ".wrl" dans
un navigateur web (Netscape ou Internet Explorer), pour autant qu'on ait rajouté à ce
dernier un module externe (plug-in) capable de lire le VRML (CosmoPlayer, WorldView ou
Cortona).
CosmoPlayer : http://www.cai.com/cosmo/home.htm
Cortona : http://www.parallelgraphics.com/products/cortona/
D. Strasser / VRML / p. 1
Cours d'informatique 5e — Florimont 02-03
Un monde en 3D
Dans notre vie, nous sommes immergés dans un monde en 3 dimensions, mais il est important de rappeler quelles sont ces dimensions.
•
la largeur (………)
•
la hauteur (………)
•
la profondeur (………)
Vous avez certainement appris en cours de mathématiques à représenter des objets
(carrés, triangles, etc.) sur des axes X et Y. Ces derniers permettent de mesurer et de
structurer les objets en 2 dimensions. Par convention, l’axe X, l’abscisse, représente la
largeur, et l’axe Y, l’ordonnée, la hauteur. Pour décrire un objet dans un monde en 3
dimensions, on utilise un troisième axe, l’axe Z qui représente la profondeur.
…
…
…
Les objets
Il y a quatre objets de base en VRML que nous utiliserons et combinerons entre eux.
•
.................................................................
•
.................................................................
•
.................................................................
•
.................................................................
On peut rajouter à ces quatre objets, les éléments "textes" qui sont bien utiles.
Il est temps de voir des exemples de ce qu'est le VRML!
• Lance Netscape Communicator et ouvre le fichier nommé "axes.wrl".
Petite question: Quels sont les objets qui ont été utilisés dans cet exemple?
.............................................................................................................
D. Strasser / VRML / p. 2
Cours d'informatique 5e — Florimont 02-03
• Ouvre le fichier nommé "spoutnik.wrl".
Petite question: Quels sont les objets qui ont été utilisés dans cet exemple?
.............................................................................................................
•
Pour un dernier exemple, ouvre le fichier "scenepaysanne.wrl".
Construction d’objets simples
Notre premier objet: le cube
Nous allons écrire notre premier fichier ".wrl".
• Pour cela, lance NoteTab (ou chez toi, WordPad).
Un nouveau fichier vide s'affiche.
• Enregistre-le (avec WordPad, au format "Texte seulement") dans ton répertoire personnel et nomme-le "cube1.wrl".
• Tout fichier VRML doit commencer par une indication indispensable qui permettra au
logiciel qui le lira de savoir quelle version du langage VRML est utilisée. Il faut donc
écrire la 1re ligne suivante:
#VRML V2.0 utf8
(Le signe # indique que ce qui suit n'est pas du code
mais un commentaire. Cela nous permettra de rajouter des explications à notre travail.)
• Il est ensuite recommandé d'ajouter un commentaire qui décrira le contenu du fichier.
Sur la deuxième ligne, écris:
#Description d'un cube
• Ensuite, tape exactement le code suivant:
Shape {
geometry Box {
size 1 1 1
}
}
1 espace
(Prends l'habitude d'indenter ton code, car cela facilite sa relecture. Un espace vers la droite correspond
à une touche "Tabulation".)
Explications:
Ce que tu viens de taper signifie que tu désires une forme
(Shape) géométrique (geometry) du type boîte (Box) qui a les
mesures (size) suivantes:
D. Strasser / VRML / p. 3
Cours d'informatique 5e — Florimont 02-03
• largeur (x): 1 unité
• hauteur (y): 1 unité
• profondeur (z): 1 unité
• Finalement enregistre le fichier et ouvre-le avec Netscape.
!!! Attention !!! Si un message d'erreur surgit au moment du chargement du fichier, reviens dans NoteTab et vérifie d'avoir bien recopié le code, sans oublier les MAJUSCULES
et les ACCOLADES !
Tu dois avoir le texte suivant sous les yeux :
#VRML V2.0 utf8
#Description d'un cube
Shape {
geometry Box {
size 1 1 1
}
}
Si tout fonctionne, tu dois voir apparaître un cube blanc devant toi.
Modifier la taille du cube
Pour modifier la taille du cube, il faut faire varier les valeurs de l'élément "size".
Par exemple: (cube2.wrl)
Shape {
geometry Box {
size 4 8 3
}
}
soit un cube qui a les dimensions suivantes:
• largeur (x): 4 unités
• hauteur (y): 8 unités
• profondeur (z): 3 unités
Fais tes propres modifications, enregistre le fichier et visualise-le dans Netscape, sans
oublier d'actualiser (le bouton Recharger) l'écran.
D. Strasser / VRML / p. 4
Cours d'informatique 5e — Florimont 02-03
Modifier la couleur du cube
Le cube que tu as pu voir jusqu'ici à l'écran n'est pas très attrayant, nous allons donc apprendre à modifier la couleur.
Pour cela, il faut rajouter le bloc de code suivant:
appearance Appearance {
material Material {
diffuseColor 1 0 1
}
}
1 espace
Ce bloc de code est à rajouter après le bloc "geometry", ce qui donne ceci: (cube3.wrl)
Shape {
geometry Box {
size 4 8 3
}
appearance Appearance {
material Material {
diffuseColor 1 0
}
}
Bloc "geometry"
1
Bloc "appearance"
}
Pour être sûr de ne pas te tromper, compte bien le nombre des accolades.
Pour les couleurs: les trois chiffres qui suivent le mot "diffuseColor" représentent chacun la valeur d'une des trois couleurs fondamentales, dans l'ordre: le ROUGE, le VERT et le
BLEU.
Les valeurs sont comprises entre 0 et 1. La couleur obtenue est toujours le mélange des
trois couleurs, en sachant que:
0 = pas présent dans le mélange / pas lumineux
1 = présent dans le mélange / très lumineux
Ainsi,
diffuseColor
1
0
1
est un mélange de ROUGE et de BLEU, à part égale, sans VERT, c'est à dire du VIOLET.
Liste des valeurs pour les couleurs les plus courantes:
•
noir
=
000
•
blanc
=
111
•
rouge
=
100
D. Strasser / VRML / p. 5
Cours d'informatique 5e — Florimont 02-03
•
vert
=
010
•
bleu
=
001
•
jaune
=
110
•
orange
=
1 0.5 0
Notre deuxième objet: la sphère
Dans le programme NoteTab, crée un nouveau fichier et enregistre-le sous le nom de
"sphere1.wrl".
Tape le code suivant:
#VRML V2.0 utf8
#Description d'une sphere
Shape {
geometry Sphere {
radius 1
}
}
•
Pour modifier la taille de la sphère, il faut changer la valeur de l'attribut "radius".
•
Pour modifier la couleur de la sphère, rajoute un bloc de code "appearance" (le même
que celui qui modifie le cube). Comme exemple, affiche le fichier sphere2.wrl.
Deux objets dans un seul fichier
Jusqu’ici nous avons décrit un seul objet par fichier. Pourtant, il est possible de placer
plusieurs objets dans un même et unique fichier.
Pour cela, il faut placer tout le code contenu dans un bloc "Shape" pour chacun des objets. En recopiant l'exemple suivant (deuxformes.wrl) dans un nouveau fichier, tu pourras
afficher un cube rouge et une sphère violette sur le même écran.
#VRML V2.0 utf8
#Description d'un cube
Shape {
geometry Box {
size 1 8 1
}
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
Bloc "Shape"
}
Suite du code à la page suivante
D. Strasser / VRML / p. 6
Début du code à la page précédente
Cours d'informatique 5e — Florimont 02-03
#Description d'une sphere
Shape {
geometry Sphere {
radius 1
}
appearance Appearance {
material Material {
diffuseColor 1 0 1
}
}
Bloc "Shape"
}
•
Note que la 1ère ligne n'est pas répétée!
Observe bien cet exemple et essaye de trouver comment les objets se situent par rapport
à l'axe X-Y-Z…
Notre troisième objet: le cylindre
Dans le programme NoteTab, crée un nouveau fichier et enregistre-le sous le nom de "c y lindre1.wrl".
Tape le code suivant :
#VRML V2.0 utf8
#Description d'un cylindre
Shape {
geometry Cylinder {
radius 1
height 3.0
}
}
•
Pour modifier la largeur du cylindre, il faut changer la valeur de l'attribut "radius".
•
Pour modifier la longueur du cylindre, il faut changer la valeur de l'attribut "height"
(hauteur).
•
Pour modifier la couleur du cylindre, rajoute un bloc de code "appearance" (le même
que celui qui modifie le cube et la sphère). Comme exemple, affiche le fichier cylindre2.wrl.
D. Strasser / VRML / p. 7
Cours d'informatique 5e — Florimont 02-03
Notre quatrième objet: le cône
Dans le programme NoteTab, crée un nouveau fichier et enregistre-le sous le nom de
"cone1.wrl".
Tape le code suivant :
#VRML V2.0 utf8
#Description d'un cone
Shape {
geometry Cone {
bottomRadius 0.8
height 2.5
}
}
•
Pour modifier la largeur du cône, il faut changer la valeur de l'attribut "bottomRadius".
•
Pour modifier la hauteur du cône, il faut changer la valeur de l'attribut "height".
•
Pour modifier la couleur du cône, rajoute un bloc de code "appearance" (le même que
celui qui modifie le cube, le cylindre et la sphère). Comme exemple, affiche le fichier
cone2.wrl.
Transformations simples sur les objets
Déplacer un objet: la translation
Jusqu'à maintenant, tous les objets que nous avons insérés dans nos fichiers se plaçaient
par défaut au centre de notre scène, au point 0 0 0.
Nous allons donc apprendre à déplacer les objets dans l'espace; ce qu'on appelle une translation. Pour cela, nous appliquons une transformation à l'objet, à l'aide d'un bloc de code
Transform { … }, qui entoure les blocs de code habituels.
Transform {
translation x y z
children [
… description d'un objet …
]
}
Note le terme children [ ... ] qui indique au programme que la transformation doit
s’effectuer sur tous les objets compris entre les deux crochets.
D. Strasser / VRML / p. 8
Cours d'informatique 5e — Florimont 02-03
Regarde l'exemple suivant (translation.wrl) qui déplace un cube rouge à droite d'un cube
bleu:
#VRML V2.0 utf8
#Un cube bleu au côté d'un cube rouge
#Description d'un cube bleu
Shape {
geometry Box {
size 2 2 2
}
appearance Appearance {
material Material {
diffuseColor 0 0 1
}
}
}
#Déplacement d'un cube rouge
Transform {
translation 2 0 0
children [
Shape {
geometry Box {
size 2 2 2
}
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
}
]
}
Dans cet exemple, le cube rouge est déplacé sur l'axe de la largeur X, mais il ne bouge ni en
Y ni en Z. La translation était de 2 en X, 0 en Y et 0 en Z.
•
Modifie le fichier pour effectuer une translation de –2 en X, 0 en Y et –2 en Z.
(dans un ficher nommé "translation2.wrl")
Avant de regarder le fichier dans Netscape et essaye de l'imaginer et de déterminer où
sera placé le cube rouge.
Exercice:
Quelle est la translation à effectuer pour que les axes XYZ se trouvent à l'intersection des deux cubes? (dans un ficher nommé "translation3.wrl")
(Regarde l'exemple qui se trouve à la page suivante)
D. Strasser / VRML / p. 9
Cours d'informatique 5e — Florimont 02-03
Exemple graphique:
+Y
+X
+Z
Afin de vérifier où se trouvent les objets par rapport aux axes XYZ, tu peux insérer le
code suivant qui fera appel au fichier axes.wrl juste après la ligne #VRML V2.0 utf8:
Code si tu utilises ton répertoire personnel:
#Importe les axes XYZ
Inline {
url "../../VRML/axes.wrl"
bboxSize 20 20 20
bboxCenter 0 0 0
}
Code si tu utilises le répertoire de la classe:
#Importe les axes XYZ
Inline {
url "../VRML/axes.wrl"
bboxSize 20 20 20
bboxCenter 0 0 0
}
Sans te révéler les valeurs des deux translations, voici à quoi doit ressembler le
code dans ton nouveau fichier:
#VRML V2.0 utf8
#Un cube bleu au côté d'un cube rouge
#Importe les axes XYZ
Inline {
url "../../VRML/axes.wrl"
bboxSize 20 20 20
bboxCenter 0 0 0
}
D. Strasser / VRML / p. 10
Cours d'informatique 5e — Florimont 02-03
#Description et déplacement d'un cube bleu
Transform {
translation ? ? ?
children [
Shape {
geometry Box {
size 2 2 2
}
appearance Appearance {
material Material {
diffuseColor 0 0 1
}
}
}
]
}
#Description et déplacement d'un cube rouge
Transform {
translation ? ? ?
children [
Shape {
geometry Box {
size 2 2 2
}
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
}
]
}
Faire pivoter un objet: la rotation
Jusqu'à maintenant, tous les cônes et les cylindres que nous sommes capables de décrire
sont pointés vers le haut. Nous nous rendons compte de la nécessité de savoir faire pivoter un objet sur lui-même, ce qu'on nomme en VRML la rotation.
La rotation est une transformation que l'on effectue de la même manière que la translation, à l'aide d'un bloc de code Transform { … }, qui entoure les blocs de code habituel.
Regarde l'exemple suivant (rotation1.wrl) qui déplace un cube rouge à gauche et retourne un cube jaune:
D. Strasser / VRML / p. 11
Cours d'informatique 5e — Florimont 02-03
#VRML V2.0 utf8
#Description de 2 cones inverses
#Description et deplacement du cone rouge
Transform {
translation -2 0 0
children [
Shape {
geometry Cone {
}
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
}
]
}
#Description et rotation du cone jaune
Transform {
rotation 1 0 0 3.1416
children [
Shape {
geometry Cone {
}
appearance Appearance {
material Material {
diffuseColor 1 1 0
}
}
}
]
}
Le terme rotation est suivi de 4 chiffres qui correspondent à:
X Y Z Radius
Les valeurs de XYZ se situent entre 0 et 1 (0 = pas de rotation sur l'axe; 1 = rotation
complète sur l'axe).
La valeur du radius indique la valeur de la rotation qui sera effectuée sur tout axe ayant
une valeur supérieure à 0. Le radius est exprimé en radian selon la correspondance suivante avec les degrés:
30°
0.5236
60°
1.0472
90°
1.5708
180°
3.1416
270°
4.7124
D. Strasser / VRML / p. 12
Cours d'informatique 5e — Florimont 02-03
Dans l'exemple précédent, la ligne:
rotation
1
0
0
3.1416
signifie que le cône subit une rotation sur l'axe des X avec un valeur de 3.1416, ce qui
équivaut à une rotation en avant de 180°. Par contre, le cône ne basculera ni sur l’axe
des Y, ni sur celui des Z, car leur valeur est égale à 0.
Exercice : Décrire deux cônes selon l'illustration suivante…
(dans un ficher nommé "rotation2.wrl")
(Le cône rouge est orienté vers la droite et le jaune vers la gauche)
Déformer un objet: la mise à l'échelle - "scale"
La dernière transformation que nous allons apprendre est la mise à l'échelle. Elle nous
permettra d'aplatir les objets ou de les agrandir, proportionnellement ou non.
En bougeant les objets des exemples suivants, tu pourras voir les effets de cette transformation que l'on nomme, en langage VRML, scale.
Le scale est une transformation que l'on effectue de la même manière que la translation
et la rotation à l'aide d'un bloc de code Transform { … }, qui entoure les blocs de code habituel.
Exemples:
cylindreplat.wrl
coneplat.wrl
sphereplate.wrl scale-
formes.wrl
(tous les exemples subissent une rotation afin de rendre plus visible la mise à
l'échelle)
Regardons en détail le code de l'exemple cylindreplat.wrl:
D. Strasser / VRML / p. 13
Cours d'informatique 5e — Florimont 02-03
#VRML V2.0 utf8
#Description d'un cylindre aplati
Transform {
scale 2 2 1
children [
Shape {
geometry Cylinder {
}
appearance Appearance {
material Material {
diffuseColor 1 1 0
}
}
}
]
}
On peut noter dans cet exemple, que le terme scale est suivi de 3 chiffres qui correspondent à:
XYZ
La valeur de XYZ correspond au multiple que l'on veut appliquer à la dimension de l'objet.
Dans l'exemple ci-dessus, on étire deux fois l'objet en X, deux fois en Y, et une fois en Z
(ce qui correspond à une multiplication par 1, ce qui ne modifie pas l'objet par rapport à
cet axe).
Plusieurs transformations sur un objet
Nous avons vu jusqu'à maintenant les trois transformations séparément, mais il est possible de les effectuer dans le même bloc de code Transform { … }.
Les trois exemples précédents ont tous subi une rotation en même temps que la mise à
l'échelle.
Reprenons le code entier de l'exemple cylindreplat.wrl:
#VRML V2.0 utf8
#Description d'un cylindre aplati
Transform {
rotation 1 0 0 1.0472
scale 2 2 1
children [
Shape {
geometry Cylinder {
}
appearance Appearance {
material Material {
diffuseColor 1 1 0
}
D. Strasser / VRML / p. 14
Cours d'informatique 5e — Florimont 02-03
}
}
]
}
Définition et réutilisation des objets
Les programmeurs étant généralement des personnes paresseuses, ils trouvent toujours
un moyen pour se simplifier la vie. Ainsi, il leur semble absurde de décrire deux fois le même
objet.
Pour cette raison, il existe la possibilité de définir un objet en lui donnant une étiquette. Plus tard, on pourra rappeler cet objet à l'aide de son étiquette. C'est le principe
utilisé dans le fichier scaleformes.wrl, que nous allons examiner en détail.
#VRML V2.0 utf8
#Description d'un cone
DEF Cone1 Shape {
geometry Cone {
}
appearance Appearance {
material Material {
diffuseColor 1 1 0
}
}
}
Transform {
translation 2 0 0
scale 0.5 2 1
children USE Cone1
}
Dans cet exemple, un premier cône jaune est décrit à l'aide d'un bloc de code Shape {…}
et on lui rajoute une étiquette
DEF
Cone1
•
DEF est le code en VRML pour signaler que le mot qui suit est une étiquette.
•
Cone1 est le nom que je décide de donner à mon premier cône. Nous pourrions l'appeler autrement…
Par la suite, dans un bloc de code Transform {…}, nous allons rappeler ce cône à l'aide de
son étiquette. Ce que nous faisons sous la forme suivante:
children
USE
Cone1
D. Strasser / VRML / p. 15
Cours d'informatique 5e — Florimont 02-03
Dans ce bloc de code Transform {…}, nous pouvons commander n'importes quelles transformations, une rotation, une translation et/ou une mise à l'échelle.
Exercice :
Décrire deux cônes selon l'illustration suivante…
(dans un ficher nommé "2cones.wrl")
Les dimensions des cônes sont:
•
hauteur: 2 unités
•
bottomRadius: 1 unité
D. Strasser / VRML / p. 16