GR2 Advanced Computer Graphics AGR

1
GR2Advanced Computer GraphicsAGR

• Lecture 11
• VRML Animation and Interaction

2
VRML - The Story So Far
VRML V2.0 utf8 Shape geometry Cylinder
radius 2 height 4 appearance
Appearance material Material diffuseColor
1 0 0 specularColor 1 1 1

• We have seen how to build hyperlinked, static,
  non-interactive 3D worlds

3
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 users actions

4
Making 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 events and
  sensors

5
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

6
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

route
Node A
Node B
eventOuts
eventIns
7
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
8
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
• set_startTime

9
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

10
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)

Note Orientation specified as angle ??about axis
- here y-axis
11
Animation

• Animation then achieved by routing time events
  from a time sensor to the animation engine...
• ... which then drives say a transform node

animation engine
modify geometry
sensor
ROTATIONINTERPOL- ATOR
TRANSFORM
TIME SENSOR
time elapsed
rotation
event
event
12
Rotating 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_rotatio
  n

13
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

14
Touch Sensor Example
DEF TURN_SIGN Transform rotation 0 1 0
0 children DEF SIGN Shape ... DEF HIT
TouchSensor DEF TIMER TimeSensor
loop FALSE once only DEF ROTOR
OrientationInterpolator key 0, 0.5, 1.0 k
eyValue 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
15
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

16
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 hlight 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
17
Other Sensors

• Drag sensors
• PlaneSensor
• CylinderSensor
• SphereSensor
• these constrain the allowable motion

18
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

19
Sound
location
full intensity

• Sound node
• 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

sound fades
20
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

21
Movies

• Textures can be movies rather than static images
• Use the MovieTexture node...

22
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
• 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

23
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

24
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
25
Example of Scripting - Dynamic Change of Surface
Shape geometry DEF GRID ElevationGrid heigh
t ... appearance ... DEF TIMER
TimeSensor loop TRUE DEF ENGINE Script
eventIn SFFloat time_fraction eventOut MFFlo
at new_height urljavascript ltJavaScript code
goes here, to create new set of heights at grid
points, based on timegt ROUTE
TIMER.fraction_changed TO ENGINE.time_fraction ROU
TE ENGINE.new_colour TO GRID.set_height
26
Linking Software to VRML Worlds

• Script node allows Java code to be included
  within a VRML world

• External Authoring Interface (EAI) allows a Java
  applet to link to a VRML world

Java applet
script node
VRML node
VRML node
VRML world
VRML world
27
External Authoring Interface

• Allows communication between a Java applet and a
  VRML world..
• Here is a virtual shopping mall..

Clicking on a TouchSensor over an object sends
event to Java applet which keeps record of
purchases
28
Browsing

• Has been a range of browsers to select from
• Commonly
• free
• beta
• Not all browsers support all functionality...
• Rapidly changing environment

• Leading product is CosmoPlayer
• developed by SGI
• spun-off to Cosmo
• sold to Platinum
• yesterday (sic) agreed to be Open Source
• Other players
• Sony (CommunityPlace)

29
Authoring

• Variety of approaches
• use a text editor
• use an interactive modeller
• Cosmo Worlds (SGI - Cosmo- Platinum-??)
• Caligari truespace3
• use a higher level language to author, then
  interpret
• generate dynamically from software
• generate automatically from scanner

30
Futures

• Development being controlled by VRML Consortium
  (http//www.vrml.org)
• Plans underway to develop X3D - or VRML2000
• Interesting areas for research
• 3D user interfaces
• large worlds
• multi-user worlds
• integration of VRML and MPEG
• 4D navigation
• Eye on web site http//www.scs.leeds.ac.uk/vrmlja
  va3d