HC20203 VRML 5 - 1
Chapter 5 – Animation in VRML
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 2
Understanding Animation and Time
 Animation is the change of something as time
progresses
 The change may be to a coordinate system’s
position, thereby causing the coordinate
system and a group of shapes built within it to
translate from one location to another as the
time progresses
 The change caused by animation can be to a
coordinate system’s orientation and scale as
well
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 3
Understanding Animation and Time



Any animation requires two elements:
 a clock to control the playback of the animation
 a description of how something changes during the
course of the animation
We can create a clock using the TimeSensor node
The node provides features for starting and stopping
the animation and controlling how quickly the
animation plays
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 4
Understanding Animation and Time



To describe the change to occur during an animation,
we use PositionInterpolator and
OrientationInterpolator nodes
To create animation, we need to use ROUTE syntax
to wire an output from a TimeSensor node to the
input of a PositionInterpolator or
OrientationInterpolator node
Once wired, the TimeSensor node’s clock can start
and event will flow from the TimeSensor node to the
Interpolator and from there to the Transform node
causing the node’s coordinate system to translate,
rotate and scale as animation plays back
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 5
Understanding Animation and Time





Time is measured either absolutely or relatively
Absolute time represents the real-world clock
For relative time, it could consider as starting an
animation at fractional time 0.0 and running to the
end at fractional time 1.0
The length of time between fractional time 0.0 and
fractional time 1.0 is independent of absolute time
A time sensor could create a time loop that cycles
from fractional time 0.0 to fractional time 1.0. Using
this feature, we could loop the animation endlessly
until we stopped the animation
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 6
Understanding Key Frame Animation
 An animation description must provide a
position or orientation for each new time as
the animation’s fractional time progresses
from 0.0 to 1.0
 The most straightforward is to use a table of
orientations, one for each possible fractional
time between 0.0 and 1.0
 Unfortunately there is infinite number of
possible fractional times between 0.0 and 1.0
making it impossible to construct this table
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 7
Understanding Key Frame Animation
 An animation description must provide a
position or orientation for each new time as
the animation’s fractional time progresses
from 0.0 to 1.0
 The most straightforward is to use a table of
orientations, one for each possible fractional
time between 0.0 and 1.0
 Unfortunately there is infinite number of
possible fractional times between 0.0 and 1.0
making it impossible to construct this table
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 8
Understanding Key Frame Animation
 Instead
we use a technique called keyframe
animation where a position or rotation is
specified for only a few key fractional times
known as key values.
 VRML will then make use of these key values
to fill in the values in between as needed. The
PositionInterpolator
and
OrientationInterpolator nodes both use a list
of key fractional times and key values to
describe an animation.
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 9
Understanding Key Frame Animation



To wire an interpolator node into animation circuit,
the fraction_changed eventOut of a time sensor is
routed to the set_fraction eventIn of the interpolator.
Each time the time sensor outputs a new fractional
time, the interpolator uses the input fractional time,
computes a new position or rotation, the outputs it via
its value_changed eventOut.
That output is then in turn wired to a Transform
node to cause the node’s coordinate system to
translate and rotate as the time sensor ticks away.
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 10
The TimeSensor Node

The TimeSensor node creates a clock that generates events to
control animations as follows:
TimeSensor
{
enabled
startTime
stopTime
cycleInterval
loop
isActive
time
cycleTime
fraction_changed
}
© TMC Computer School
TRUE
0.0
0.0
1.0
FALSE
# exposedField
# exposedField
# exposedField
# exposedField
# exposedField
# eventOut
# eventOut
# eventOut
# eventOut
SFBool
SFTime
SFTime
SFTime
SFBool
SFBool
SFTime
SFTime
SFFloat
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 11
Understanding Key Frame Animation


The value of the enabled exposed field specifies
whether the time sensor is turned on or off
 If the field value is TRUE, then the time sensor is on
and the test of the node’s field are used to control
the output of the sensor
 If the value is FALSE, then the time sensor is off
and no outputs are generated except those in
response to changing an exposed field
The value of the startTime exposed field specifies the
time at which if the sensor is enabled, it beings
outputting events via its eventOuts
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 12
Understanding Key Frame Animation



The value of the stopTime exposed field specifies the
time at which the time sensor stops output events
The value of the cycleInterval exposed field specifies
the length of time the time sensor takes to vary its
fractional time output from fractional time 0.0 to 1.0
The value of the loop exposed field specifies whether
the time sensor loops or not. If the field value is set to
TRUE, the time sensor outputs floating point
fractional time values from 0.0 to 1.0 during the cycle
interval
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 13
Understanding Key Frame Animation




The isActive eventOut outputs a single TRUE event
value when the time sensor becomes active and starts
outputting events
The time eventOut outputs an absolute time event
value continuously as long as the timesensor is
generating events
The cycleTime eventOut outputs an absolute time
event value each time the cycle starts over again
The fraction_changed eventOut outputs a fractional
floating point time value between 0.0 and 1.0 as the
time sensor progresses through a cycle
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 14
The PositionInterpolator Node

