17.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 17 – VRML: A Rough Guide.

17.1Si23_03

SI23Introduction to Computer

Graphics

SI23Introduction to Computer

Graphics

Lecture 17 – VRML: A Rough Guide

17.2Si23_03

Course OutlineCourse Outline

ImageDisplay

URLGIMP

colour

2D vectorgraphics

URL SVGViewer

lines,areas

graphicsalgorithms

interaction

VRMLviewer

3DGraphics

URL

surfaces

viewing, shading

GraphicsProgramming

OpenGLAPI

animation

Graphics programming– Using

OpenGL with C, C++

17.3Si23_03

Good Ideas are SimpleGood Ideas are Simple

Realization 1:– Hypertext + Internet = World Wide Web

Realization 2:– Adding images makes pages more

interesting Realization 3:

– Images are pictures taken by the publisher - why not send 3D scenes and allow the user to take the picture!

VRML: Virtual Reality Modelling Language– a language to describe 3D worlds - for the

Web

17.4Si23_03

VRMLVRML

AUTHORINGPROCESS VRML

file

server

INTERNET

client

VRMLBROWSER

x-world/x-vrml

.wrl

Text editorModelling tool

Browser plug-in:eg Cortona

17.5Si23_03

A VRML FileA VRML File

VRML file consists of:

header nodes

– ‘Shape’ is the generic geometric node

– specific objects such as cylinders and spheres

– operations such as transformations

fields– parameters of

nodes

#VRML V2.0 utf8Shape {

geometry Cylinder {

radius3height 6

}}

17.6Si23_03

As Seen By A BrowserAs Seen By A Browser

#VRML V2.0 utf8

Shape {

geometry Cylinder {

radius2

height 4

}

}

17.7Si23_03

Adding Colour to the Scene

Adding Colour to the Scene

#VRML V2.0 utf8

Shape {

geometry Cylinder {

radius 2

height 4

}

appearance Appearance {

material Material {

diffuseColor 1 0 0

specularColor 1 1 1 }

}

}

17.8Si23_03

Advantages of VRMLAdvantages of VRML

Transferring a 3D model - rather than a 2D image - to the browser has great advantages– viewer can choose how to look at

the model - or world– viewer can navigate the world– file size can often be much less

17.9Si23_03

VRML - The EvolutionVRML - The Evolution

Original brainwave - VR for the Web– Mark Pesce and Tony Parisi - early 1994

VRML 1.0– practical realisation based on Open Inventor,

late 1994 (Gavin Bell - SGI)– static, non-interactive worlds

VRML97 - ISO Standard– adds object behaviours and interaction to allow

creation of dynamicdynamic worlds– Gavin Bell, Rik Carey and Chris Marrin

2003 - updating ISO standard– Reworking as XML encoding (X3D)– Leading figure is Don Brutzman (US Navy

Postgraduate College)

17.10Si23_03

Each node is drawn within its own local co-ordinate system..

..and can be scaled, rotated, translated by a modelling transformation..

.. here a Cylinder, Sphere and Cone have been positioned with modelling transformations

Co-ordinate SystemsCo-ordinate Systems

x

z

y

17.11Si23_03

Modelling TransformationsModelling Transformations

Transform is a VRML node - treated just like an object

It applies to a group of children nodes– Here a cylinder is

scaled by factor of 5 in x-direction, and 0.5 in y-direction

#VRML V2.0 utf8

Transform{

scale 5.0 0.5 1.0

children [

Shape {

geometry Cylinder {

radius 2

height 4

}

appearance Appearance {

material Material {

diffuseColor 1 0 0

specularColor 1 1 1 }

} } ] }

17.12Si23_03

Hierarchical StructureHierarchical Structure

#VRML V2.0 utf8

Transform{

scale 5.0 0.5 1.0

children [

Shape {

geometry Cylinder {

radius 2

height 4

}

appearance Appearance {

material Material {

diffuseColor 1 0 0

specularColor 1 1 1 }

} } ] }

TRANSFORM

SHAPE

parent

child

17.13Si23_03

Hierarchical StructureHierarchical Structure

This generalises to allow nodes to appear in a hierarchy

This is known as the VRML scene scene graphgraph

This is how VRML does its modelling transformations

TRANSFORM

SHAPE TRANSFORM

SHAPE SHAPE

17.14Si23_03

Polygonal SurfacesPolygonal Surfaces

The general primitive for drawing polygonal surfaces is:– IndexedFaceSet– coord field lists

the points– coordIndex

describes the polygons

Shape{geometry IndexedFaceSet {

coord Coordinate {point [ 17.5 11.2 -

1.2,17.5 15.0 -

1.2,… ]}

coordIndex [ 0 1 2 3 -1,4 1 0 5 -1,…]

}}

17.15Si23_03

InstancesInstances

A node can be given a ‘name’ and then used multiple times - with different transformations applied to each

DEF kwb Shape {...} gives it a name

USE kwb allows it to be included at other points in the scene graph

17.16Si23_03

AnchorsAnchors

A piece of geometry can act as a link to another URL

17.17Si23_03

TexturesTextures

Texture mapping: Images can be mapped to geometry to provide texturing

