1 VRML 97 Julien Lenoir (Thanks to Stéphane LOUIS DIT PICARD)

2 Historique & Présentation

3 Pourquoi de la 3D ? Enrichissement du Web Plusieurs avantages à la 3D –Conception d’objet 3D (architecture, mécanique,….) –TéléVente (présentation, support, ….) –Reconstitution historique (monuments, faits, …. ) –Apprentissage (médecine, chimie, ……)

4 La naissance de VRML : Naissance d’HTML [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 d’une « 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 d’extension –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 d’objets –Amélioration du réalisme

8 L’avenir : 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 (

10 Structure & Format Général

11 Un exemple simple #VRML V2.0 utf8 Shape { appearance Appearance { material Material { diffuseColor } } geometry Sphere { radius 5.0 } }

12 L’exemple : l’entê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 L’exemple : la description géométrique Shape {...}  le nœud pour définir un objet visible appareance {...}  paramètre l’attribut visuel de l’objet geometry {...}  paramètre la géométrie de l’objet

14 Notion de champs, de nœud et d’arbre 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 l’exemple 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  [E 1, E 2, …, E n ] Modes d’accès : –EventIn  écriture –EventOut  lecture –ExposedField  lecture/écriture

18 Booléen : –SFBool –MFBool n’existe pas ! Vecteur 2D (coordonnées dans un plan) –SFVec2f  X Y –MFVec2f  [X 1 Y 1, …, X n Y n ] Vecteur 3D (position, scale) : –SFVec3f  X Y Z –MFVec3f  [X 1 Y 1 Z 1, …, X n Y n Z n ]

19 Rotation : –SFRotation  X Y Z angle (en radians) –MFRotation  [X 1 Y 1 Z 1 angle 1,..., X n Y n Z n angle n ] Couleur : –SFColor  R G B –MFColor  [R 1 G 1 B 1, …, R n G n B n ] Chaine de caractères : –SFString  “chaine” –MFString  [“chaine 1 ”, …, “chaine n ”]

20 Nœud : contient n’importe quel nœud VRML –SFNode  nœud –MFNode  [nœud 1, …, nœud n ]

21 Quelques nœuds géométriques simples

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 : Couleur & Texture

27 Le nœud « Material » diffuseColor  Couleur de l’objet 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œuds géométriques plus complexes

30 La « facettisation » Modélisation courante Nombreux modeleurs Formes complexes

31 Format général : la notion d’index 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, ] } 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 L’extrusion Extrusion

36 Un exemple (1/2) geometry Extrusion { crossSection [ 1 0, , , , 0 -1, , , , -1 0, , , , 0 1,.27.67,.71.71,.67.27, 1 0 ] spine [ 0 0 0, ] beginCap TRUE endCap TRUE solid TRUE }

37 Un exemple (2/2) Résultat visuel :

38 Le placement des objets

39 Les axes Objet centré en (0,0,0) Comment placer les objets ? Y X Z

40 Le point de vue Viewpoint { position 0010 orientation0010 fieldOfView0.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 Group Shape cube

42 Le nœud « Transform » Transform { translation rotation children [ Shape { appearance Appereance { material Material {} } geometry Cylinder {} } ] } Transform Shape Cylinder Appareance Material

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 } ATTENTION A LA COMPOSITION DES TRANSFORMATIONS

45 Propagation des transformations Objet 1 Objet 2 Transform Objet 3 Transform

46 Réutilisation & Prototypage

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 } } 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 l’objet }

51 Un exemple de prototype PROTO Colonne [ field SFColor couleur ] { Shape { appearance Appearance { material Material { diffuseColor IS couleur } geometry Cylinder {} } } L’appel du nœud devient : Colonne {couleur 1 0 0}

52 L’exté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 à l’infinie, 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 d’une 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 l’utilisateur sur le monde  Modification de l’état de l’affichage Notion de capteurs (Sensors): –récupérer les actions de l’utilisateur –placer dans l’arbre 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 nœud TouchSensor nœud PointLight eventOut isActive de type SFBOOL field on de type SFBOOL route

64 Le code associé Group { children [ DEF bouton TouchSensor { } sa représentation graphique Inline { url [ ‘‘boutonlampe.wrl’’ ] } ] } Def lampe pointLight { location onFALSE# 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 l’utilisateur (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 cycleIntervaltaille de chaque cycle enabledactiver/désactiver le timer loopindique si le timer boucle une fois lancé (cycle) startTimeheure de départ du timer stopTimeheure de fin du timer évènements (sortants) isActiveenvoi TRUE quand le timer démarre, et FALSE à la fin cycleTimeTime de départ, envoyé au début fraction_changedfraction du cycle entre 0 (debut) et 1 (fin) timetemps courant

69 Les interpolateurs Création d’animation 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 l’interpolateur reçoit Evénements associés: –set_fraction (eventin) –value_changed (eventout)

70 L’interpolateur : un exemple DEF COULEUR ColorInterpolator { key [0, 0.25, 0.5, 0.75, 1 ] keyValue [0 0 0, , , , 1 1 0] }

71 D’autres 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 touchtime startTime fraction changed set_fraction value_changed color déclencheur timer moteur d’animation 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

Scripts Utilisation des évènements de type eventIn et eventOut pour l’entê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) { Active=true; enabled=true; } else { enabled=false; Active=false; } }" ] } Variables du script Corps du script

79 Les variables EventIn  Valeur d’entré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 D’autres nœuds VRML

82 Le rendu sonore Sound : intensité, localisation, direction, zone maxBack minBack minFront maxFront

83 Un exemple de son Sound { source AudioClip { description "Toto" url "fichier.wav" loop TRUE } direction intensity 1 location 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 l’utilisateur

85 Les nœuds d’environnements 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 }

88 Le nœud Fog (brouillard) Génèrer un effet de brouillard Fog { color 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 :

92 A Vous de Jouer