Introduction to VRMLIntroduction to VRML

ByBy

Salman YussofSalman Yussof

Diego IglesiasDiego Iglesias

What is VRML?What is VRML?

VRML stands for Virtual Reality Modelling VRML stands for Virtual Reality Modelling Language and is pronounced ‘vermil’.Language and is pronounced ‘vermil’.

It is a standard for delivering 3D rendering It is a standard for delivering 3D rendering on the net, just like HTML is a standard for on the net, just like HTML is a standard for web pages.web pages.

VRML is a subset of the Open Inventor VRML is a subset of the Open Inventor standard developed by SGI for their standard developed by SGI for their graphics workstation.graphics workstation.

The ‘World’ representationThe ‘World’ representation

VRML includes many of the things that go into making a VRML includes many of the things that go into making a world. It has a way of describing geometry which creates world. It has a way of describing geometry which creates objects and spaces in which you can move around, as well objects and spaces in which you can move around, as well as light, texture and sound which can be approached and as light, texture and sound which can be approached and viewed from whatever angle.viewed from whatever angle.

It is from this ‘worldly’ imitation that VRML files get their It is from this ‘worldly’ imitation that VRML files get their name. The files are called ‘worlds’ and have ‘.wrl’ name. The files are called ‘worlds’ and have ‘.wrl’ extension.extension.

VRML 1.0VRML 1.0

This is the first generation of VRML.This is the first generation of VRML. It describes the foundations of a world including geometry, It describes the foundations of a world including geometry,

lighting, color, texture and linking.lighting, color, texture and linking. VRML 1.0 is designed to meet the following requirements: VRML 1.0 is designed to meet the following requirements:

– Platform independencePlatform independence– ExtensibilityExtensibility– Ability to work well over low-bandwidth connectionsAbility to work well over low-bandwidth connections

No support for interactive behaviorsNo support for interactive behaviors

VRML 2.0VRML 2.0

This is the current generation of VRML.This is the current generation of VRML. It has a richer level for interactivity and includes support It has a richer level for interactivity and includes support

for animation, spatial sound and scripting in addition to for animation, spatial sound and scripting in addition to features that are already supported in VRML 1.0.features that are already supported in VRML 1.0.

VRML Architecture Board made it official in March 1996VRML Architecture Board made it official in March 1996

VRML97VRML97

VRML 97 is the ISO standard for VRMLVRML 97 is the ISO standard for VRML It is developed based on VRML 2.0It is developed based on VRML 2.0

Features in VRML97Features in VRML97

More realism in static worldsMore realism in static worlds

Sound objects with controllable attenuationSound objects with controllable attenuation An efficient system to describe irregular ground terrainsAn efficient system to describe irregular ground terrains Extrusion objects for advanced but compact modellingExtrusion objects for advanced but compact modelling A more powerful background coloring and panorama systemA more powerful background coloring and panorama system A fog system allowing underwater and cloudy environments to A fog system allowing underwater and cloudy environments to be representedbe represented The ability to use MPEG video as a texture mapThe ability to use MPEG video as a texture map

Features in VRML97Features in VRML97

Interaction from sensors:Interaction from sensors:

Collision detection gives the user a sense of substance as they Collision detection gives the user a sense of substance as they move in the worldmove in the world Touch sensors allow reactions to a users deliberate actionsTouch sensors allow reactions to a users deliberate actions Proximity sensors allow reactions to a user’s not so deliberate Proximity sensors allow reactions to a user’s not so deliberate actionsactions Visibility sensors allow conservation of resourcesVisibility sensors allow conservation of resources

Features in VRML97Features in VRML97

Motion, behaviors and beyond:Motion, behaviors and beyond:

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

Writing VRML descriptionsWriting VRML descriptions

VRML code is simply a text file, case sensitiveVRML code is simply a text file, case sensitive Header:Header:

– #VRML V2.0 utf8#VRML V2.0 utf8 Comments indicated by ‘#’ signComments indicated by ‘#’ sign Terminology:Terminology:

– Nodes: a world is made up of nodes which are types Nodes: a world is made up of nodes which are types of objectsof objects

– Fields: describe properties of a nodeFields: describe properties of a node

ExampleExample

#VRML V2.0 utf8

WorldInfo { title "Example 1"}

DEF FBOX Shape { appearance Appearance { material Material { diffuseColor 0 0.5 0 } } geometry Box { }}

NodeField

(uses default values)

ShapesShapes

BoxBox– geometry Box {size 5.5 3.75 1.0}geometry Box {size 5.5 3.75 1.0}

CylinderCylinder– geometry Cylinder {radius 0.5 height 10 top geometry Cylinder {radius 0.5 height 10 top

FALSE}FALSE} ConeCone

