17.1 si23_03 si23 introduction to computer graphics lecture 17 – vrml: a rough guide
TRANSCRIPT
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!!