Heriot-Watt University Edinburgh and Scottish Borders School of Mathematical and Computer Sciences F29IG2 Multimedia Technology Hamish

Taylor 2005 http://www.macs.hw.ac.uk/cs/online/9ig2/index.htm

http://www.macs.hw.ac.uk/cs/online/9ig2/5/1+2.htm

VRML Format

VRML Requirements

Virtual Reality Modeling Language is file format for describing interactive 3D objects & worlds universal, exchange format - integrated 3D graphics & multimedia designed for use on Internet, intranets & local client systems

Design requirements of VRML are Authorability enable development of software able to create, edit & maintain VRML files, and auto-convert other 3D file formats to VRML Composability ability to use & combine dynamic 3D objects within VRML world & allow their re-use

VRML can represent static and animated dynamic 3D & multimedia objects hyperlinks to other media text, images, sounds and movies VRML browsers are widely available for many different platforms. VRML supports extensibility allowing definition of new dynamic 3D objects interoperable extensions to standard by application communities mappings between its objects & commonly used 3D API features

Extensibility

ability to add new object types to VRML

Implementability can be run on wide range of systems Performance emphasize scalable, interactive performance on wide variety of computing platforms Scalability enable arbitrarily large dynamic 3D worlds

Online VRML tutorials include Floppy http://web3d.vapourtech.com/tutorials/vrml97/

Lighthouse http://www.lighthouse3d.com/vrml/tutorial/ Nadeau http://www.sdsc.edu/~nadeau/nadeau_courses.html

Roskothen http://www.vruniverse.com/tutorials.html VRML's steward is Web3D consortium (was VRML consortium) VRML has evolved 1995 VRML 1.0 3D world modeling 1997 VRML 2.0 animation, behaviours and sound added VRML97 is ISO/IEC 14772-1:1997 standard of VRML 2.0. Lecture 5 Slide 1 Definitive book - VRML 2.0 Sourcebook Ames A L, Nadeau D R and Moreland J L, 2nd ed, John Wiley, 1996. Established MIME types for VRML model/vrml x-world/x-vrml Lecture 5 Slide 2

1 de 1

08/08/2005 08:26 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/5/3+4.htm

VRML Conceptual Model

VRML Nodes

Conceptually a VRML file defines space-time containing spatial & aural objects allows dynamic changes to objects by various mechanisms Each VRML file sets up 3D coordinate space for all defined & included objects explicitly defines & composes set of 3D & multimedia objects defines object behaviours Hierarchical file inclusion lets large, dynamic worlds be created. VRML files contain 3 main components VRML header nodes routes

VRML worlds are defined by nodes which are types of object contain fields are usually nested Overall nesting of all nodes defines the scene graph. Fields are properties of objects single values, multi-values or nodes Simple example of node is
Group { children [ ] }

It simply groups other nodes e.g.

Group { children [ Group { children [ ] } ] }

VRML Header
All VRML files start with header
#VRML V2.0 utf8

Header must begin on 1st line with no leading or trailing spaces. Comment lines begin with "#"
# This is a comment line

Nodes can only be placed in certain fields Slide 3 of only few types can be placed at top level Lecture 5 Slide 4

Lecture 5

1 de 1

08/08/2005 08:29 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/5/5+6.htm

VRML Node Types

Reusing VRML Code

Nodes come in various flavours such as ordinary nodes grouping nodes prototype nodes script nodes VRML uses default values where parameters aren't specified object centred coordinate system

Object Reuse
Previous definitions can be reused
#VRML V2.0 utf8 DEF BALL Shape { appearance Appearance { material Material { } } geometry Sphere { } } Transform { translation 0 2 0 children USE BALL }

Simple Shapes
VRML recognises 4 simple shape types box cone cylinder sphere Shaded white sphere of radius 1 is specified by
#VRML V2.0 utf8 Shape { appearance Appearance { material Material { } } geometry Sphere { } }

Two white spheres are created by reusing BALL. Transform{} node moves 2nd ball 2 units along Y axis from 1st.

Inlining
Code can also be reused to get two white spheres by inlining.
#VRML V2.0 utf8 Inline { url "sphere.wrl" } Transform { translation 0 2 0 children Inline { url "sphere.wrl" } }

File "sphere.wrl" contains VRML given on previous page. Lecture 5 Slide 5 Slide 6

Lecture 5

1 de 1

08/08/2005 08:30 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/5/7+8.htm

VRML Geometry

VRML Transformations

VRML uses 3D coordinate system

Transform node allows scaling rotations translations which are performed in that order. Two cylinders rescaled, translated and rotated w.r.t. each other.
#VRML V2.0 utf8 Group { children [ DEF TUBE Shape { appearance Appearance { material Material { } } geometry Cylinder { height 1.0 radius 0.1 } }, Transform { rotation 1 1 0 1.57 translation 2 1 0 scale 1 2 3 children USE TUBE } ] }