– geometry Cone {bottomRadius 5 height 10 side geometry Cone {bottomRadius 5 height 10 side TRUE bottom FALSE}TRUE bottom FALSE}

SphereSphere– geometry Sphere { radius 10,000,000}geometry Sphere { radius 10,000,000}

Text & FontStyleText & FontStyle

MaterialsMaterials

Material Node properties:Material Node properties:– diffuseColor: diffuseColor: The normal color of the objectThe normal color of the object

– specularColor: specularColor: The color of highlights on shiny objectsThe color of highlights on shiny objects

– emissiveColor: emissiveColor: The object 'glows' with a light of it's own The object 'glows' with a light of it's own of this color. It doesn't cast light on any other objects of this color. It doesn't cast light on any other objects thoughthough

– ambientIntensity: ambientIntensity: The amount of ambient light that the The amount of ambient light that the object reflectsobject reflects

– shininess: shininess: How reflective the object isHow reflective the object is

– transparency: transparency: How transparent the object is. Note, some How transparent the object is. Note, some browsers will not support partly-transparent objects. browsers will not support partly-transparent objects.

TransformationsTransformations Distances measured in meters (convention)Distances measured in meters (convention) Angles measured in radiansAngles measured in radians Transformation types:Transformation types:

– Translation, Rotation, and ScalingTranslation, Rotation, and Scaling Applied in following order (use nesting for Applied in following order (use nesting for

custom)custom)– Scale, then Rotate, the TranslateScale, then Rotate, the Translate