The PositionInterpolator node describes a series of
key positions available for use in an animation
PositionInterpolator
{
key
[]
keyValue
[]
set_fraction
value_changed
}
© TMC Computer School
# exposedField
# exposedField
# eventIn
# eventOut
MFFloat
MFVec3f
SFFloat
SFVec3f
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 15
The PositionInterpolator Node



The value of the key exposed field specifies a list of
key fractional floating point times and typically the
range of these time falls between 0.0 and 1.0
The keyValue exposed field specifies a list of key
positions.
 Each key position is a group of 3 values containing
an X, a Y and a Z floating value making up a 3D
coordinate or translation distance
The set_fraction eventIn is used in wiring a route
from the fraction_changed eventOut of a TimeSensor
node
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 16
The OrientationInterpolator Node

The OrientationInterpolator node describes a series
of key rotations available for use in an animation
OrientationInterpolator
{
key
[]
keyValue
[]
set_fraction
value_changed
}
© TMC Computer School
# exposedField
# exposedField
# eventIn
# eventOut
MFFloat
MFRotation
SFFloat
SFRotation
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 17
The OrientationInterpolator Node
 The value of key is defined as before.
 The keyValue exposed field specifies a list of
key rotations.
 The key fractional times and rotations are
used together so that the first key fractional
time specifies the time for the first key
rotation and so on
 The rest of the fields work exactly as