Coordinate axes X-axis is horizontal Y-axis is vertical Z-axis comes out of screen Rotations in VRML are specified by 4 values 3 coordinate values for point angle in radians Rotations rotate coordinate system about line from local origin to given point where angle increases clockwise facing out along line Coordinate values for common rotation axes right along X axis 1.0 0.0 0.0 up along Y axis out along Z axis Lecture 5 0.0 1.0 0.0 0.0 0.0 1.0 Slide 7

This example creates 2nd cylinder from 1st and then widens it 2 fold in Y axis and 3 fold in Z axis moves it 2 units in X axis and 1 unit in Y axis rotates it 90 degrees about line from its origin to (1,1,0) Lecture 5 Slide 8

1 de 1

08/08/2005 08:31 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/5/9+10.htm

VRML Appearances

VRML Colour

Appearance nodes have 3 fields with NULL defaults for material texture look of surfaces patterns on surfaces

VRML colours are specified by RGB triples where values lie between 0.0 and 1.0 give degree of red, green or blue Sample RGB colours: Colour Red Green Blue black green silver lime gray olive white 0 0 0 0.5 0 0 0.75 0 0.5 0 1 0 0 0.5 0 1 0.5 0.5 1 1 Slide 10

textureTransform transforms surface pattern coordinate system Material field is usually set by Material{} with fields diffuseColor specularColor emissiveColor normal colour of object's surface colour highlights on its shiny surfaces glowing colour of its surfaces

0.75 0.75 0 0.5 0.5 1 1 1 0.5 0.5 1 1 0 0 0 0 0 0.5 0 1

ambientIntensity amount of reflected ambient light shininess transparency how reflective its surfaces are how transparent its surfaces are

Transparency values other than opaque value of 0 create a lot of scene rendering work are not supported by some VRML browsers Glowing semi-transparent green cone green cone with shiny surface is
#VRML V2.0 utf8 Shape { appearance Appearance { material Material { emissiveColor 0 1 0 shininess 0.6 transparency 0.5 } } geometry Cone { bottomRadius 1 height 2 } }

yellow

maroon 0.5 navy red blue purple teal 0 1 0 0.5 0

fuchsia 1 aqua Lecture 5 0

Lecture 5

Slide 9

1 de 1

08/08/2005 08:32 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/5/11+_.htm

Combined Example

Example VRML file specifying silver rocket

#VRML V2.0 utf8 # Silver Rocket Group { children [ Shape { appearance DEF Silver Appearance { material Material { diffuseColor 0.75 0.75 0.75 } } geometry Cylinder { height 6 radius 1 } }, Transform { translation 0 4 0 children Shape { appearance USE Silver geometry Cone { height 2 bottomRadius 1 } } } ] }

In this example cylinder and cone are created cone is displaced (0,4,0) from cylinder saved appearance of cylinder is reused for cone Lecture 5 Slide 11

1 de 1

08/08/2005 08:32 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/1+2.htm

VRML Textures

VRML Pixel Textures

Possible values for texture field of Appearance node ImageTexture PixelTexture MovieTexture Texture images are 2D tiles to cover surfaces with. Brick image tile and box node can create a brick wall
#VRML V2.0 utf8 Shape { appearance Appearance material texture geometry Box { size 8 }

PixelTexture node specifies pixel array and type pixel values Checkerboard effect can be realised by this node
#VRML V2.0 utf8 Shape { appearance Appearance { texture PixelTexture { image 4 4 1 0x0 0xFF 0x0 0xFF 0xFF 0x0 0xFF 0x0 0x0 0xFF 0x0 0xFF 0xFF 0x0 0xFF 0x0 } } geometry Box { size 8 4 1 } }

{ Material { } ImageTexture { url "brick.gif" } } 4 1 }

Texture is mapped onto all 6 surfaces by stretching & shrinking. With a sphere texture is mapped once over whole surface
#VRML V2.0 utf8 Shape { appearance Appearance { texture PixelTexture { image 4 4 1 0x0 0xFF 0x0 0xFF 0xFF 0x0 0xFF 0x0 0x0 0xFF 0x0 0xFF 0xFF 0x0 0xFF 0x0 } } geometry Sphere { } }

Textures can be multiply tiled as in this grass plain from above

#VRML V2.0 utf8 Shape { appearance Appearance { texture ImageTexture { url ["grass.jpg"] } textureTransform TextureTransform { scale 100 100 } } geometry Box { size 100 100 1 } }

MPEG 1 movies can also be played in loop on Box node surfaces

#VRML V2.0 utf8 Shape { appearance Appearance { material Material { } texture MovieTexture { url "planet.mpg" loop TRUE } } geometry Box { size 8 4 1 } }

With a cylinder it is mapped over curved surface and each end

#VRML V2.0 utf8 Shape { appearance Appearance { texture PixelTexture { image 4 4 1 0x0 0xFF 0x0 0xFF 0xFF 0x0 0xFF 0x0 0x0 0xFF 0x0 0xFF 0xFF 0x0 0xFF 0x0 } } geometry Cylinder { } }

Lecture 6

Slide 1

Lecture 6

Slide 2

1 de 1

08/08/2005 08:35 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/3+4.htm

VRML Text

Line & Point Shapes

Shape node's geometry field may be specified as Text node. Text node has following fields string length lines of text given as separate strings desired width to be achieved by stretching/squashing

