1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

30
1 GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction

Transcript of 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

Page 1: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

1GR2-00

GR2Advanced Computer

GraphicsAGR

GR2Advanced Computer

GraphicsAGR

Lecture 11VRML Animation and

Interaction

Page 2: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

2GR2-00

VRML - The Story So FarVRML - The Story So Far

We have seen how to build hyperlinked, static, non-interactive 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 }

}

}

Page 3: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

3GR2-00

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

Page 4: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

4GR2-00

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

Page 5: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

5GR2-00

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

Page 6: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

6GR2-00

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

Page 7: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

7GR2-00

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

Page 8: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

8GR2-00

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

Page 9: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

9GR2-00

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

Page 10: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

10GR2-00

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

Page 11: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

11GR2-00

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

ROTATIONINTERPOL-ATOR

rotation

TRANSFORM

animation enginesensor

event event

modify geometry

Page 12: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

12GR2-00

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

Page 13: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

13GR2-00

User Activated SensorsUser Activated Sensors

Another set of sensor nodes generate events in response to user actions

A TouchSensorTouchSensor 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

Page 14: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

14GR2-00

Touch Sensor ExampleTouch 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]

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

Page 15: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

15GR2-00

Proximity SensorProximity 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

Page 16: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

16GR2-00

Proximity Sensor ExampleProximity 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

Page 17: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

17GR2-00

Other SensorsOther Sensors

Drag sensors– PlaneSensor– CylinderSensor– SphereSensor

these constrain the allowable motion

Page 18: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

18GR2-00

Collision DetectionCollision 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

Page 19: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

19GR2-00

SoundSound

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

*

location full intensity

sound fades

Page 20: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

20GR2-00

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

Page 21: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

21GR2-00

MoviesMovies

Textures can be movies rather than static images

Use the MovieTexture node...

Page 22: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

22GR2-00

User Control of VRML Worlds

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– JavaJava 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

Page 23: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

23GR2-00

ScriptingScripting

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 animationTIME

SENSOR

SCRIPTNODE

VIEWPOINT

time elapsed position

java code

Page 24: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

24GR2-00

Example of ScriptingExample 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 beassigned to eachvertex and smoothlyinterpolated

Page 25: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

25GR2-00

Example of Scripting - Dynamic Change of

Surface

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_fractioneventOut MFFloat new_heighturl:javascript<JavaScript code goes here, to createnew set of heights at grid points, based on time>}

ROUTE TIMER.fraction_changed TO ENGINE.time_fractionROUTE ENGINE.new_colour TO GRID.set_height

Page 26: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

26GR2-00

Linking Software to VRML Worlds

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

script node

VRML node

Java applet

VRML node

VRML world VRML world

Page 27: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

27GR2-00

External Authoring Interface

External Authoring Interface

Allows communication between a Java applet and a VRML world..

Here is a virtual shopping mall..

Clicking on a TouchSensorover an object sends eventto Java applet which keepsrecord of purchases

Page 28: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

28GR2-00

BrowsingBrowsing

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)

Page 29: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

29GR2-00

AuthoringAuthoring

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

Page 30: 1GR2-00 GR2 Advanced Computer Graphics AGR Lecture 11 VRML Animation and Interaction.

30GR2-00

FuturesFutures

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/vrmljava3d