VRML 97

1
VRML 97

• Julien Lenoir(Thanks to Stéphane LOUIS DIT
  PICARD)
• email lenoir_at_lifl.fr

2
Historique Présentation
3
Pourquoi de la 3D ?

• Enrichissement du Web
• Plusieurs avantages à la 3D
• Conception dobjet 3D (architecture,
  mécanique,.)
• TéléVente (présentation, support, .)
• Reconstitution historique (monuments, faits, . )
• Apprentissage (médecine, chimie, )

4
La naissance de VRML 1.0

• 1991 Naissance dHTML Beners-Lee
• 1992 Création du format Open Inventor SGI
• Mai 1994 Présentation des travaux de Marc Pesce
  Tony Parisi sur les interfaces de Réalité
  Virtuelle
• Création dune  mailing list  pour définir un
  langage universel de modélisation 3D

5
VRML 1.0

• Octobre 1994 Naissance de VRML 1.0 (basé sur le
  format Open Inventor de SGI)
• Indépendance de la plate-forme
• Passage sur des lignes bas-débits (modems)
• Format ASCII

6
Lévolution de la norme VRML

• Début 1996 Proposition dextension
• Prise en compte de la dynamique des  mondes
  virtuels 
• Août 96 Naissance de VRML 2.0
• Décembre 97 Normalisation ISO
• VRML 2.0 (aussi appelé VRML97)

7
VRML 97

• Principales améliorations par rapport à la
  version 1.0
• Interaction
• Animation des scènes
• Prototypage dobjets
• Amélioration du réalisme

8
Lavenir X3D

• Multi-utilisateurs
• Encore plus de réalisme
• Coopération avec les nouveaux standards
• D-HTML
• MPEG 4
• XML

9
Le succès de VRML

• Standard normalisé et libre de droit
• Accessibilité
• format ascii ? édition/compréhension simple
• nombreux browsers sur de nombreux OS (navigateur
  WEB Plug-in VRML)
