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

Présentation au sujet: "1 VRML 97 Julien Lenoir (Thanks to Stéphane LOUIS DIT PICARD)"— Transcription de la présentation:

1 1 VRML 97 Julien Lenoir (Thanks to Stéphane LOUIS DIT PICARD) email : lenoir@lifl.fr

2 2 Historique & Présentation

3 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 4 La naissance de VRML 1.0 1991: 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 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 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 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 8 L’avenir : X3D Multi-utilisateurs Encore plus de réalisme Coopération avec les nouveaux standards –D-HTML –MPEG 4 –XML

9 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 10 Structure & Format Général

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

12 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 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 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 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 16 Les types de base

17 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 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 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 20 Nœud : contient n’importe quel nœud VRML –SFNode  nœud –MFNode  [nœud 1, …, nœud n ]

21 21 Quelques nœuds géométriques simples

22 22 Une boite 3D geometry Box { size X Y Z }

23 23 Un cône geometry Cone { bottomRadius R height H side TRUE/FALSE bottom TRUE/FALSE }

24 24 Un cylindre geometry Cylinder { radius R height H side TRUE/FALSE top TRUE/FALSE bottom TRUE/FALSE }

25 25 Une sphère geometry Sphere { radius R }

26 26 L ’apparence : Couleur & Texture

27 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 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 29 Les nœuds géométriques plus complexes

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

31 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 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 33 La couleur des facettes coordIndex […] color Color { color [ 1 0 0, 0 1 0, 0 0 1, 1 0 1, ] } colorPerVertex FALSE

34 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 35 L’extrusion Extrusion

36 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 37 Un exemple (2/2) Résultat visuel :

38 38 Le placement des objets

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

40 40 Le point de vue Viewpoint { position 0010 orientation0010 fieldOfView0.785# pi/4 description "... " jump TRUE } Y X Z

41 41 Le nœud « Group » Pour grouper plusieurs objets Group { children [ Shape { geometry cylinder {} }, Shape { geometry cube {} } ] } cylinder Group Shape cube

42 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 {} } ] } Transform Shape Cylinder Appareance Material

43 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 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 45 Propagation des transformations Objet 1 Objet 2 Transform Objet 3 Transform

46 46 Réutilisation & Prototypage

47 47 DEF & USE DEF nom_du_nœud nœud {...} USE nom_du_nœud

48 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 49 Les PROTO Réutilisation des objets comme pour le DEF Création de nouveaux nœuds Paramétrage possible

50 50 Syntaxe Générale PROTO nom_du_proto [ field type nom_param valeurs … ] { # définition de l’objet }

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

52 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 53 Les sources lumineuses

54 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 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 56 Interaction & Navigation La communication par routes

57 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 58 L ’interaction : généralités

59 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 60 Différents capteurs TouchSensor CylinderSensor PlaneSensor SphereSensor ProximitySensor VisibilitySensor

61 61 L ’interaction : un exemple

62 62 Une Lampe & Un Interrupteur

63 63 Diagramme de Routes nœud TouchSensor nœud PointLight eventOut isActive de type SFBOOL field on de type SFBOOL route

64 64 Le code associé Group { children [ DEF bouton TouchSensor { } sa représentation graphique Inline { url [ ‘‘boutonlampe.wrl’’ ] } ] } Def lampe pointLight { location -1 1 1 onFALSE# lampe éteinte au début } ROUTE bouton.isActive TO lampe.on

65 65 L ’animation : généralités

66 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 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 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 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 70 L’interpolateur : 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 71 D’autres interpolateurs ColorInterpolator CoordinateInterpolator NormalInterpolator OrientationInterpolator ScalarInterpolator

72 72 L ’animation : un exemple

73 73 Une lampe & Un variateur Luminosité progressive : étapes intermédiaires

74 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 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 76 Les Scripts

77 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 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 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 80 Utilisation ROUTE BOUTON_TCHOU.touchTime TO LE_SCRIPT.touchTime ROUTE LE_SCRIPT.enabled TO TIMER.enabled

81 81 D’autres nœuds VRML

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

83 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 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 85 Les nœuds d’environnements Permettre de paramétrer le monde Pas de représentation propre

86 86 Le navigateur NavigationInfo { avatarSize [0.25, 1.6, 0.75] headlight speed type WALK/ANY/EXAMINE/FLY visibilityLimit 0.0 }

87 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 88 Le nœud Fog (brouillard) Génèrer un effet de brouillard Fog { color 1 1 1 fogType LINEAR/EXPONENTIAL visibilityRange 0 }

89 89 Le Texte (1/2) Text { string [] fontStyle NULL length [] maxExtent 0.0 }

90 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 91 Conclusion Des évolutions à suivre : –MPEG-4, X3D, D-HTML, etc Technique : www.vrml.org

92 92 A Vous de Jouer