1 / 30

Creating Interactive VRML Worlds: Animation and Event Handling

In this lecture, we explore the capabilities of VRML97 for creating interactive 3D worlds. Beyond static scenes, VRML allows for animation, multimedia, and scripting, enabling dynamic environments that respond to user actions. We cover the concept of sensors, such as TimeSensor and TouchSensor, which generate events that trigger changes in the world. Learn how to build a simple rotating signboard, understand event routing between nodes, and implement user-activated sensors to create a rich, interactive experience in virtual reality.

menora
Télécharger la présentation

Creating Interactive VRML Worlds: Animation and Event Handling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GR2Advanced Computer GraphicsAGR Lecture 11 VRML Animation and Interaction

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

  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 user’s 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_rotation

  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] 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

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

  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. VIEWPOINT SCRIPT NODE TIME SENSOR java code time elapsed position 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{ 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_colour TO GRID.set_height

  26. 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 Linking Software to VRML Worlds Java applet script node VRML node VRML node VRML world VRML world

  27. Allows communication between a Java applet and a VRML world.. Here is a virtual shopping mall.. External Authoring Interface Clicking on a TouchSensor over an object sends event to Java applet which keeps record of purchases

  28. 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) Browsing

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

More Related