Example:Example:Transform { translation 1 1 1 rotation 0 1 0 0.78 scale 2 1 2 children [ USE FBOX ]

Example 1Example 1#VRML V2.0 utf8#VRML V2.0 utf8Transform {Transform { children [children [ NavigationInfo { headlight FALSE } # We'll add our own lightNavigationInfo { headlight FALSE } # We'll add our own light

DirectionalLight { # First childDirectionalLight { # First child direction 0 0 -1 # Light illuminating the scenedirection 0 0 -1 # Light illuminating the scene }}

Transform { # Second child - a red sphereTransform { # Second child - a red sphere translation 3 0 1translation 3 0 1 children [children [ Shape {Shape { geometry Sphere { radius 2.3 }geometry Sphere { radius 2.3 } appearance Appearance {appearance Appearance { material Material { diffuseColor 1 0 0 } # Redmaterial Material { diffuseColor 1 0 0 } # Red }} }} ]] }}( … )( … )

Example 2Example 2#VRML V2.0 utf8#VRML V2.0 utf8Transform {Transform { children [children [ DEF Joe Shape { geometry Sphere {} }DEF Joe Shape { geometry Sphere {} } Transform {Transform { translation 2 0 0translation 2 0 0 children DEF Joe Shape { geometry Sphere { radius .2 } }children DEF Joe Shape { geometry Sphere { radius .2 } } }} Transform {Transform { translation -2 0 0translation -2 0 0 children USE Joe children USE Joe }} ]]}}

Example 3Example 3#VRML V2.0 utf8PROTO TwoColorTable [ field SFColor legColor .8 .4 .7 field SFColor topColor .6 .6 .1 ]{ Transform { children [ Transform { # table top translation 0 0.6 0 children Shape { appearance Appearance { material Material { diffuseColor IS topColor } } 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 { diffuseColor IS legColor } } 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 legColor and topColor fields # are public. Instead of using the default legColor and # topColor, this instance of the table has red legs and # a green top:

TwoColorTable { legColor 1 0 0 topColor 0 1 0}NavigationInfo { type "EXAMINE" } # Use the Examine viewer

Example 4Example 4#VRML V2.0 utf8

DEF OpenVault Script { # Declarations of what's in this Script node: eventIn SFTime openVault eventIn SFBool combinationEntered eventOut SFTime vaultUnlocked field SFBool unlocked FALSE

# Implementation of the logic: url "javascript: function combinationEntered(value) { unlocked = value; } function openVault(value) { if (unlocked) vaultUnlocked = value; }"}

Shape { appearance Appearance { material Material { diffuseColor 1 0 0 } } geometry Sphere { }}

Sound { source DEF Click AudioClip { url "click.wav" stopTime 1 }

minFront 1000 maxFront 1000 minBack 1000 maxBack 1000}

DEF TS TouchSensor { }

ROUTE TS.isOver TO OpenVault.combinationEnteredROUTE TS.touchTime TO OpenVault.openVaultROUTE OpenVault.vaultUnlocked TO Click.startTime

Additional ExamplesAdditional Examples

InterpolationInterpolation InteractionInteraction TourTour Distance SensorDistance Sensor Graphics (1)Graphics (1) Graphics (2)Graphics (2) Graphics (3)Graphics (3)

AcknowledgementsAcknowledgements

Example VRML code fromExample VRML code from– http://www.vapourtech.com/vrmlguide/http://www.vapourtech.com/vrmlguide/– http://www.web3d.org/Specifications/VRML97/part1/http://www.web3d.org/Specifications/VRML97/part1/

examples.htmlexamples.html

ReferencesReferences

VRML Consortium/Web3DVRML Consortium/Web3D– http://www.vrml.org/http://www.vrml.org/

VRML repository:VRML repository:– http://vrml.sdsc.edu/http://vrml.sdsc.edu/

VRML 1.0 SpecificationVRML 1.0 Specification– http://www.vrml.org/VRML1.0/vrml10c.htmlhttp://www.vrml.org/VRML1.0/vrml10c.html

VRML 2.0 SpecificationVRML 2.0 Specification– http://www.vrml.org/VRML2.0/FINAL/http://www.vrml.org/VRML2.0/FINAL/

VRML97 SpecificationVRML97 Specification– http://www.web3d.org/Specifications/VRML97/http://www.web3d.org/Specifications/VRML97/

ExamplesExamples

VRML97 ExamplesVRML97 Examples– http://www.web3d.org/Specifications/VRML97/part1/http://www.web3d.org/Specifications/VRML97/part1/

examples.htmlexamples.html 3D Web Graphics Using VRML Book Examples3D Web Graphics Using VRML Book Examples

– http://www.iup.edu/~jacross/graphics/mybook.htmlxhttp://www.iup.edu/~jacross/graphics/mybook.htmlx Links to good examples:Links to good examples:

– http://www.3d-design.com/vrmlsite.htmlhttp://www.3d-design.com/vrmlsite.html

TutorialsTutorials

VRML97 TutorialVRML97 Tutorial– http://www.vapourtech.com/vrmlguide/http://www.vapourtech.com/vrmlguide/

VRML Works TutorialVRML Works Tutorial– http://home.hiwaay.net/~crispen/vrmlworks/http://home.hiwaay.net/~crispen/vrmlworks/

tutorials/index.htmltutorials/index.html Cosmo VRML TutorialCosmo VRML Tutorial

– http://cosmosoftware.com/developer/tutorials.htmlhttp://cosmosoftware.com/developer/tutorials.html VRML Repository Tutorial linksVRML Repository Tutorial links

– http://vrml.sdsc.edu/cgi-bin/display.cgi?http://vrml.sdsc.edu/cgi-bin/display.cgi?category=Tutorials+-+VRMLcategory=Tutorials+-+VRML

Questions (and Answers)Questions (and Answers) Q: How to define the trajectory of the walk-through Q: How to define the trajectory of the walk-through

example?example? A: There are two ways in which to implement the tour:A: There are two ways in which to implement the tour:

– Using javascript to control the viewer’s camera positionUsing javascript to control the viewer’s camera position– Using VRML sensors, in particular the time sensorUsing VRML sensors, in particular the time sensor

The Tour example was implemented using the time The Tour example was implemented using the time sensor approachsensor approach– An array of tour positions is defined together with a way to An array of tour positions is defined together with a way to

interpolate between theminterpolate between them– A touch sensor determines when the timer is startedA touch sensor determines when the timer is started– Each tick of the timer is routed to the position interpolator Each tick of the timer is routed to the position interpolator

which sets a new orientation and translationwhich sets a new orientation and translation

Tour ExampleTour Example

DEF GuidePI PositionInterpolator { key [ 0, 0.2, 0.3, 0.5, 0.6, 0.8, 0.9, 1 ] keyValue [ 0 0 0, 0 0 -5, 2 0 -5, 2 6 -15 -4 6 -15, -4 0 -5, 0 0 -5, 0 0 0 ]}

Relevant source codeRelevant source codeDEF GuideRI OrientationInterpolator { key [ 0, 0.2, 0.3, 0.5, 0.6, 0.8, 0.9, 1 ] keyValue [ 0 1 0 0, 0 1 0 0, 0 1 0 1.2, 0 1 0 3, 0 1 0 3.5, 0 1 0 5, 0 1 0 0, 0 1 0 0, ]}

DEF TS TimeSensor { cycleInterval 30 } # 30 second tour

ROUTE StartTour.touchTime TO TS.startTimeROUTE TS.fraction_changed TO GuidePI.set_fractionROUTE TS.fraction_changed TO GuideRI.set_fractionROUTE GuidePI.value_changed TO GuideTransform.set_translationROUTE GuideRI.value_changed TO GuideTransform.set_rotation