• une documentation (http//www.vrml.org)

10
Structure Format Général
11
Un exemple simple

• VRML V2.0 utf8Shape appearance Appearance
  material Material diffuseColor 1 0
  0 geometry Sphere radius 5.0

12
Lexemple lentête du fichier

• VRML 2.0 utf8
• ? Symbole de commentaires
• VRML 2.0 ? fichier contenant une description VRML
  au format 2.0
• utf8 ? format utilisé pour coder le texte

13
Lexemple la description géométrique

• Shape ... ? le nœud pour définir un objet
  visible
• appareance ... ? paramètre lattribut visuel de
  lobjet
• geometry ... ? paramètre la géométrie de lobjet

14
Notion de champs, de nœud et darbre

• Un nœud est composé de champs
• chaque champs est typé
• chaque champs permet de configurer le nœud
• Une hiérarchie de nœuds forme un arbre
• des nœuds spéciaux (appelés  nœud de groupe )
  permettent de créer la hiérarchie

15
Dans lexemple

• Le nœud Shape est composé
• un champs appearance de type Appearance
• un champs geometry de type SFNode (i.e.
  n importe quel nœud)
• Le nœud Appearance est composé
• un champs material de type Material
• Le nœud Material est composé
• un champs diffuseColor de type SFColor

16
Les types de base
17

• Type simple
• SFxxx ? E
• Type tableau
• MFxxx ? E1, E2, , En
• Modes daccès
• EventIn ? écriture
• EventOut ? lecture
• ExposedField ? lecture/écriture

18

• Booléen
• SFBool
• MFBool nexiste pas !
• Vecteur 2D (coordonnées dans un plan)
• SFVec2f ? X Y
• MFVec2f ? X1 Y1, , Xn Yn
• Vecteur 3D (position, scale)
• SFVec3f ? X Y Z
• MFVec3f ? X1 Y1 Z1, , Xn Yn Zn

19

• Rotation
• SFRotation ? X Y Z angle (en radians)
• MFRotation ? X1 Y1 Z1 angle1, ..., Xn Yn Zn
  anglen
• Couleur
• SFColor ? R G B
• MFColor ? R1 G1 B1, , Rn Gn Bn
• Chaine de caractères
• SFString ? chaine
• MFString ? chaine1, , chainen

20

• Nœud contient nimporte quel nœud VRML
• SFNode ? nœud
• MFNode ? nœud1, , nœudn

21
Quelques nœuds géométriquessimples
22
Une boite 3D

• geometry Box size X Y Z

23
Un cône

• geometry Cone bottomRadius R height
  H side TRUE/FALSE
  bottom TRUE/FALSE

24
Un cylindre

• geometry Cylinder radius R height H
  side TRUE/FALSE top TRUE/FALSE
  bottom TRUE/FALSE

25
Une sphère

• geometry Sphere radius R

26
L apparence CouleurTexture
27
Le nœud  Material 

• diffuseColor ? Couleur de lobjet
• ambientIntensity ? Proportion de réflexion (0-1)
• specularColor ? Couleur du spéculaire
• emissiveColor ? Lumière propre
• shininess ? Brillance (0-1)
• transparency ? Degré de transparence (0-1)

28
Les textures

• 3 formats de texture reconnus
• statiques images au format jpeg png
• animées vidéo au format mpeg
• texture ImageTexture url   
  "texture.jpg" repeatS TRUE/FALSE
  repeatT TRUE/FALSE

29
Les nœudsgéométriquesplus complexes
30
La  facettisation 

• Modélisation courante
• Nombreux modeleurs
• Formes complexes

31
Format général la notion dindex

• Shape geometry IndexedFaceSet coord
  Coordinate point x1 y1 z1, x2 y2 z2,
  coordIndex 0,1,2,-1,
  4,5,1,-1, ...

Un point 3D
Une facette
32
Exemple Une pyramide

• geometry IndexedFaceSet coord
  Coordinate point 1 0 0,
  0 1 0, 1 1 0,
  0.5 0.5 1
  coordIndex 0,1,2,-1 facette 1
  0,1,3,-1 facette 2
  0,2,3,-1 facette 3
  1,2,3,-1 facette 4

33
La couleur des facettes

• coordIndex color Color color 1 0
  0, 0 1 0, 0 0
  1, 1 0 1,
  colorPerVertex FALSE

34
Des textures des facettes

• Placage par défaut sur une boîte englobante
• Problème de déformation de la texture
• Placage précis
• utilisation du nœud TextureCoordinate

35
Lextrusion

• Extrusion

36
Un exemple (1/2)

• geometry Extrusion crossSection 1
  0, .67 -.27, .71 -.71, .27 -.67, 0 -1,
  -.27 -.67, -.71 -.71, -.67 -.27, -1 0,
  -.67 .27, -.71 .71, -.27 .67, 0 1,
  .27 .67, .71 .71, .67 .27, 1 0
  spine 0 0 0, 0 0 -6 beginCap TRUE
  endCap TRUE solid TRUE

37
Un exemple (2/2)

• Résultat visuel

38
Le placement des objets
39
Les axes
Y

• Objet centré en (0,0,0)
• Comment placer les objets ?

X
Z
40
Le point de vue

• Viewpoint
• position 0 0 10
• orientation 0 0 1 0
• fieldOfView 0.785 pi/4
• description "..."
• jump TRUE

Y
X
Z
41
Le nœud  Group 

• Pour grouper plusieurs objets
• Group
• children
• Shape geometry cylinder
• ,
• Shape geometry cube

cylinder
42
Le nœud  Transform 

• Transform
• translation 0.3 0.2 0.1
• rotation 0.0 0.0 1.0 3.1415
• children
• Shape
• appearance Appereance material
  Material
• geometry Cylinder

43
Les différentes transformations possibles

• Une translation de type SFVec3f
• Une rotation de type SFRotation
• Une mise à léchelle (scale) de type SFVecf3f

44
Ordre des transformations

• Transform translation tx ty tz rotation
  rx ry rz angle scale sx sy sz

3
2
1
ATTENTION A LA COMPOSITION DES TRANSFORMATIONS
45
Propagation des transformations
Objet 1
Transform
Objet 2
Transform
Objet 3
Transform
46
RéutilisationPrototypage
47
DEF USE

• DEF nom_du_nœud nœud ...
• USE nom_du_nœud

48
Exemple de DEF USE

• DEF cuberouge Shape appearance Appearance
  material Material diffuseColor 1.0 0 0
  geometry Box

... Transform rotation ... children
USE cuberouge ...
49
Les PROTO

• Réutilisation des objets comme pour le DEF
• Création de nouveaux nœuds
• Paramétrage possible

50
Syntaxe Générale

• PROTO nom_du_proto field type nom_param
  valeurs définition de lobjet

51
Un exemple de prototype

• PROTO Colonne field SFColor couleur .5 .5
  .5 Shape appearance Appearance
  material Material diffuseColor IS
  couleur geometry Cylinder
• Lappel du nœud devient Colonne couleur 1 0 0

52
Lextérieur

• Nœud  Inline 
• Inline url "objet.wrl"
• Nœud  ExternProto  EXTERNPROTO LeProto
  "lefichier.wrl"
• Nœud  Anchor  Anchor url "lefichier.html"
  children

53
Les sources lumineuses
54
Les sources lumineuses

• Pas de représentation visuelle
• 3 types de sources physiques
• Directionnal Light source considérée à
  linfinie, rayon parallèle
• Point Light point lumineux, émission dans
  toutes les directions
• Spot Light point lumineux, émission dans une
  seule direction (coûteux en calcul)

55
Les attributs communs aux différents types de
lumière

• on allumé ou éteint
• color la couleur émise
• intensity la brillance de la source
• ambientIntensity luminosité ambiante

56
Interaction Navigation La communication par
routes
57
La propagation des modifications

• Mécanisme de ROUTE propagation dévènements
• ROUTE TRS1.translation TO TRS2.translation
• (ROUTE TRS1.translation_changed TO
  TRS2.set_translation )
• Attention au type ! (les deux champs dune route
  doivent être de même type)
• Nœuds nommés par des DEFs
• Routes décrites en fin de fichier

58
L interaction généralités
59
Interaction ?

• Action de lutilisateur sur le monde ?
  Modification de létat de laffichage
• Notion de capteurs (Sensors)
• récupérer les actions de lutilisateur
• placer dans larbre VRML avant les nœuds
  considérés comme pouvant être manipulés
• utiliser le mécanisme de routes pour propager les
  événements

60
Différents capteurs

• TouchSensor
• CylinderSensor
• PlaneSensor
• SphereSensor
• ProximitySensor
• VisibilitySensor

61
L interaction un exemple
62
Une Lampe Un Interrupteur
63
Diagramme de Routes
field on de type SFBOOL
nœud TouchSensor
nœud PointLight
route
eventOut isActive de type SFBOOL
64
Le code associé

• Group
• children
• DEF bouton TouchSensor sa représentation
  graphique
• Inline url boutonlampe.wrl
• Def lampe pointLight
• location -1 1 1
• on FALSE lampe éteinte au début
• ROUTE bouton.isActive TO lampe.on

65
L animation généralités
66
Animation ?

• Modification du monde
• Provoquée par lutilisateur (via les sensors)
• Automatique, provoquée par des timer (TimeSensor)
• Interpolateur pour générer les animations

67
Le Timer (1)

• Génère des top horloge à intervalle régulier
• DEF TIMER TimeSensor cycleInterval 1 loop
  FALSE enabled TRUE startTime 0 stopTime 0

68
Le Timer (2)

• Champs
• cycleInterval taille de chaque cycle
• enabled activer/désactiver le timer
• loop indique si le timer boucle une fois lancé
  (cycle)
• startTime heure de départ du timer
• stopTime heure de fin du timer
• évènements (sortants)
• isActive envoi TRUE quand le timer démarre, et
  FALSE à la fin
• cycleTime Time de départ, envoyé au début
• fraction_changed fraction du cycle entre 0
  (debut) et 1 (fin)
• time temps courant

69
Les interpolateurs

• Création danimation sur les objets 3D
• Interpolateur
• des clés
• des valeurs pour chacune des clés
• Permet de générer une valeur en fonction de la
  valeur clé que linterpolateur reçoit
• Evénements associés
• set_fraction (eventin)
• value_changed (eventout)

70
Linterpolateur un exemple
DEF COULEUR ColorInterpolator key 0 , 0.25,
0.5, 0.75, 1 keyValue 0 0 0, 0.25 0.25 0,
0.5 0.5 0, 0.75 0.75 0, 1 1 0
71
Dautres interpolateurs

• ColorInterpolator
• CoordinateInterpolator
• NormalInterpolator
• OrientationInterpolator
• ScalarInterpolator

72
L animation un exemple
73
Une lampe Un variateur

• Luminosité progressive étapes intermédiaires

74
Le diagramme de Routes
Touch Sensor
Time Sensor
Color Interpolator
PointLight
color
startTime
set_fraction
touchtime
fraction changed
value_changed
déclencheur timer moteur
danimation destination
75
Le code associé

• ROUTE TIMER.isActive TO AMPOULE.on
• ROUTE BOUTON.touchTime TO TIMER.startTime
• ROUTE TIMER.fraction_changed TO
  COULEUR.set_fraction
• ROUTE COULEUR.value_changed TO AMPOULE.color

76
Les Scripts
77
Scripts

• Utilisation des évènements de type eventIn et
  eventOut pour lentête de la fonction
• Utilisation du mécanisme de ROUTE pour connecter
  les eventIn et eventOut du script à des champs de
  l arbre VRML
• Script désigné par une URL
• JavaScript
• VRMLscript
• etc...

78
Un Exemple

• DEF LE_SCRIPT Script
• eventIn SFTime touchTime
• field SFBool Active TRUE
• eventOut SFBool enabled
• url
• "javascript
• function touchTime(eventValue)
• if (!Active)
• Activetrue
• enabledtrue
• else
• enabledfalse
• Activefalse
• "

Variables du script
Corps du script
79
Les variables

• EventIn ? Valeur dentrée du script (à chaque
  EventIn une fonction)
• EventOut ? Valeur de sortie du script (utile pour
  les routes)
• Field ? Variable locale au Script

80
Utilisation

• ROUTE BOUTON_TCHOU.touchTime TO
  LE_SCRIPT.touchTime
• ROUTE LE_SCRIPT.enabled TO TIMER.enabled

81
Dautres nœuds VRML
82
Le rendu sonore

• Sound intensité, localisation, direction, zone

maxBack
minFront
minBack
maxFront
83
Un exemple de son

• Sound source AudioClip
  description "Toto" url  "fichier.wav"
  loop TRUE direction 1 0 0 intensity
  1 location 0 0 0 minBack 0 maxBack 550
  minFront 0 maxFront 550 priority 1
  spatialize TRUE

84
Quelques autres nœuds

• LOD détaille en fonction de la profondeur
• Switch commute entre plusieurs nœuds VRML
• Collision objets évités par lutilisateur

85
Les nœuds denvironnements

• Permettre de paramétrer le monde
• Pas de représentation propre

86
Le navigateur

• NavigationInfo avatarSize 0.25, 1.6, 0.75
  headlight speed type WALK/ANY/EXAMINE/FLY  
  visibilityLimit 0.0

87
Le nœud BackGround

• Permet de configurer les paramètres du fond
• BackGround groundAngle groundColor
  backUrl bottomUrl frontUrl
  leftUrl rightUrl topUrl
  skyAngle skyColor 0 0 0

88
Le nœud Fog (brouillard)

• Génèrer un effet de brouillard
• Fog color 1 1 1 fogType LINEAR/EXPONENTIAL
  visibilityRange 0

89
Le Texte (1/2)

• Text string fontStyle NULL length
  maxExtent 0.0

90
Le Texte (2/2) choisir la font

• FontStyle familiy SERIF horizontal
  TRUE/FALSE leftToRight TRUE/FALSE size 1.0
  spacing 1.0 style PLAIN topToBottom
  TRUE/FALSE

91
Conclusion

• Des évolutions à suivre
• MPEG-4, X3D, D-HTML, etc
• Technique www.vrml.org

92
A Vous de Jouer