How to Build X3D Web Graphics With Animation

Animation is the change of some aspect of an object over time. The ability to animate objects within a 3D scene is one of the fundamental skill sets required of the graphics programmer.

Animating objects in X3D is a straightforward process. One can design X3D scene animations to change the location and orientation of shape nodes over time. This article demonstrates the basic steps required to program animation in X3D by walking the reader through the Web 3D Consortium's "Hello X3D Authors" example.

Things You'll Need

• X3D Edit or other X3D authoring tool

Instructions

1. 

   Study this scene, in which the Text Geometry that states "Hello X3D Authors" will be animated to rotate around the 3D depiction of the Earth. The parent node of the shape being animated (Transform Node) requires a defined DEF name. In the example, the name is "SimpleGeoStationarySatellite."
   <Transform DEF='EarthCoordinateSystem'>
   ...
   <Transform DEF='SimpleGeoStationarySatellite' rotation='1 0 0 .3' scale='0.1 0.3 0.1' translation='0 0 5'>
   <Shape>
   <Appearance>
   <Material diffuseColor='0.9 0.1 0.1'/>
   </Appearance>
   <Text string='Hello X3D Authors !!' solid='true'>
   <FontStyle size='3'/>
   </Text>
   </Shape>
   </Transform>
   </Transform>

2. Understand that, in the "Hello X3D Authors" example, the orientation interpolator is used to have the words "Hello X3D Authors" rotate about the earth in the scene. The keyValue in the orientation interpolator defines the rotational position of the text shape at each key value.
   <OrientationInterpolator DEF='SpinThoseThings' key='0.00 0.25 0.50 0.75 1.00' keyValue='0 1 0 0 0 1 0 1.5708 0 1 0 3.14159 0 1 0 4.7123889 0 1 0 6.2831852'/>

3. Realize that, for all X3D animations, a trigger is required to start the animation. In this example, a touchSensor is used to allow the user to click the Earth to start the animation of the "Hello X3D Authors" text.
   <TouchSensor DEF='ClickTriggerTouchSensor' description='Click to start animation'/>

4. Add a TimeSensor to serve as the clock for the scene animation. The cycleInterval will be set to the desired duration of the animation. If an infinitely repeated animation is desired, set the loop variable to "true." In this example, the cycle interval will be set to 12 seconds and will loop infinitely.
   <TimeSensor DEF='OrbitalTimeInterval' cycleInterval='12' loop='true'/>

5. Create a route to take the touch sensor's output to the TimeSensor input to commence the animation chain.
   <ROUTE fromNode='ClickTriggerTouchSensor' fromField='touchTime' toNode='OrbitalTimeInterval' toField='startTime'/>

6. Create a route from the TimeSensor's fraction_changed field to the orientation interpolator's set_fraction field to drive the animation chain.
   <ROUTE fromNode='OrbitalTimeInterval' fromField='fraction_changed' toNode='SpinThoseThings' toField='set_fraction'/>

7. Route the orientation interpolator value_changed field to the target node, which completes the animation chain.
   <ROUTE fromNode='SpinThoseThings' fromField='value_changed' toNode='EarthCoordinateSystem' toField='set_rotation'/>

8. View the scene and click on the Earth to trigger the animation of the words "Hello X3D" authors around the Earth.

9. View the scene and click on the Earth to trigger the animation of the words 'Hello X3D' authors around the Earth.

Tips & Warnings

• Any animated scene in X3D requires two fundamental components: a clock to control the animation, and a description or control of the desired behavior over time based on the clock playback. Use of comments within the X3D markup will prevent the author or future authors from confusing scene architecture choices.

• Verify the input and output types when creating X3D routes. Mismatched types will result in scene errors or failed scene validation in X3D-Edit.

Resources

• Read this Article in Spanish
• Open-Source License Provided for Use of "Hello X3D Authors" example
• X3D Examples for Authors (Don Brutzman, Leonard Daly)
• X3D: Extensible 3D Graphics for Web Authors