Points and lines also be drawn with PointSet set of points

IndexedLineSet set of lines PointSet can represent yellow vertices of cube

#VRML V2.0 utf8 Shape { appearance Appearance { material Material { emissiveColor 1 1 0 } } geometry PointSet { coord Coordinate { point [ -1 1 1, 1 1 1, 1 1 -1, -1 1 -1, -1 -1 1, 1 -1 1, 1 -1 -1, -1 -1 -1 ] } } }

maxExtent squashes lines longer than given width fontStyle type of font to be used

fontStyle node controls look of text with fields such as Field Default Value family "SERIF" style size "PLAIN" 1.0

justify "BEGIN" Two centred, bold, red text lines from Hamlet
#VRML V2.0 utf8 Shape { appearance Appearance { material Material { diffuseColor 1 0 0 } } geometry Text { string ["To be or not to be", "That is the question"] fontStyle FontStyle { family "SANS" style "BOLD" size 0.5 justify "MIDDLE" } } }

IndexedLineSet can represent aqua edges of cube

#VRML V2.0 utf8 Shape { appearance Appearance { material Material { emissiveColor 0 1 1 } } geometry IndexedLineSet { coord Coordinate { point [ -1 1 1, 1 1 1, 1 1 -1, -1 1 -1, -1 -1 1, 1 -1 1, 1 -1 -1, -1 -1 -1 ] } coordIndex [ 0, 1, 2, 3, 0, -1, # top 4, 5, 6, 7, 4, -1, # bottom 0, 4, -1, # verticals 1, 5, -1, 2, 6, -1, 3, 7 ] } }

Lecture 6

Slide 3 Lecture 6 Slide 4

1 de 1

08/08/2005 08:35 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/5+6.htm

Sophisticated Shapes

Elevation Grids

More sophisticated shapes can be built in VRML with Indexed Face Sets faces specified by list of indices of given points Elevation Grid Extrusion Node faces given by elevations above grid points created by extruding cross-section along spine

Bumpy terrain is tedious to construct using IndexedFaceSet nodes needed so often that VRML provides special support Elevation grids are specified by grid of points in X-Z plane height above/below each grid point Grid elevations are connected locally to form surface faces. ElevationGrid representing green terrain

Indexed Face Sets

IndexedFaceSet can represent olive pyramid
#VRML V2.0 utf8 Shape { appearance Appearance { material Material { } geometry IndexedFaceSet { coord Coordinate { point [ -1 1 0, 1 1 0, ] } coordIndex [ 0, 3, 2, 1, 0, -1, 4, 1, 2, 4, -1, 4, 2, 3, 4, -1, 4, 3, 0, 4, -1, 4, 0, 1, 4 ] } }

diffuseColor 0.5 0.5 0 } #VRML V2.0 utf8 Shape { appearance Appearance { material Material { diffuseColor 0 0.5 0 } } geometry ElevationGrid { xDimension 6 zDimension 6 xSpacing 1 zSpacing 1 creaseAngle 0.785 height [ 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 1, 0, 0, 1, 2, 4, 2, 0, 0, 2, 1, 2, 1, 0, 0, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0 ] } }

-1 -1 0 0

0, 2

1 -1

0,

# base # faces

IndexedFaceSet is assumed solid by default only front sides of faces are drawn front is side where indexes go round counter clockwise Lecture 6 Slide 5

Angle between adjacent faces is smoothed if less than CreaseAngle. Large grids are best authored by VRML world building tools. Lecture 6 Slide 6

1 de 1

08/08/2005 08:36 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/7+8.htm

Extrusion Nodes

Background Nodes

Extrusions are specified by cross section to extrude spine giving path of extrusion scale of cross section at points along spine orientation of cross section at points along spine Extrusion process proceeds in stages 1. cross section is placed & scaled at next coordinate on spine 2. faces are built connecting previous cross section to this one 3. steps 1 and 2 are repeated until end of spine is built Extrusion node can create a maroon torus or doughnut shape
#VRML V2.0 utf8 Shape { appearance Appearance { material Material { diffuseColor 0.5 0 0 } } geometry Extrusion { creaseAngle 1.57 crossSection [ 1.0 0.0, 0.92 -0.38, 0.71 -0.71, 0.38 -0.92, 0.0 -1.0, -0.38 -0.92, -0.71 -0.71, -0.92 -0.38, -1.0 0.0, -0.92 0.38, -0.71 0.71, -0.38 0.92, 0.0 1.0, 0.38 0.92, 0.71 0.71, 0.92 0.38, 1.0 0.0 ] # circle spine [ 2.0 0 0.0, 1.85 0 0.77, 1.41 0 1.41, 0.77 0 1.85, 0.0 0 2.0, -0.77 0 1.85, -1.41 0 1.41, -1.85 0 0.77, -2.0 0 0.0, -1.85 0 -0.77, -1.41 0 -1.41, -0.77 0 -1.85, 0.0 0 -2.0, 0.77 0 -1.85, 1.41 0 -1.41, 1.85 0 -0.77, 2.0 0 0.0 ] # circle } }

