Introduction to VRML By Salman Yussof Diego Iglesias

Introduction to VRML By Salman Yussof Diego Iglesias

What is VRML? VRML stands for Virtual Reality Modelling Language and is pronounced ‘vermil’. n It is a standard for delivering 3 D rendering on the net, just like HTML is a standard for web pages. n VRML is a subset of the Open Inventor standard developed by SGI for their graphics workstation. n

The ‘World’ representation n n VRML includes many of the things that go into making a world. It has a way of describing geometry which creates objects and spaces in which you can move around, as well as light, texture and sound which can be approached and viewed from whatever angle. It is from this ‘worldly’ imitation that VRML files get their name. The files are called ‘worlds’ and have ‘. wrl’ extension.

VRML 1. 0 n n n This is the first generation of VRML. It describes the foundations of a world including geometry, lighting, color, texture and linking. VRML 1. 0 is designed to meet the following requirements: – – – n Platform independence Extensibility Ability to work well over low-bandwidth connections No support for interactive behaviors

VRML 2. 0 n n n This is the current generation of VRML. It has a richer level for interactivity and includes support for animation, spatial sound and scripting in addition to features that are already supported in VRML 1. 0. VRML Architecture Board made it official in March 1996

VRML 97 n n VRML 97 is the ISO standard for VRML It is developed based on VRML 2. 0

Features in VRML 97 More realism in static worlds n Sound objects with controllable attenuation n An efficient system to describe irregular ground terrains n Extrusion objects for advanced but compact modelling n A more powerful background coloring and panorama system n A fog system allowing underwater and cloudy environments to be represented n The ability to use MPEG video as a texture map

Features in VRML 97 Interaction from sensors: n Collision detection gives the user a sense of substance as they move in the world n Touch sensors allow reactions to a users deliberate actions n Proximity sensors allow reactions to a user’s not so deliberate actions n Visibility sensors allow conservation of resources

Features in VRML 97 Motion, behaviors and beyond: n Interpolators provide engines to implement animation of any sort. n Scripting in Java. Script or Java allows everything from simple logic devices to fully blown analytical engines providing a wealth of complexity. n Prototypes extend the existing variety of object types with efficient reuse and simple scene graph structure. n A navigation information object provides the browser software with details of the speed and nature of the users movements in the world.

Writing VRML descriptions n n VRML code is simply a text file, case sensitive Header: – #VRML V 2. 0 utf 8 n n Comments indicated by ‘#’ sign Terminology: – Nodes: a world is made up of nodes which are types of objects – Fields: describe properties of a node

Example #VRML V 2. 0 utf 8 Node Field World. Info { title "Example 1" } DEF FBOX Shape { appearance Appearance { material Material { diffuse. Color 0 0. 5 0 } } geometry Box { } } (uses default values)

Shapes n Box – geometry Box {size 5. 5 3. 75 1. 0} n Cylinder – geometry Cylinder {radius 0. 5 n height 10 Cone – geometry Cone {bottom. Radius 5 height 10 bottom FALSE} n Sphere – geometry Sphere { radius 10, 000} n top FALSE} Text & Font. Style side TRUE

Materials n Material Node properties: – diffuse. Color: The normal color of the object – specular. Color: The color of highlights on shiny objects – emissive. Color: The object 'glows' with a light of it's own of this color. It doesn't cast light on any other objects though – ambient. Intensity: The amount of ambient light that the object reflects – shininess: How reflective the object is – transparency: How transparent the object is. Note, some browsers will not support partly-transparent objects.

