8/14/2019 18 796 Seminar

1/25

Introduction to VRMLIntroduction to VRMLByBy

Salman Yussof Salman Yussof Diego IglesiasDiego Iglesias

8/14/2019 18 796 Seminar

2/25

What is VRML?What is VRML?

s VRML stands for Virtual Reality ModellingVRML stands for Virtual Reality ModellingLanguage and is pronounced vermil.Language and is pronounced vermil.

s It is a standard for delivering 3D renderingIt is a standard for delivering 3D renderingon the net, just like HTML is a standard foron the net, just like HTML is a standard forweb pages.web pages.

s VRML is a subset of the Open InventorVRML is a subset of the Open Inventorstandard developed by SGI for theirstandard developed by SGI for theirgraphics workstation.graphics workstation.

8/14/2019 18 796 Seminar

3/25

The World representationThe World representations VRML includes many of the things that go into making aVRML includes many of the things that go into making a

world. It has a way of describing geometry which createsworld. It has a way of describing geometry which createsobjects and spaces in which you can move around, as wellobjects and spaces in which you can move around, as wellas light, texture and sound which can be approached andas light, texture and sound which can be approached andviewed from whatever angle.viewed from whatever angle.

s It is from this worldly imitation that VRML files get theirIt is from this worldly imitation that VRML files get theirname. The files are called worlds and have .wrlname. The files are called worlds and have .wrlextension.extension.

8/14/2019 18 796 Seminar

4/25

VRML 1.0VRML 1.0s This is the first generation of VRML.This is the first generation of VRML.s 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.

s 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 connectionss No support for interactive behaviorsNo support for interactive behaviors

8/14/2019 18 796 Seminar

5/25

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

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

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

8/14/2019 18 796 Seminar

6/25

8/14/2019 18 796 Seminar

7/25

8/14/2019 18 796 Seminar

8/25

Features in VRML97Features in VRML97Interaction from sensors:Interaction from sensors:

s Collision detection gives the user a sense of substance as theyCollision detection gives the user a sense of substance as theymove in the worldmove in the worlds Touch sensors allow reactions to a users deliberate actionsTouch sensors allow reactions to a users deliberate actionss Proximity sensors allow reactions to a users not so deliberateProximity sensors allow reactions to a users not so deliberateactionsactionss

Visibility sensors allow conservation of resourcesVisibility sensors allow conservation of resources

8/14/2019 18 796 Seminar

9/25

Features in VRML97Features in VRML97

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

s Interpolators provide engines to implement animation of anyInterpolators provide engines to implement animation of anysort.sort.s Scripting in JavaScript or Java allows everything from simpleScripting in JavaScript or Java allows everything from simplelogic devices to fully blown analytical engines providing alogic devices to fully blown analytical engines providing awealth of complexity.wealth of complexity.s Prototypes extend the existing variety of object types withPrototypes extend the existing variety of object types withefficient reuse and simple scene graph structure.efficient reuse and simple scene graph structure.s A navigation information object provides the browser softwareA navigation information object provides the browser softwarewith details of the speed and nature of the users movements inwith details of the speed and nature of the users movements in

the world.the world.

8/14/2019 18 796 Seminar

10/25

8/14/2019 18 796 Seminar

11/25

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)

8/14/2019 18 796 Seminar

12/25

ShapesShapess BoxBox

geometry Box {size 5.5 3.75 1.0}geometry Box {size 5.5 3.75 1.0}s CylinderCylinder

geometry Cylinder {radius 0.5 height 10 topgeometry Cylinder {radius 0.5 height 10 topFALSE}FALSE}

s ConeCone geometry Cone {bottomRadius 5 height 10 sidegeometry Cone {bottomRadius 5 height 10 side

TRUE bottom FALSE} TRUE bottom FALSE}s SphereSphere

geometry Sphere { radius 10,000,000}geometry Sphere { radius 10,000,000}s Text & FontStyle Text & FontStyle

8/14/2019 18 796 Seminar

13/25

MaterialsMaterialss Material Node properties:Material Node properties:

diffuseColor:diffuseColor: The normal color of the object The normal color of the object specularColor:specularColor: The color of highlights on shiny objects The 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 objectsof this color. It doesn't cast light on any other objectsthoughthough

ambientIntensity:ambientIntensity: The amount of ambient light that the The amount of ambient light that theobject reflectsobject reflects

shininess:shininess: How reflective the object isHow reflective the object is transparency:transparency: How transparent the object is. Note, someHow transparent the object is. Note, some

browsers will not support partly-transparent objects.browsers will not support partly-transparent objects.

8/14/2019 18 796 Seminar

14/25

Transformations Transformationss Distances measured in meters (convention)Distances measured in meters (convention)s Angles measured in radiansAngles measured in radianss Transformation types: Transformation types:

Translation, Rotation, and Scaling Translation, Rotation, and Scalings Applied in following order (use nesting forApplied in following order (use nesting for

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

s Example:Example:Transform {

translation 1 1 1rotation 0 1 0 0.78scale 2 1 2children [

USE FBOX

]

8/14/2019 18 796 Seminar

15/25

Example 1Example 1#VRML V2.0 utf8#VRML V2.0 utf8Transform {Transform {

children [children [NavigationInfo { headlight FALSE } # We'll add our own light NavigationInfo { headlight FALSE } # We'll add our own light

DirectionalLight { # First childDirectionalLight { # First childdirection 0 0 -1 # Light illuminating the scenedirection 0 0 -1 # Light illuminating the scene

}}

Transform { # Second child - a red sphereTransform { # Second child - a red spheretranslation 3 0 1translation 3 0 1children [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}}

}}]]

}}( )( )