mentioned in the prior section
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 18
Animating Position
#VRML V2.0 utf8
Group {
children [
# Moving box
DEF Cube Transform {
children Shape {
appearance Appearance {
material Material { }
}
geometry Box { size 1.0 1.0 1.0 }
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 19
Animating Position
# Animation clock
DEF Clock TimeSensor {
cycleInterval 4.0
loop TRUE
},
# Animation path
DEF CubePath PositionInterpolator {
key [
0.00, 0.11, 0.17, 0.22,
0.33, 0.44, 0.50, 0.55,
0.66, 0.77, 0.83, 0.88,
0.99
]
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 20
Animating Position
keyValue [
0.0 0.0 0.0, 1.0 1.96 1.0,
1.5 2.21 1.5, 2.0 1.96 2.0,
3.0 0.0 3.0, 2.0 1.96 3.0,
1.5 2.21 3.0, 1.0 1.96 3.0,
0.0 0.0 3.0, 0.0 1.96 2.0,
0.0 2.21 1.5, 0.0 1.96 1.0,
0.0 0.0 0.0
]
}
]
}
ROUTE Clock.fraction_changed TO CubePath.set_fraction
ROUTE CubePath.value_changed TO Cube.set_translation
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 21
Animating Rotation
#VRML V2.0 utf8
Group {
children [
# Rotating cylinder
DEF Column Transform {
rotation 0.0 0.0 1.0 0.0
children Shape {
appearance Appearance {
material Material { }
}
geometry Cylinder {
height 1.0
radius 0.2
}
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 22
Animating Rotation
# Animation clock
DEF Clock TimeSensor {
cycleInterval 4.0
loop TRUE
},
# Animation path
DEF ColumnPath OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
0.0 0.0 1.0 0.0,
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
}
]
}
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 23
Animating Rotation
ROUTE Clock.fraction_changed TO ColumnPath.set_fraction
ROUTE ColumnPath.value_changed TO Column.set_rotation
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 24
Animating Scale
#VRML V2.0 utf8
Group {
children [
# Pulsing ball
DEF Ball Transform {
children Shape {
appearance Appearance {
material Material { }
}
geometry Sphere { }
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 25
Animating Scale
# Animation clock
DEF Clock TimeSensor {
cycleInterval 2.0
loop TRUE
},
# Animation path
DEF BallPath PositionInterpolator {
key [ 0.0, 0.20, 0.65, 1.0 ]
keyValue [
1.0 1.0 1.0,
1.5 1.5 1.5,
1.1 1.1 1.1,
1.0 1.0 1.0,
]
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 26
Animating Scale
}
]
}
ROUTE Clock.fraction_changed TO BallPath.set_fraction
ROUTE BallPath.value_changed TO Ball.set_scale
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 27
Animating Multiple Shapes using one
Interpolator
#VRML V2.0 utf8
Group {
children [
# Moving box
DEF Cube1 Transform {
children DEF ACube Shape {
appearance Appearance {
material Material { }
}
geometry Box { size 1.0 1.0 1.0 }
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 28
Animating Multiple Shapes using one
Interpolator
Transform {
translation -2.0 0.0 0.0
children DEF Cube2 Transform {
children USE ACube
}
},
Transform {
translation 2.0 0.0 0.0
children DEF Cube3 Transform {
children USE ACube
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 29
Animating Multiple Shapes using one
Interpolator
# Animation clock
DEF Clock TimeSensor {
cycleInterval 4.0
loop TRUE
},
# Animation path
DEF CubePath PositionInterpolator {
key [
0.00, 0.11, 0.17, 0.22,
0.33, 0.44, 0.50, 0.55,
0.66, 0.77, 0.83, 0.88,
0.99
]
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 30
Animating Multiple Shapes using one
Interpolator
keyValue [
0.0 0.0 0.0, 1.0 1.96 1.0,
1.5 2.21 1.5, 2.0 1.96 2.0,
3.0 0.0 3.0, 2.0 1.96 3.0,
1.5 2.21 3.0, 1.0 1.96 3.0,
0.0 0.0 3.0, 0.0 1.96 2.0,
0.0 2.21 1.5, 0.0 1.96 1.0,
0.0 0.0 0.0
]
}
]
}
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 31
Animating Multiple Shapes using one
Interpolator
ROUTE Clock.fraction_changed TO CubePath.set_fraction
ROUTE CubePath.value_changed TO Cube1.set_translation
ROUTE CubePath.value_changed TO Cube2.set_translation
ROUTE CubePath.value_changed TO Cube3.set_translation
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 32
Using Multiple Interpolators
#VRML V2.0 utf8
Group {
children [
# Three rotating bars
DEF Bar1 Transform {
children Shape {
appearance DEF White Appearance {
material Material { }
}
geometry Box { size 1.5 0.2 0.2 }
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 33
Using Multiple Interpolators
DEF Bar2 Transform {
children Shape {
appearance USE White
geometry Box { size 0.2 1.5 0.2 }
}
},
DEF Bar3 Transform {
children Shape {
appearance USE White
geometry Box { size 0.2 0.2 1.5 }
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 34
Using Multiple Interpolators
# Animation clock
DEF Clock TimeSensor {
cycleInterval 4.0
loop TRUE
},
# Animation paths, one for each bar
DEF BarPath1 OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
0.0 0.0 1.0 0.0,
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 35
Using Multiple Interpolators
DEF BarPath2 OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
1.0 0.0 0.0 0.0,
1.0 0.0 0.0 3.14,
1.0 0.0 0.0 6.28
]
},
DEF BarPath3 OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
0.0 1.0 0.0 0.0,
0.0 1.0 0.0 3.14,
0.0 1.0 0.0 6.28
]
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 36
Using Multiple Interpolators
}
]
}
ROUTE Clock.fraction_changed TO BarPath1.set_fraction
ROUTE Clock.fraction_changed TO BarPath2.set_fraction
ROUTE Clock.fraction_changed TO BarPath3.set_fraction
ROUTE BarPath1.value_changed TO Bar1.set_rotation
ROUTE BarPath2.value_changed TO Bar2.set_rotation
ROUTE BarPath3.value_changed TO Bar3.set_rotation
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 37
Using Multiple Time Sensors
#VRML V2.0 utf8
Group {
children [
# Stationary Sun
Shape {
appearance DEF White Appearance {
material Material { }
}
geometry Sphere { }
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 38
Using Multiple Time Sensors
# Several orbiting planets
DEF Planet1 Transform {
translation 2.0 0.0 0.0
center -2.0 0.0 0.0
children Shape {
appearance USE White
geometry Sphere { radius 0.2 }
}
},
DEF Planet2 Transform {
translation 3.0 0.0 0.0
center -3.0 0.0 0.0
children Shape {
appearance USE White
geometry Sphere { radius 0.3 }
}
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 39
Using Multiple Time Sensors
DEF Planet3 Transform {
translation 4.0 0.0 0.0
center -4.0 0.0 0.0
children Shape {
appearance USE White
geometry Sphere { radius 0.5 }
}
},
# Animation clocks, one per planet
DEF Clock1 TimeSensor {
cycleInterval 2.0
loop TRUE
},
DEF Clock2 TimeSensor {
cycleInterval 3.5
loop TRUE
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 40
Using Multiple Time Sensors
DEF Clock3 TimeSensor {
cycleInterval 5.0
loop TRUE
},
# Animation paths, one per planet
DEF PlanetPath1 OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
0.0 0.0 1.0 0.0,
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
},
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 41
Using Multiple Time Sensors
DEF PlanetPath2 OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
0.0 0.0 1.0 0.0,
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
},
DEF PlanetPath3 OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
0.0 0.0 1.0 0.0,
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
}
]
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING
HC20203 VRML 5 - 42
Using Multiple Time Sensors
ROUTE Clock1.fraction_changed TO PlanetPath1.set_fraction
ROUTE Clock2.fraction_changed TO PlanetPath2.set_fraction
ROUTE Clock3.fraction_changed TO PlanetPath3.set_fraction
ROUTE PlanetPath1.value_changed TO Planet1.set_rotation
ROUTE PlanetPath2.value_changed TO Planet2.set_rotation
ROUTE PlanetPath3.value_changed TO Planet3.set_rotation
© TMC Computer School
HIGHER DIPLOMA IN COMPUTING