Transcript Lecture 12 : VRML - Animation and Interaction

SI31
Advanced Computer Graphics
AGR
Lecture 12
VRML Animation and Interaction
si31_2001
12.1
VRML - The Story So Far

si31_2001
We have seen how
to build hyperlinked,
static, noninteractive 3D
worlds
#VRML V2.0 utf8
Shape {
geometry Cylinder {
radius
2
height
4
}
appearance Appearance {
material Material {
diffuseColor 1 0 0
specularColor 1 1 1 }
}
}
12.2
Richer Worlds

VRML97 allows the creation of much more
interesting worlds by introducing:
– interaction and animation
– multimedia
– scripting

Worlds become active
– can change over time
– can change in response to a user’s actions
si31_2001
12.3
Making Worlds Come Alive
To understand how this works we shall
create a really simple example
 We shall build a signboard that rotates
...


si31_2001
... for this we need to understand
events and sensors
12.4
Sensors and Events

A sensor 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 event
 Events are routed from one node to
another to program behaviour in the
world

si31_2001
12.5
Routing 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
Node
A
route
eventOuts
si31_2001
Node
B
eventIns
12.6
Example 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
si31_2001
12.7
Time 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
si31_2001
– set_startTime
12.8
Animation
Animation is achieved by routing time
events to an animation engine
 This engine is programmed with
keyframe values

– on receiving a time event, it calculates an
‘in-between’ value
– this gets routed to another node, typically
a transform node
si31_2001
12.9
Interpolator Nodes
These form the animation engines
 Example is Orientation 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)
si31_2001
Note: Orientation specified as angle about axis - here y-axis
12.10
Animation
Animation then achieved by routing
time events from a time sensor to the
animation engine...
 ... which then drives say a transform
node:

sensor
animation engine
modify geometry
TIME
SENSOR
ROTATION
INTERPOLATOR
TRANSFORM
time elapsed
si31_2001
event
rotation
event
12.11
Rotating Sign
DEF TURN_SIGN Transform {
rotation
0100
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
si31_2001
12.12
User Activated Sensors
Another set of sensor nodes generate
events in response to user actions
 A TouchSensor node creates an event
when you click on any sibling
geometry nodes

– siblings are brothers / sisters (ie at same
level in hierarchy)
– an eventOut called “touchTime” is
created
si31_2001
12.13
Touch Sensor Example
DEF TURN_SIGN Transform {
rotation
0100
children
[ DEF SIGN Shape {...}
DEF HIT TouchSensor{ }
]
}
DEF TIMER TimeSensor { loop FALSE } #once only
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 HIT.touchTime TO TIMER.set_startTime
ROUTE TIMER.fraction_changed TO ROTOR.set_fraction
ROUTE ROTOR.value_changed TO TURN_SIGN.set_rotation
si31_2001
12.14
Proximity Sensor
This 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

si31_2001
12.15
Proximity Sensor Example
DEF SIGN Shape {...}
DEF TIMER TimeSensor { loop FALSE } #once only
DEF SPY ProximitySensor { size 16 16 16 }
DEF LIGHT PointLight {
intensity
0
location
0 0 5}
NavigationInfo { headlight
FALSE } # turn off the browser h’light
# start clock when browser nears the sign
ROUTE SPY.enterTime TO TIMER.set_startTime
# increase the intensity from zero to one in the time cycle
ROUTE TIMER.fraction_changed TO LIGHT.set_intensity
si31_2001
12.16
Other Sensors

Drag sensors
– PlaneSensor
– CylinderSensor
– SphereSensor
these constrain the allowable motion
si31_2001
12.17
Collision Detection

VRML allows you to detect when the
viewer collides with an object
– Collision { children [ ...] }
When collision occurs, a ‘collideTime’
event is generated
 Note collision between objects NOT
detected

si31_2001
12.18
Sound

Sound node
location
full intensity
*
sound fades
– location and direction fields specify where
the sound emanates from
– source field specifies an AudioClip node...
which points at a .wav file given as a url
si31_2001
12.19
Collision + 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
si31_2001
12.20
Movies
Textures can be movies rather than
static images
 Use the MovieTexture node...

si31_2001
12.21
User Control of VRML Worlds
There are two mechanisms for
allowing user control of VRML worlds scripts and external authoring
 Both involve the execution of Java
software in association with the VRML
world

si31_2001
– Java of course is a programming
language allowing portable code to be
delivered to the browser for execution
– scripts: Java or JavaScript inside VRML
– external authoring: Java and JavaScript
outside VRML
12.22
Scripting

Script node
– allows a world creator to program their own
animation engine
– url field points to Java or JavaScript code
– events can be routed to and from script nodes
– example: viewpoint animation
TIME
SENSOR
VIEWPOINT
SCRIPT
NODE
java code
si31_2001
time elapsed
position
12.23
Example of Scripting
In the following example, the heights
on an elevation grid are animated
using a script node
 ElevationGrid node draws surface
through heights defined on a grid

Colours can be
assigned to each
vertex and smoothly
interpolated
si31_2001
12.24
Example of Scripting - Dynamic
Change of Surface
Shape{
geometry
DEF GRID ElevationGrid{
height [ ... ]
}
...
appearance
}
DEF TIMER TimeSensor { loop TRUE }
DEF ENGINE Script {
eventIn
SFFloat time_fraction
eventOut
MFFloat new_height
url:javascript
<JavaScript code goes here, to create
new set of heights at grid points, based on time>
}
ROUTE TIMER.fraction_changed TO ENGINE.time_fraction
ROUTE ENGINE.new_height TO GRID.set_height
12.25
si31_2001
Linking Software to VRML
Worlds

Script node allows
Java code to be
included within a
VRML world
script node
VRML node
VRML world
si31_2001

External Authoring
Interface (EAI) allows
a Java applet to link
to a VRML world
Java applet
VRML node
VRML world
12.26
External Authoring Interface


Allows communication
between a Java
applet and a VRML
world..
Here is a virtual
shopping mall..
si31_2001
Clicking on a TouchSensor
over an object sends event
to Java applet which keeps
record of purchases
12.27
Browsing



Traditionally...
Has been a range of
browsers to select
from
Commonly:

–
–
–
–
developed by SGI
spun-off to Cosmo
sold to Platinum
Mar 99 agreed to be
Open Source
– sold to Computer Assoc
– free
– beta


si31_2001
Not all browsers
support all
functionality...
Rapidly changing
environment
Leading product is
CosmoPlayer

Other browsers
– WorldView
– Cortona
– Blaxxun
12.28
Authoring

Variety of approaches:
– use a text editor
– use an interactive modeller
» Internet Space Builder (Parallel Graphics)
– use a higher level language to author,
then interpret
– generate dynamically from software
– generate automatically from scanner
si31_2001
12.29
Futures
Development being controlled by
Web3D Consortium
(http://www.web3d.org)
 X3D is binding of VRML to XML
 Interesting areas for research

si31_2001
– 3D user interfaces
– humanoids
– large worlds
– multi-user worlds
– integration of VRML and MPEG
– 4D navigation
12.30