Background node specifies colours and angles for sky sphere at infinity ground sphere at infinity just inside sky sphere Sky and ground spheres are specified by list of N angles from top or bottom pole respectively N + 1 colours for segments between each angle Colours between angles are smoothly shaded into gradients. When colours are not specified for every angle ground sphere is made invisible up to upper pole sky sphere continues last colour down to lower pole Open air landscape with sun above and horizon
#VRML V2.0 utf8 Background { skyColor [ 1 1 0, 0 0.2 0.7, 0 0.5 1, 1 1 1 ] skyAngle [ 0.2, 1.309, 1.571 ] groundColor [ 0.1 0.1 0, 0.4 0.3 0.2, 0.6 0.6 0.6 ] groundAngle [ 1.309, 1.571 ] }

Panorama box is infinitely large box just inside ground sphere is transparent by default on each of its 6 sides lets URLs be specified for landscape images on its sides Transparent pixels in images will let sky or ground show through. Lecture 6 Slide 8

Lecture 6

Slide 7

1 de 1

08/08/2005 08:36 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/9+10.htm

Background Panoramas

Billboards

Images in background's panorama box can create backdrop scenes

#VRML V2.0 utf8 Background frontUrl leftUrl rightUrl topUrl backUrl } { "front.jpg" "left.jpg" "right.jpg" "top.jpg" "back.jpg"

Billboard nodes are grouping nodes have axis of rotation rotate so Z axis always points to viewer Default axis of rotation is up Y axis. Blue text on white background billboard
#VRML V2.0 utf8 Billboard { children [ Shape { appearance Appearance { material Material { diffuseColor 1 1 1 } } geometry Box { size 3.25 4.5 0.05 } }, Transform { translation -1.5 1.25 0.1 children Shape { appearance Appearance { material Material { diffuseColor 0 0 1 } } geometry Text { string ["Buy", "VRML", "objects", "here!"] } } } ] }

Transform { translation 0 30 0 children Shape { appearance Appearance { texture ImageTexture { url "ground.jpg" } textureTransform TextureTransform { scale 100 100 } } geometry Box { size 300 0.5 300 } } } Viewpoint { position 0 40 0 orientation 0 0 1 0 description "front view" }

This mountain encircled plain on Mars uses 5 image files to fill sides and ceiling of panorama box image file tiled 100 times in 2 directions to create ground viewpoint to view scene above "ground" Panorama box faces are always behind any object within the scene.

As viewer moves, this sign turns to face them. Lecture 6 Slide 9 Lecture 6 Slide 10

1 de 1

08/08/2005 08:37 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/11+12.htm

Anchors and Viewpoints

Navigator and WorldInfo Nodes

Anchor Node
VRML provides Anchor node to support hyperlinks which encloses group of shapes is activated when user clicks on such a shape causes browser to load URL on activation Anchor nodes can be put round any shape such as previous billboard
#VRML V2.0 utf8 Anchor { children Inline { url "billboard.wrl" } url "10.htm" }

Navigator Node
VRML supports configuration of viewing avatar regarding type of viewing speed of avatar when walking or flying whether avatar headlights are on or off Types of viewing WALK FLY avatar is constrained to follow the terrain avatar can fly around the world

EXAMINE viewer can treat world as object & avatar is unconstrained NONE no way to navigate is supported

When sign is clicked on, viewer goes to HTML page.

Viewpoints
Viewpoints specify viewing locations accessible via browser controls. Front and rear views around elevation grid
#VRML V2.0 utf8 Inline { url "terrain.wrl" } Viewpoint { position 3 1 10 orientation 0 0 1 0 description "front view" } Viewpoint { position 3 1 -10 orientation 0 1 0 3.1416 description "rear view" }

To change navigation to fast flying without headlights

#VRML V2.0 utf8 Inline { url "terrain.wrl" } NavigationInfo { type "FLY" speed 3 headlight FALSE }

WorldInfo Node
Non-executable information about world can be included with VRML
#VRML V2.0 utf8 WorldInfo { title "Erewhon" info ["(c) Copyright 1871", "Samuel Butler"] }

Selecting viewpoint will move one smoothly between them. Lecture 6 Slide 11

Lecture 6

Slide 12

1 de 1

08/08/2005 08:37 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/6/13+_.htm

Fog

Fog in VRML can be used to create virtual atmosphere limit visibility for faster rendering produce mood effects Fog has colour linear or exponential type visibility range VRML fog washes out colours of shapes in distance to colour of fog does not wash out background node effects Elevation grid in mist
#VRML V2.0 utf8 Background { groundAngle [1.5, 1.571] groundColor [ 0 0.5 0, 0.1 0.6 0.1, 0.3 0.7 0.3 ] skyAngle [ 1.5, 1.571 ] skyColor [ 0 0 0.5, 0.1 0.1 0.6, 0.3 0.3 0.6 ] } Inline { url "terrain.wrl" } Fog { color 1 1 1 visibilityRange 20 fogType "LINEAR" }

Full mist effect needs change to background node as well. Lecture 6 Slide 13

1 de 1

