Animation in VRML

1. Animation in VRML Computer Graphics I

2. Animation == bring to life • Generally any kind of moving graphics • flipbooks • cartoon films • computer animation • Sequence of single images • Movie: 24, TV: 30, Comp.: up to >100/sec. • Impression of movement >6 fps (???)

3. examples: cartoon films strategy games user interfaces presentation systems flat, within a plane less computing power needed examples: Toy story flying logos action games VRML impression of space high computing power needed for generation 2D vs. 3D animation

4. Creating 2D cartoon animation • idea > treatment > story board, sound • draw keyframes (expensive) • important or tricky phases of motion • interpolate between keyframes (cheap) • easy and straightforward phases • color and film the single frames

5. Creating 3D computer animation • idea > treatment > story board • describe keyframes explicitly • complete description of the 3D world state • interpolate between key frames • calculate state of the world for each frame • render and display/store single frames

6. Animation control methods • equations • constraints • simulation • motion hierarchies • tracking live motion • actors and behaviors

7. follows object hierarchy nested transformations motion affects all objects ‘under’ the current node wave while jumping walking smile while shaking the head Example: motion hierarchies

8. Tracking live motion • position & orientation tracking • infrared, ultrasonic, magnetic • DataGlove and DataSuit • puppets with tracked joints

9. Spline interpolation • spline = thin metal strip used to draw smoothly • natural spline interpolates control points • weights and tension at control points

10. Keyframing the Orientation • Choose rotation axis • interpolate angle about this axis • shortest path on the unit sphere

11. Keyframing the Size

12. Keyframing deformation • grab a control point • keyframe its position • deform the polygon mesh accordingly

13. Keyframing the Color • Can be done in RGB color space

14. Keyframing the virtual camera • Position • Orientation • Field of view • Depth of field

15. Keyframing the light setup • directional light • positional light • ambient light • spotlight • area light • position • direction • beam angle

16. Other things to keyframe • levels of detail • visibility • transparency, shininess • texture / bump maps • shading parameters • rendering method

17. How to create the images • Divide whole animation into single frames • Compute state of the 3D world for each frame • Render the single images • Display or store them • Usually done automatically from animation script

18. Animation languages • describe object, camera and light motions • describe property changes etc. • possibly also describe objects themselves

19. Multi-purpose languages • regular programming language with graphics extension • examples: C + OpenGL, Java + Java3D • very flexible ;-) • animator must be programmed :-(

20. Visual languages • 2-dimensional presentation of the script • visualization of time • easier to understand and manipulate :-)

21. Some animation rules • squash and stretch • avoid abrupt changes • stage objects properly • no line crossing errors

22. Animation in VRML • Nodes and fields • time & touch sensors • interpolators • routes & events • the route statement • object & motion hierarchies • other types of animation • examples, tricks & tips

23. VRML Shapes • VRML contains basic geometric shapes that can be combined to create more complex objects.

24. VRML Nodes • Shape node is a generic node for all objects in VRML. • Material node specifies the surface properties of an object. It can control what color the object is by specifying the red, green and blue values of the object.

25. VRML Nodes • There are three kinds of texture nodes that can be used to map textures onto any object: 1. ImageTexture: The most common one that can take an external JPEG or PNG image file and map it onto the shape. 2. MovieTexture: allows the mapping of a movie onto an object; can only use MPEG movies. 3. PixelTexture: simply means creating an image to use with ImageTexture within VRML.

26. A Simple VRML Scene

27. VRML • Three types of lighting can be used in a VRML world: • DirectionalLight node shines a light across the whole world in a certain direction. • PointLight shines a light from all directions from a certain point in space. • SpotLight shines a light in a certain direction from a point. • RenderMan: rendering package created by Pixar.

28. VRML • The background of the VRML world can also be specified using the Background node. • A Panorama node can map a texture to the sides of the world. A panorama is mapped onto a large cube surrounding the VRML world.

29. Box size Transform translation rotation scale ... Children[...] Nodes and fields Box { size 2 2 2 } Transform { translation 0 0 0 rotation 0 0 1 0 scale 1 1 1 children [...] }

30. Animations and Interaction • The only method of animation in VRML is by tweening - done by slowly changing an object that is specified in an interpolator node. • This node will modify an object over time, based on the six types of interpolators: color, coordinate, normal, orientation, position, and scalar. • (a) All interpolators have two nodes that must be specified: the key and keyValue. • (b) The key consists of a list of two or more numbers starting with 0 and ending with 1, defines how far along the animation is. • (c) Each key element must be complemented with a keyValue element: defines what values should change.