Transformations n n n Distances measured in meters (convention) Angles measured in radians Transformation types: – Translation, Rotation, and Scaling n Applied in following order (use nesting for custom) – Scale, then Rotate, the Translate n Example: Transform { translation 1 1 1 rotation 0 1 0 0. 78 scale 2 1 2 children [ USE FBOX ]

Example 1 #VRML V 2. 0 utf 8 Transform { children [ Navigation. Info { headlight FALSE } # We'll add our own light Directional. Light { direction 0 0 -1 } # First child # Light illuminating the scene Transform { # Second child - a red sphere translation 3 0 1 children [ Shape { geometry Sphere { radius 2. 3 } appearance Appearance { material Material { diffuse. Color 1 0 0 } # Red } } ] } (…)

Example 2 #VRML V 2. 0 utf 8 Transform { children [ DEF Joe Shape { geometry Sphere {} } Transform { translation 2 0 0 children DEF Joe Shape { geometry Sphere { radius. 2 } } } Transform { translation -2 0 0 children USE Joe } ] }

Example 3 #VRML V 2. 0 utf 8 PROTO Two. Color. Table [ field SFColor leg. Color. 8. 4. 7 field SFColor top. Color. 6. 6. 1 ] { Transform { children [ Transform { # table top translation 0 0. 6 0 children Shape { appearance Appearance { material Material { diffuse. Color IS top. Color } } geometry Box { size 1. 2 0. 2 1. 2 } } } Transform { # first table leg translation -. 5 0 -. 5 children DEF Leg Shape { appearance Appearance { material Material { diffuse. Color IS leg. Color } } geometry Cylinder { height 1 radius. 1 } } } Transform { # another table leg translation. 5 0 -. 5 children USE Leg } Transform { # another table leg translation -. 5 0. 5 children USE Leg } Transform { # another table leg translation. 5 0. 5 children USE Leg } ] # End of root Transform's children } # End of root Transform } # End of prototype # The prototype is now defined. Although it contains a # number of nodes, only the leg. Color and top. Color fields # are public. Instead of using the default leg. Color and # top. Color, this instance of the table has red legs and # a green top: Two. Color. Table { leg. Color 1 0 0 top. Color 0 1 0 } Navigation. Info { type "EXAMINE" } # Use the Examine viewer

Example 4 #VRML V 2. 0 utf 8 DEF Open. Vault Script { # Declarations of what's in this Script node: event. In SFTime open. Vault event. In SFBool combination. Entered event. Out SFTime vault. Unlocked field SFBool unlocked FALSE # Implementation of the logic: url "javascript: function combination. Entered(value) { unlocked = value; } function open. Vault(value) { if (unlocked) vault. Unlocked = value; }" } Shape { appearance Appearance { material Material { diffuse. Color 1 0 0 } } geometry Sphere { } } Sound { source DEF Click Audio. Clip { url "click. wav" stop. Time 1 } min. Front max. Front min. Back max. Back 1000 } DEF TS Touch. Sensor { } ROUTE TS. is. Over TO Open. Vault. combination. Entered ROUTE TS. touch. Time TO Open. Vault. open. Vault ROUTE Open. Vault. vault. Unlocked TO Click. start. Time

Additional Examples n n n n Interpolation Interaction Tour Distance Sensor Graphics (1) Graphics (2) Graphics (3)

Acknowledgements n Example VRML code from – http: //www. vapourtech. com/vrmlguide/ – http: //www. web 3 d. org/Specifications/VRML 97/part 1/exampl es. html

References n VRML Consortium/Web 3 D – http: //www. vrml. org/ n VRML repository: – http: //vrml. sdsc. edu/ n VRML 1. 0 Specification – http: //www. vrml. org/VRML 1. 0/vrml 10 c. html n VRML 2. 0 Specification – http: //www. vrml. org/VRML 2. 0/FINAL/ n VRML 97 Specification – http: //www. web 3 d. org/Specifications/VRML 97/

Examples n VRML 97 Examples – http: //www. web 3 d. org/Specifications/VRML 97/part 1/exampl es. html n 3 D Web Graphics Using VRML Book Examples – http: //www. iup. edu/~jacross/graphics/mybook. htmlx n Links to good examples: – http: //www. 3 d-design. com/vrmlsite. html

Tutorials n VRML 97 Tutorial – http: //www. vapourtech. com/vrmlguide/ n VRML Works Tutorial – http: //home. hiwaay. net/~crispen/vrmlworks/tutorials/index. html n Cosmo VRML Tutorial – http: //cosmosoftware. com/developer/tutorials. html n VRML Repository Tutorial links – http: //vrml. sdsc. edu/cgi-bin/display. cgi? category=Tutorials+ -+VRML

Questions (and Answers) n n Q: How to define the trajectory of the walk-through example? A: There are two ways in which to implement the tour: – Using javascript to control the viewer’s camera position – Using VRML sensors, in particular the time sensor n The Tour example was implemented using the time sensor approach – An array of tour positions is defined together with a way to interpolate between them – A touch sensor determines when the timer is started – Each tick of the timer is routed to the position interpolator which sets a new orientation and translation

Tour Example n Relevant source code DEF Guide. PI Position. Interpolator { key [ 0, 0. 2, 0. 3, 0. 5, 0. 6, 0. 8, 0. 9, 1 ] key. Value [ 0 0 0, 0 0 -5, 2 6 -15 -4 6 -15, -4 0 -5, 0 0 0 ] } DEF Guide. RI Orientation. Interpolator { key [ 0, 0. 2, 0. 3, 0. 5, 0. 6, 0. 8, 0. 9, 1 ] key. Value [ 0 1 0 0, 0 1. 2, 0 1 0 3. 5, 0 1 0 0, ] } DEF TS Time. Sensor { cycle. Interval 30 } # 30 second tour ROUTE Start. Tour. touch. Time TO TS. start. Time ROUTE TS. fraction_changed TO Guide. PI. set_fraction ROUTE TS. fraction_changed TO Guide. RI. set_fraction ROUTE Guide. PI. value_changed TO Guide. Transform. set_translation ROUTE Guide. RI. value_changed TO Guide. Transform. set_rotation