08/08/2005 08:37 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/7/1+2.htm

Sound

Level of Detail

Sound nodes in VRML can be used to specify sound emitter produce sound hearable in ellipsoidal region give sound's direction and effect of coming from 3D location Sound sources are typically specified by AudioClip node MovieTexture node Volume of sound is controlled by Sound node's intensity field. Sound volume is full within minimum range ellipsoid is zero outside maximum range ellipsoid reduces with square of emitter's distance in between Sound node playing wind effects over hillside
#VRML V2.0 utf8 Sound { source AudioClip { url "chilly.wav" loop TRUE } minFront 6.0 minBack 6.0 maxFront 12.0 maxBack 12.0 } Inline { url "terrain.wrl" }

As objects in VRML get more complex it takes longer time to render them their rendering tends to be done at a lower frame rate However, more distant ones can be drawn in less detail without loss. LOD nodes in VRML can be used to switch between VRML models of different levels of detail trigger changes depending on distance of user save on rendering time Spaceship can be rendered more simply as it recedes
#VRML V2.0 utf8 LOD { range [ 15, 80 ] level [ Inline { url "tiefighter.wrl" } Inline { url "tiefighter2.wrl" } Group {} ] }

Star Wars tiefighter is rendered in most detail from 0 to 15 metres moderate detail from 15 to 80 metres no detail beyond 80 metres Usually 2 or 3 levels is enough for useful LOD exploitation. Lecture 7 Slide 2

Moving around landscape affects rendered sound volume. Lecture 7 Slide 1

1 de 1

08/08/2005 08:40 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/7/3+4.htm

Light Sources

Point and Directional Lights

VRML light sources are invisible with no form or shape detectable only by their lighting effects on world VRML does not support the casting of shadows. VRML supports 3 types of lights point lights directional lights spot lights Point lights give off light radially in all directions from single point are realised by PointLight node

Fields for point lights cover its colour, location and intensity. Red point light illuminating 2 white cylinders
#VRML V2.0 utf8 PointLight { location intensity color 0 0 0 0.75 1 0 0 }

Transform { translation 4 0 0 children Shape { appearance Appearance { material Material {} } geometry Cylinder {} } } Transform { translation -2 0 0 children Shape { appearance Appearance { material Material {} } geometry Cylinder {} } }

Fields for directional lights cover its colour, direction and intensity. Blue directional light illuminating 2 cylinders
#VRML V2.0 utf8

Directional lights give off light in parallel in one direction appear to come from infinitely far away are realised by DirectionalLight node By default white directional light lights scene from above. Spot lights give off light in a cone from single point are realised by SpotLight node Graphics boards may limit number of light sources rendered. Lecture 7 Slide 3

NavigationInfo { headlight FALSE type "EXAMINE" } DirectionalLight { color 0 0 1 direction 1 0 0 } Transform { translation 0 0 0 children Shape { appearance Appearance { material Material {} } geometry Cylinder {} } } Transform { translation 4 0 0 children Shape { appearance Appearance { material Material {} } geometry Cylinder {} } }

NavigationInfo node switches off default white light from above. Lecture 7 Slide 4

1 de 1

08/08/2005 08:40 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/7/5+6.htm

Spot Lights

Fields

Fields of VRML spotlights cover beam width colour cut off angle direction location intensity Intensity is most in beam width cone and 0 outside cut off angle cone. Blue spotlight illuminating two cylinders
#VRML V2.0 utf8 SpotLight { beamWidth color cutOffAngle direction location }

Single valued fields have types such as Field SFColor SFFloat SFImage SFInt32 SFNode Description Example

trio of RGB floats between 0 and 1 0.8 0.5 0.2 floating point field width, height, bytes/pixel, bytes 32 bit integer value VRML node -3.14159 1 2 1 0x0 0xFF -876 Transform { ... } 1 0 0 1.57 "Cogito ergo sum" 951782400.0 midnight 29 Feb 2000

SFRotation 3 values for axis, 1 for angle SFString SFTime string in quotes secs from midnight 1 Jan 1970

SFVec3f
0.5 0 0 1 0.5 1 0 0 -3 0 0

3D real valued coordinate

0.21 3.4 -0.08

Multi valued fields have types such as Field MFFloat MFInt32 Description Example

floating point values [ 2.0, 1.732, 1.414 ] 32 bit integer values [ -6, 2, 45, 8, -3 ] [ Shape { .. }, Transform { .. } ] [ "I am going out now", "I shan't be back for some time" ]

Shape { appearance Appearance { material Material {} } geometry Cylinder { } } Transform { translation 3 0 -3.8 children Shape { appearance Appearance { material Material {} } geometry Cylinder { } } }

MFNode multiple nodes MFString multiple strings

MFVec2f 2D real coordinates [ 0.2 3.4, 4.3 1.2 ] Lecture 7 Slide 6

Blue spotlight lights whole side of one cylinder and part of another. Lecture 7 Slide 5

1 de 1

08/08/2005 08:41 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/7/7+8.htm

Fields and Events

Animation and Routes

Nodes have eventIn fields to receive events eventOut fields to output events Typed event fields are either special purpose implied by exposedField