31. Animations and Interaction • To time an animation, a TimeSensor node should be used: • (a) TimeSensor has no physical form in the VRML world and just keeps time. • (b) To notify an interpolator of a time change, a ROUTE is needed to connect two nodes together. • (c) Most animation can be accomplished through the method of routing a TimeSensor to an interpolator node, and then the interpolator node to the object to be animated.

32. Animations and Interaction • Two categories of sensors can be used in VRML to obtain input from a user: • (a) Environment sensors: three kinds of environmental sensor nodes: VisibilitySensor, ProximitySensor, and Collision. • (b) Pointing device sensors: touch sensor and drag sensors.

33. Types of fields • Field == local variable • eventOut can send events • eventIn can receive events • exposedField can send & receive

34. TouchSensor node TouchSensor { exposedField SFBool enabled TRUE eventOut SFVec3f hitNormal_changed eventOut SFVec3f hitPoint_changed eventOut SFVec2f hitTexCoord_changed eventOut SFBool isActive eventOut SFBool isOver eventOut SFTime touchTime }

35. TimeSensor node TimeSensor { exposedField SFTime cycleInterval 1 exposedField SFBool enabled TRUE exposedField SFBool loop FALSE exposedField SFTime startTime 0 exposedField SFTime stopTime 0 eventOut SFTime cycleTime eventOut SFFloat fraction_changed eventOut SFBool isActive eventOut SFTime time }

36. PositionInterpolator node PositionInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [ ] exposedField MFVec3f keyValue [ ] eventOut SFVec3f value_changed }

37. OrientationInterpolator node OrientationInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [ ] exposedField MFRotation keyValue [ ] eventOut SFRotation value_changed }

38. ColorInterpolator node ColorInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [ ] exposedField MFColor keyValue [ ] eventOut SFColor value_changed }

39. ScalarInterpolator node ScalarInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [ ] exposedField MFFloat keyValue [ ] eventOut SFFloat value_changed }

40. CoordinateInterpolator node CoordinateInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [ ] exposedField MFVec3f keyValue [ ] eventOut MFVec3f value_changed }

41. NormalInterpolator node NormalInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [ ] exposedField MFVec3f keyValue [ ] eventOut MFVec3f value_changed }

42. DEF BLOCK Transform {...} DEF BPOS PositionInterpolator {...} translation rotation scale set_fraction ... key [...] Children[...] keyValue [...] value_changed Routes and events ROUTE BPOS.value_changed TO BLOCK.set_translation

43. TouchSensor {…} touch time time Transform {…} translation TimeSensor {…} translation PositionInterpolator {…} Box{…} How to move a block (1)

44. How to move a block (2) DEF BLOCK Transform { children [ Shape { geometry Box { } } DEF BTOUCH TouchSensor { } ] } DEF BPOS PositionInterpolator { key [0 1] keyValue [0 0 0, 5 0 0 ] } DEF BTIME TimeSensor { cycleInterval 5.0 } ROUTE BTOUCH.touchTime TO BTIME.startTime ROUTE BTIME.fraction_changed TO BPOS.set_fraction ROUTE BPOS.value_changed TO BLOCK.set_translation

45. skull jump nose hat head mouth-l mouth mouth-r eye-r body eye-l arm-l arm-r leg-l wave-r leg-r Scene graph and transformation hierarchy man

46. Combining animations DEF JUMP TimeSensor {...} DEF WAVE TimeSensor {...} ... DEF JOY TimeSensor { } ROUTE JOY.cycleTime TO JUMP.startTime ROUTE JOY.cycleTime TO WAVE.startTime

47. wave-r wave wave-l blink-r blink blink-l smile-r smile smile-l Behavior hierarchy joy jump friendly yes nod

48. Viewpoint selection DEF VFACE Viewpoint { position 0 0.5 2.5 description "View at the face” } DEF SHAKE TimeSensor{ loop FALSE cycleInterval 2.0 } ROUTE SHAKE.isActive TO VFACE.set_bind

49. Scripts • can control arbitrarily complex motions • can keep things ‘in mind’ • can help with type conversions • need to be written in Java or JavaScript • general and ugly catch-all solution

50. Movie textures DEF TS TouchSensor { } Shape { geometry IndexedFaceSet { coord Coordinate { point [ … ] } coordIndex [ … ] } appearance Appearance { texture DEF MOV MovieTexture { url “animation-1.avi” } } } ROUTE TS.touchTime TO MOV.startTime