VRML looks like:Shape{

geometry Sphere { }

appearance Appearance{

texture ImageTexture{

url “http://..../kwb.gif”}

17.18Si23_03

LightsLights

VRML includes:– DirectionalLight– PointLight– SpotLight

Note # sign is a comment

Example:

PointLight{

on TRUE

intensity 0.75

color 1 0 0 #red

location 0 0 0

radius 100

}

17.19Si23_03

Richer WorldsRicher Worlds

VRML97 allows the creation of much more interesting worlds by introducing:– interaction and animation– multimedia– scripting

Worlds become activeactive– can change over time– can change in response to a user’s

actions

17.20Si23_03

Making Worlds Come AliveMaking Worlds Come Alive

To understand how this works we shall create a really simple example

We shall build a signboard that rotates ...

... for this we need to understand eventsevents and sensorssensors

17.21Si23_03

Sensors and EventsSensors and Events

A sensorsensor is a type of node that generates data within the world - as the browser navigates it– eg TimeSensor – eg TouchSensor

Data generated within a node is called an eventevent

Events are routedrouted from one node to another to program behaviour in the world

17.22Si23_03

Routing of EventsRouting of Events

Each node has a specified list of events associated with it– eg TimeSensor has time events

Divided into eventOuts and eventIns– a node can receive eventIns– a node can send eventOuts

Routes assign eventOut of one node to eventIn of another node

NodeA

NodeB

route

eventOuts eventIns

17.23Si23_03

Example of RoutingExample of Routing

DEF OBJECT Shape { .. }

DEF LIGHT PointLight { .. }

DEF TIMER TimeSensor { .. }

DEF SWITCH TouchSensor { .. }

# start the clock when someone presses dimmer switch

ROUTE SWITCH.touchTime TO TIMER.set_startTime

# as the clock ticks, change the intensity of light in the room

ROUTE TIMER.fraction_changed TO LIGHT.set_intensity

17.24Si23_03

Time SensorTime Sensor

A Time Sensor generates events as the clock ticks

Fields include:– start time (secs) [0 is default = midnight, 1/1/1970]– cycle time (secs) [1 is default]– loop (TRUE/FALSE)

EventOuts include:– current time– fraction_changed (fraction of current cycle)

EventIn includes – set_startTime

17.25Si23_03

AnimationAnimation

Animation is achieved by routing time events to an animation animation engine engine

This engine is programmed with keyframe valueskeyframe values– on receiving a time event, it

calculates an ‘in-between’ value– this gets routed to another node,

typically a transform node

17.26Si23_03

Interpolator NodesInterpolator Nodes

These form the animation engines Example is Orientation InterpolatorOrientation Interpolator

OrientationInterpolator {

key [0, 0.5, 1]

keyValue [0 1 0 0, 0 1 0 3.14, 0 1 0 6.28] }

– EventIn

set_fraction(eg 0.25)– EventOut

value_changed (eg 0 1 0 1.57)Note: Orientation specified as angle about axis - here y-axis

17.27Si23_03

AnimationAnimation

Animation then achieved by routing time events from a time sensor to the animation engine...animation engine...

... which then drives say a transform node:

TIMESENSOR

time elapsed

ORIENTATIONINTERPOL-ATOR

rotation

TRANSFORM

animation enginesensor

event event

modify geometry

17.28Si23_03

Rotating SignRotating Sign

DEF TURN_SIGN Transform {

rotation 0 1 0 0

children [ DEF SIGN Shape {...} ] }

DEF TIMER TimeSensor { loop TRUE } #continuous

DEF ROTOR OrientationInterpolator {

key [0, 0.5 1.0]

keyValue [0 1 0 0, 0 1 0 3.14 0 1 0 6.28]

#rotate twopi in a cycle

}

ROUTE TIMER.fraction_changed TO ROTOR.set_fraction

ROUTE ROTOR.value_changed TO TURN_SIGN.set_rotation

17.29Si23_03

Proximity SensorCollision DetectionProximity Sensor

Collision Detection

Proximity sensor acts as a detector as the viewer enters a region– It generates events on entry and exit– You can use this for example to turn

on a light as someone enters a room VRML allows you to detect when

the viewer collides with an object– When collision occurs, a ‘collideTime’

event is generated– Note collision between objects NOT

detected

17.30Si23_03

Collision + Sound ExampleCollision + Sound Example

DEF COLLIDE Collision {

children [ DEF SIGN Shape { .. } ]

DEF TUNE Sound {

source DEF CLASSIC AudioClip {

url "http://.....wav"}

}

ROUTE COLLIDE.collideTime TO CLASSIC.set_startTime

17.31Si23_03

Applications - Web-based Visualization

Applications - Web-based Visualization

Air quality visualization service

User enters request on form

CGI script runs IRIS Explorer on server

Visualization returned as VRML

Try it at:– cspcx40.leeds.ac.u

k/aqual

17.32Si23_03

Applications - Medical Visualization

Applications - Medical Visualization

Increasingly VRML is being used for simple surgical simulations

Look at:– www.nextd.com– www.comp.leeds.ac.u

k/ vis/ying/simulators/ trigeminal

17.33Si23_03

Applications - Maps and Architectural Walkthroughs

Applications - Maps and Architectural Walkthroughs

Campus maps were an early VRML application

Interior design simulations– high quality

rendering is possible

Virtual cities are appearing– Bath– Berlin .. through the

ages

17.34Si23_03

BrowsingBrowsing

Traditionally... Has been a range of

browsers to select from

Commonly:– free– beta

Not all browsers support all functionality...

Rapidly changing environment

Leading product is Cortona– But Windows only

Other browsers– WorldView– CosmoPlayer– Blaxxun– Vrmlview on linux

17.35Si23_03

Information About VRMLInformation About VRML

Web3D Consortium– http://www.web3d.org– links to specifications and resources

Web3D Information– http://web3d.about.com/compute/

web3d Tutorials include:

– Floppy’s guide: www.vapourtech.com/vrmlguide

Many, many examples:– eg www.intoronto.com

17.36Si23_03

ConclusionsConclusions

VRML brings 3D dynamic worlds to the Internet community

Easy to learn, easy to use Variety of application areas Still evolving

– EAI (to link with Java applets), MPEG-4 (to include 3D in movies), XML ….

PS One of the first VRML browsers was written by Craig Hart, in his Leeds MSc project, in summer 1995!!