8/14/2019 18 796 Seminar

16/25

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 0children DEF Joe Shape { geometry Sphere { radius .2 } }children DEF Joe Shape { geometry Sphere { radius .2 } }

}}Transform {Transform {

translation -2 0 0translation -2 0 0children USE Joechildren USE Joe

}}

]]}}

http://c/windows/desktop/vrml%20examples/ex2.vrml

8/14/2019 18 796 Seminar

17/25

Example 3Example 3#VRML V2.0 utf8PROTO TwoColorTable [ field SFColor legColor .8 .4 .7

field SFColor topColor .6 .6 .1 ]{

Transform {children [

Transform { # table toptranslation 0 0.6 0children

Shape {appearance Appearance {

material Material { diffuseColor IS topColor }}geometry Box { size 1.2 0.2 1.2 }

}}

Transform { # first table leg

translation -.5 0 -.5childrenDEF Leg Shape {

appearance Appearance {material Material { diffuseColor IS legColor }

}geometry Cylinder { height 1 radius .1 }

}}Transform { # another table legtranslation .5 0 -.5

children USE Leg}

Transform { # another table legtranslation -.5 0 .5children USE Leg

}Transform { # another table legtranslation .5 0 .5children 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

8/14/2019 18 796 Seminar

18/25

Example 4Example 4#VRML V2.0 utf8

DEF OpenVault Script {# Declarations of what's in this Script node:eventIn SFTime openVaulteventIn SFBool combinationEnteredeventOut 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 1000minBack 1000maxBack 1000

}

DEF TS TouchSensor { }

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

http://c/WINDOWS/DESKTOP/vrml%20examples/ex4.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/ex4.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/ex4.vrml

8/14/2019 18 796 Seminar

19/25

Additional ExamplesAdditional Exampless InterpolationInterpolations InteractionInteractions

Tour Tours Distance SensorDistance Sensors GraphicsGraphics (1)(1)s GraphicsGraphics (2)(2)s GraphicsGraphics (3)(3)

http://c/WINDOWS/DESKTOP/vrml%20examples/interpolator.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/interpolator.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/life.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/life.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/tour.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/tour.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/elevator.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/elevator.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/hornet.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/hornet.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/airhors2.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/airhors2.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/airhors2.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/airhors2.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/airhors2.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/lobster.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/biota/airhors2.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/hornet.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/elevator.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/tour.vrmlhttp://c/WINDOWS/DESKTOP/vrml%20examples/life.wrlhttp://c/WINDOWS/DESKTOP/vrml%20examples/interpolator.wrl

8/14/2019 18 796 Seminar

20/25

AcknowledgementsAcknowledgementss Example VRML code fromExample VRML code from

http://www.vapourtech.com/vrmlguide/http://www.vapourtech.com/vrmlguide/ http://www.web3d.org/Specifications/VRML97/part1/ehttp://www.web3d.org/Specifications/VRML97/part1/e

xamples.htmlxamples.html

8/14/2019 18 796 Seminar

21/25

ReferencesReferencess VRML Consortium/Web3DVRML Consortium/Web3D

http://www.vrml.org/http://www.vrml.org/s VRML repository:VRML repository:

http://vrml.sdsc.edu/http://vrml.sdsc.edu/s VRML 1.0 SpecificationVRML 1.0 Specification

http://www.vrml.org/VRML1.0/vrml10c.htmlhttp://www.vrml.org/VRML1.0/vrml10c.htmls VRML 2.0 SpecificationVRML 2.0 Specification

http://www.vrml.org/VRML2.0/FINAL/http://www.vrml.org/VRML2.0/FINAL/s VRML97 SpecificationVRML97 Specification

http://www.web3d.org/Specifications/VRML97/http://www.web3d.org/Specifications/VRML97/

8/14/2019 18 796 Seminar

22/25

ExamplesExampless VRML97 ExamplesVRML97 Examples

http://www.web3d.org/Specifications/VRML97/part1/ehttp://www.web3d.org/Specifications/VRML97/part1/examples.htmlxamples.html

s 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

s Links to good examples:Links to good examples: http://www.3d-design.com/vrmlsite.htmlhttp://www.3d-design.com/vrmlsite.html

8/14/2019 18 796 Seminar

23/25

Tutorials Tutorialss VRML97 TutorialVRML97 Tutorial

http://www.vapourtech.com/vrmlguide/http://www.vapourtech.com/vrmlguide/s VRML Works TutorialVRML Works Tutorial

http://home.hiwaay.net/~crispen/vrmlworks/tutorials/http://home.hiwaay.net/~crispen/vrmlworks/tutorials/index.htmlindex.html

s Cosmo VRML TutorialCosmo VRML Tutorial http://cosmosoftware.com/developer/tutorials.htmlhttp://cosmosoftware.com/developer/tutorials.html

s VRML Repository Tutorial linksVRML Repository Tutorial links http://vrml.sdsc.edu/cgi-http://vrml.sdsc.edu/cgi-

bin/display.cgi?category=Tutorials+-+VRMLbin/display.cgi?category=Tutorials+-+VRML

8/14/2019 18 796 Seminar

24/25

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

through example?s A: There are two ways in which to implement

the tour: Using javascript to control the viewers camera

position Using VRML sensors, in particular the time sensor

s The Tour example was implemented using thetime 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

8/14/2019 18 796 Seminar

25/25