Movement is added by animating coordinate system's orientation position scale Any animation requires clock to control playback of animation description of how something changes during course of animation

Group node has special purpose eventIn addChildren. Node with exposedField such as SFColor has implied fields eventIn field set_SFColor eventOut field SFColor_changed

means to connect clock ticks to description to target of change

Routes
Routes connect eventOuts with eventIns of same type remain dormant until event is sent along them

Text node has following syntax

Text { string length maxExtent fontStyle } [ ] [ ] 0.0 NULL # # # # exposedField exposedField exposedField exposedField MFString MFFloat SFFloat SFNode

can wire many to one or one to many Have effect on receiving node depending on kind of node's eventIn receiving event values in communicated event current activities and state of node Routes in VRML are expressed by ROUTE statements such as ROUTE CLOCK.is_active TO SWITCH.set_boolean Lecture 7 Slide 8

MFString event that sends new string multi-value to Text node's set_string implied eventIn field causes text displayed to change to that value Lecture 7 Slide 7

1 de 1

08/08/2005 08:41 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/7/9+10.htm

Time Sensor

Interpolators

TimeSensor node acts as clock generates events indicating changes in time can be set and used as alarm

TimeSensor events can be routed via PositionInterpolator node to create new positions OrientationInterpolator node to create new orientations and then to coordinate system to move or rotate it.
PositionInterpolator { key [ ] keyValue [ ] set_fraction value_changed # # # # exposedField exposedField eventIn eventOut MFFloat MFVec3f SFFloat SFVec3f } MFFloat MFRotation SFFloat SFRotation }

TimeSensor measures time in seconds from 1st January 1970 can be started or stopped at specific date and time outputs TRUE on starting on its isActive eventOut outputs FALSE on stopping on its isActive eventOut These events can be used to start or stop animations. Fractional time is also supported by TimeSensor runs from time 0.0 as clock starts runs until time 1.0 when clock stops can be output by TimeSensor cyclically has configurable cycle time interval TimeSensor outputs fractional times on fraction_changed eventOut. Lecture 7 Slide 9

OrientationInterpolator { key [ ] # exposedField keyValue [ ] # exposedField set_fraction # eventIn value_changed # eventOut

key specifies list of fractional, floating point times in nondecreasing order between 0.0 and 1.0 keyValue specifies list of positions/rotations where length is same as length of key list position/rotation corresponds to same position key value These interpolators on receiving set_fraction value t eventIn scan keys to find t1 and t2 such that t1 =< t =< t2 retrieve corresponding keyValues v1 and v2 for keys t1 and t2 output on value_changed linear interpolation v of v1 and v2 Lecture 7 Slide 10

1 de 1

08/08/2005 08:43 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/7/11+12.htm

Orientation Interpolation

Colour Interpolation

Animation by interpolation of spinning cube

#VRML V2.0 utf8 DEF CUBE Transform { children Shape { appearance Appearance { material Material { } } geometry Box { size 1.0 1.0 1.0 } } } DEF CLOCK TimeSensor { cycleInterval 6.0 loop TRUE } DEF SPIN OrientationInterpolator { key [ 0, 0.5, 1 ] keyValue [ 0 1 1 0, 0 1 1 3.142, 0 1 1 6.284 ] } ROUTE CLOCK.fraction_changed TO SPIN.set_fraction ROUTE SPIN.value_changed TO CUBE.set_rotation

ColorInterpolator node
ColorInterpolator { key [] keyValue [] set_fraction value_changed } # # # # exposeField exposeField eventIn eventOut MFFloat MFColor SFFloat SFColor

creates colours by linear interpolation based on fractional inputs. Animation produces colour changing sphere
#VRML V2.0 utf8 Shape { appearance Appearance { material DEF STUFF Material {} } geometry Sphere {} } DEF CLOCK TimeSensor { cycleInterval 9.0 loop TRUE } DEF HUES ColorInterpolator { key [0, 0.15, 0.3, 0.45, 0.6, 0.8, 1] keyValue [1 0 0, 0 .5 1, 0 1 0, 1 0 .5, 0 0 1, 1 0 0] } ROUTE CLOCK.fraction_changed TO HUES.set_fraction ROUTE HUES.value_changed TO STUFF.set_emissiveColor

In this example TimeSensor's eventOuts go to interpolator TimeSensor cycles every 6 seconds interpolator outputs 1 rotation every cycle its eventOuts go to Transform's exposedField rotation How frequently events are output by TimeSensor depends on VRML implementation computer platform's hardware how busy computer is Lecture 7 Slide 11

In this example TimeSensor drives colour interpolator to output colours colours go to Material node's exposedField emissiveColor VRML also supports other interpolators like ScalarInterpolator outputs SFFloat values

CoordinateInterpolator outputs MFVec3f values Lecture 7 Slide 12

1 de 1

08/08/2005 08:42 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/8/1+2.htm

VRML Sensors

Touch Sensor

GUIs support cursor control with 2D pointing devices such as mouse trackball joystick Modes of interaction with these devices include move move cursor over item click drag press and release button while cursor over item press button while cursor over item, move then release

TouchSensor node has enabled exposedField which is TRUE by default outputs TRUE then FALSE on isActive when clicked over outputs TRUE on isOver when cursor over else FALSE TouchSensor node has 1 exposed Field and multiple eventOuts.
#VRML V2.0 utf8 DEF TUBE Transform { children [ Shape { appearance Appearance { material Material { } } geometry Cylinder { height 1.0 radius 0.4 } }, DEF SENSOR TouchSensor {} ] } DEF CLOCK TimeSensor { enabled FALSE cycleInterval 2 loop TRUE } DEF MOVER PositionInterpolator { key [ 0, 0.5, 1 ] keyValue [ 0 0.0 0, 0 0.4 0, 0 0.0 0 ] } ROUTE SENSOR.isOver ROUTE CLOCK.fraction_changed ROUTE MOVER.value_changed TO TO TO CLOCK.set_enabled MOVER.set_fraction TUBE.set_translation

These actions can be sensed by VRML's various sensors Sensor Time Touch Cylinder Senses passage of time if cursor over, clicked on viewer dragging motions Outputs status, time, alarms status, time, position status, rotation, time, position, orientation Plane Sphere viewer dragging motions viewer dragging motions status, movement, time status, rotation, time position, orientation Proximity if user in box zone user movement, status, user rotation, time Collision if user hits group of shapes status, time Visibility Lecture 8 if user sees box zone status, time Slide 1

Lecture 8

Slide 2

1 de 1

08/08/2005 08:44 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/8/3+4.htm

Touch and Proximity Sensor

Script Nodes

In this bouncing tube example only when cursor is over tube, TouchSensor outputs TRUE when TouchSensor outputs TRUE, TimeSensor is enabled when TimeSensor is enabled, its eventOuts go to interpolator interpolator outputs up then down movement on Y axis every 2 secs. its eventOuts go to Transform's exposedField translation Effect is to make tube bounce when cursor is over it.

Script nodes are needed to produce complex animation effects. Script node is shell node with no effect on scene graph has fields, exposedFields, eventIns & eventOuts as needed has actions provided by Java or JavaScript programs has url field specifying source of program Script node field examples field SFBool enabled TRUE 0.5 0 0.5 [0 0 0, 0 0.5 0, 0 1 0]

Proximity Sensors
ProximitySensor node has size and center exposedFields with defaults of 0 0 0 has enabled exposedField which is TRUE by default outputs TRUE on isActive when viewer in sensor box else FALSE Bouncing tube with proximity sensor below in place of touch sensor
DEF SENSOR ProximitySensor { size 10 10 10 }

field SFColor colour field MFVec3f spine Script node eventIn examples eventIn SFBool

set_enabled

eventIn SFNode set_texture eventIn SFVec3f set_position Script node eventOut examples eventOut SFBool isActive

and with a new route for the SENSOR node

ROUTE SENSOR.isActive TO CLOCK.set_enabled

eventOut SFImage panorama_changed eventOut SFVec3f coordinate_changed Lecture 8 Slide 4

is active while viewer's avatar is inside proximity sensor's box. Users will have to approach tube to start animation initially. Lecture 8 Slide 3

1 de 1

08/08/2005 08:45 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/8/5+6.htm

Script Programs

Script Example

Script node programs are specified by url field inline as "javascript: ... " string externally in file fetchable via URL Program scripts can respond to initialisation shutdown initialize() method/function called shutdown() method/function called

Simple sphere which changes colour when clicked on

#VRML V2.0 utf8 Group { children [ Shape { appearance Appearance { material DEF STUFF Material { diffuseColor 1 0 0 } } geometry Sphere { radius 1 } }, DEF TOUCH TouchSensor {}, DEF CODE Script { field SFBool state FALSE eventIn SFBool set_boolean eventOut SFColor color_changed url "javascript: function set_boolean(bool, T) { if ( bool == false ) { return; } if ( state == true ) { color_changed = new SFColor(1,0,0); state = false; } else { color_changed = new SFColor(0,1,0); state = true; } }" } ] } ROUTE TOUCH.isActive TO CODE.set_boolean ROUTE CODE.color_changed TO STUFF.set_diffuseColor

event receipt method or function of that name called During event receipt Script nodes evaluate suitable program part when value is received by interface eventIn by computing something & updating Script node field parameters finally sending out zero or more values on its eventOuts With Java API classes & methods convert among VRML & Java datatypes classes & methods enable access to interface fields & eventOuts value & time stamp are passed to method for each eventIn With JavaScript API automatically converts among VRML & JavaScript datatypes variable is created for each interface field or eventOut value & time stamp are passed to function for each eventIn Lecture 8 Slide 5

VRML for sphere that is clickable between being red and green creates red sphere associates touch sensor with it gives script node job of acting as switch Lecture 8 Slide 6

1 de 1

08/08/2005 08:45 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/8/7+8.htm

Script Example

Prototypes

When cursor is clicked over sphere button down outputs true on sensor's isActive eventOut button up outputs false on sensor's isActive eventOut events are sent to script node's eventIn set_boolean Script node executes set_boolean() on receiving event passing event value & event's time as arguments outputing event on color_changed eventOut when value changes JavaScript function set_boolean() ignores button up event outputs red or green colour depending on parameter state flips value of persistent VRML parameter state Script nodes may be included as child of any grouping node are typically placed at end of outermost group of VRML file Script nodes can be written in JavaScript apt for short, self contained pieces of code VRML version supports VRML datatypes Java suitable for more complex programs

VRML prototype nodes enable users to define their own node types are declared inline by PROTO node are declared externally by EXTERNPROTO node EXTERNPROTO declarations supply fields, exposedFields, eventIns and eventOuts url field of VRML file where PROTO defines it PROTO declarations have the form PROTO nodeTypeName [ field exposedField eventIn eventOut ]{ nodeBody } where there may be multiple fields, eventIns and eventOuts italicised identifiers are replaced in PROTO instances IS connects PROTO interface item and nodeBody parameter. Slide 7 Lecture 8 fieldName IS interfaceItem Slide 8 fieldType fieldType eventInType fieldName fieldName eventInName defaultValue defaultValue

eventOutType eventOutName

External Authoring Interface is external API for Java applets. Lecture 8

1 de 1

08/08/2005 08:45 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/8/9+10.htm

Prototype Example

Switch Node

Prototype of click changeable coloured sphere in "ball.wrl"

#VRML V2.0 utf8 PROTO Ball [ field SFColor colour 0 1 0 field SFFloat size 1 ] { Group { children [ Shape { appearance Appearance { material DEF STUFF Material { diffuseColor IS colour } } geometry Sphere { radius IS size } }, DEF TOUCH TouchSensor {}, DEF CODE Script { field SFBool state FALSE eventIn SFBool set_boolean eventOut SFColor color_changed url "javascript: function set_boolean(bool, T) { if ( bool == false ) { return; } if ( state == true ) color_changed = new SFColor(0,0,1); else color_changed = new SFColor(1,0,0); state = ! state; }" } ] } ROUTE TOUCH.isActive TO CODE.set_boolean ROUTE CODE.color_changed TO STUFF.set_diffuseColor }

VRML nodes can be grouped by Switch node:

Switch { choice whichChoice } [ ] -1 # exposedField # exposedField MFNode SFInt32

Switch node specifies range of alternative VRML nodes in choice field renders node indexed by whichChoice field Switch example switches among displaying 3 nodes on clicking scene.
#VRML V2.0 utf8 Group { children [ DEF SWITCH Switch { choice [ Shape { appearance DEF LOOK Appearance { material Material { diffuseColor 1 0 0 } } geometry Cylinder {} }, Shape { appearance USE LOOK geometry Cone {} }, Shape { appearance USE LOOK geometry Sphere {} } ] whichChoice 0 }, DEF TOUCH TouchSensor {}, DEF CODE Script { field SFInt32 count 0 eventIn SFBool set_click eventOut SFInt32 click_changed url "javascript: function set_click(bool, T) { if ( bool == false ) { return; } count = (count + 1) % 3; click_changed = count; }" } ] } ROUTE TOUCH.isActive TO CODE.set_click ROUTE CODE.click_changed TO SWITCH.set_whichChoice

Two coloured balls using this prototype

#VRML V2.0 utf8 EXTERNPROTO Ball [ field field SFColor colour SFFloat size ] "ball.wrl"

Ball { colour 1 1 0, size 1.5 } Transform { translation 3 3 0 children Ball { colour 1 0 1, size 0.5 } }

Lecture 8

Slide 9

Switch node displays child with index given by click count. Lecture 8 Slide 10

1 de 1

08/08/2005 08:45 a.m.

http://www.macs.hw.ac.uk/cs/online/9ig2/8/11+_.htm

HUD

Object can be made to follow user's motions in scene by sensing user's navigation motions with ProximitySensor making object keep same relative position and orientation Head Up Display or HUD can create a virtual dashboard. Clicking on sphere near user controls visibility of box in scene.
#VRML V2.0 utf8 DEF PROX ProximitySensor { center 0 0 0 size 1000 1000 1000 } DEF MOVE Transform { children Transform { translation .3 -0.3 -1 # bottom right of screen scale .05 .05 .05 children [ Shape { appearance Appearance { material Material {} } geometry Sphere {} }, DEF TOUCH TouchSensor {} ] } } DEF SWAP Switch { choice [ Shape { appearance Appearance { material Material {} } geometry Box {} } ] whichChoice 0 } DEF CODE Script { field SFBool state FALSE eventIn SFBool set_state eventOut SFInt32 state_changed url "javascript: function set_state(bool, T) { if ( bool == false ) { return; } if ( state == false ) state_changed = -1; else state_changed = 0; state = ! state; }" } ROUTE TOUCH.isActive TO CODE.set_state ROUTE CODE.state_changed TO SWAP.set_whichChoice ROUTE PROX.position_changed TO MOVE.set_translation ROUTE PROX.orientation_changed TO MOVE.set_rotation

Lecture 8

Slide 11

1 de 1

08/08/2005 08:46 a.m.