1. Extensible 3D (X3D) Graphics Examples Don Brutzman Web3D 2007, Perugia Italy, 15 April 2007 Naval Postgraduate School Monterey California USA brutzman@nps.edu

2. Web3D 2007 Symposium Sunday-Thursday 15-19 April 2007 University of Perugia, Umbria Italy Sponsored by ACM SIGGRAPH in cooperation with EuroGraphics and Web3D Consortium http://www.web3D.org/web3d2007

3. Session 1: X3D Introduction X3D Software Development Kit (SDK) Installing X3D-Edit and Examples Installing Xj3D and an X3D Plugin History, Goals, Development, Capabilities Chapter 1: Technical Overview X3D for Web Authors, Don Brutzman and Leonard Daly, Morgan Kaufmann Publishers Current Working Groups and Activities

4. Session 2: X3D Examples Chapter 2: Geometry 1, Primitive Shapes Chapter 3: Grouping Chapter 4: Viewing and Navigation Chapter 5: Appearance, Materials, Textures Chapter 6: Geometry 2, Points Lines Polygons Chapter 7: Event Animation Chapter 8: User Interactivity

5. Session 3: X3D Examples Chapter 9: Event Utilities and Scripting Chapter 10: Geometry 3, Geometry2D Chapter 11: Lighting and Environment Chapter 12: Environment Sensors Chapter 13: Geometry 4, Triangles Chapter 14: Prototypes Chapter 15: Metadata (online only)

6. Session 4: Scene Access Interface (SAI) Alan Hudson, Yumetech Installing Xj3D Examples directory Running in Netbeans

7. X3D Examples Chapter by chapter, from X3D for Web Authors

8. Chapter 1: Technical Overview When we mean to build, we first survey the plot, then draw the model. —William Shakespeare, Henry IV Part II Act 1 Scene 2 Chapter 1 is provided online.

9. Chapter 2: Geometry 1, Primitive Shapes Dorothy in Oz: “Toto, I’ve a feeling we’re not in Kansas anymore.” —L. Frank Baum, Wizard of Oz, 1939 Box Cone Cylinder Sphere Text

10. Geometry Primitives Primitives are simple geometric constructs Shape, geometry, Appearance, Material pattern Browsers decide implementation details, including tessellation resolution

11. Chapter 2: Geometry 1, Primitive Shapes

12. X3D Specification Diagrams

13. Chapter 3: Grouping A Working Group is a technical committee that researches and proposes solutions to specific technical problems relating to X3D. —Web3D Consortium Inline Group StaticGroup LOD (level of detail) Switch Transform

14. Coordinate Systems Right hand rule for X Y Z order Y axis is up Correspondence: North, Up, East Accept no substitutes! or at least realign them

15. Right-hand rule rules! First three fingers of right hand must align with the X Y Z axes, in that order Right hand rule also provides direction of positive rotation about an axis

16. Transforming shapes

17. LOD.jpg Near view Far view Level of detail: LOD node Range array values are suggested transition distances containerField name is children, not level

18. Switch node selects among children Note whichChoice index starts at 0; -1 means none Child-node containerField name is children, not choice

19. Chapter 4: Viewing and Navigation But the eyes, though they are no sailors, will never be satisfied with any model, however fashionable, which does not answer all the requisitions of art. —Henry David Thoreau, 1849 Viewpoint NavigationInfo Anchor Billboard Collision

20. Viewpoints

21. Billboard

22. NavigationInfo avatarSize dimensions

23. Binding stack example timeline1 t 0. The initial loading of scene has first active and bound to the top of the binding stack. Other viewpoints are off the binding stack. If no viewpoints are provided in the scene, then the default defined in the X3D Specification is used. t 1. When the user selects View2 from the viewpoint list, it receives a set_bind true event and goes to the top of the binding stack. View2 also issues an isBound true event, and View1 issues an isBound false event as it moves down the stack. t 2. Similar to the previous transitions in step t1, View3 receives a set_bind="true" event and responds with an isBound true event, while View2 issues an isBound false event and pushes View1 further down the stack. t 3. View3 receives a set_bind false event, triggering a corresponding isBound false event and dropping off the stack completely. Because View2 is the next node on the binding stack, it pops to the top to become the active Viewpoint node. View2 also issues an isBound true event.

24. Binding stack example timeline2 t 4. The user now selects View1 from the browser’s viewpoint list, so View1 receives a set_bind true event and sends a corresponding isBound true event. View2 is no longer bound, and is pushed down the binding stack. t 5. If View2 receives a set_bind false event while on the binding stack but unbound, and as a result, it is taken completely off the binding stack. t 6. View1 is now removed off the binding stack via a set_bind false event, leaving no other defined Viewpoint nodes on the stack. t 7. With no Viewpoint nodes remaining on the stack to bind, default viewpoint values are used:. The user then selects the previously unbound View4 from the viewpoint list. t 8. View4 remains as the bound viewpoint with no further viewpoints remaining on the stack.

25. Binding stack example timeline3

26. Chapter 5: Appearance, Materials, Textures Things are not always as they appear. Appearance Material ImageTexture MovieTexture PixelTexture TextureTransform

27. Chapter 6: Geometry 2, Points Lines Polygons Drawing is a struggle between nature and the artist, in which the better the artist understands the intentions of nature, the more easily he will triumph over it. For him it is not a question of copying, but of interpreting in a simpler and more luminous language. —Charles Baudelaire, On the Ideal and the Model, 1846 Color ColorRGBA Coordinate CoordinateDouble PointSet LineSet IndexedLineSet IndexedFaceSet ElevationGrid Extrusion

28. Convex and concave polygons Mnemonic: concave polygons have a cavity

29. colorPerVertex examples

30. LineSet, IndexedLineSet, IndexedPointSet

31. ElevationGrid nonplanar quadrilaterals Ambiguous definition is unavoidable for this geometric representation Usually not a problem; either masked or minor

32. Extrusion SCP: spine-aligned cross-section plane

33. Extrusions with crossSection visible

34. Extrusion

36. Chapter 7: Event Animation If it ain’t moving, it ain’t 3D. —Andy van Dam, SIGGRAPH pioneer, Brown University, Providence Rhode Island TimeSensor ScalarInterpolator ColorInterpolator PositionInterpolator PositionInterpolator2D OrientationInterpolator NormalInterpolator CoordinateInterpolator CoordinateInterpolator2D

37. Event, behavior, ROUTE defined Event = time-stamped value going over a ROUTE Behavior = changing a field value in a node ROUTE connection enables the output field of one node to stimulate input field of another node Field type and accessType must both match

38. X3D simple types, default values1 SFBoolSingle-Field boolean value false (XML) FALSE (VRML) MFBoolMultiple-Field boolean arrayEmpty list SFColorSingle-Field color, RGB0 0 0 MFColorMultiple-Field color array RGBEmpty list SFColorRGBASingle-Field color, RGBA0 0 MFColorRGBAMultiple-Field color array RGBEmpty list

39. X3D simple types, default values2 SFInt32Single-Field 32-bit integer value0 MFInt32Multiple-Field 32-bit integer arrayEmpty list SFFloatSingle-Field single-precision float0.0 MFFloatMultiple-Field single-precision arrayEmpty list SFDoubleSingle-Field double-precision float0.0 MFDoubleMultiple-Field double-precision arrayEmpty list

40. X3D simple types, default values3 SFRotationSingle-Field rotation axis-angle value0 1 0 0 MFRotationMultiple-Field rotation axis-angle arrayEmpty list SFStringSingle-Field string value Empty string ̎̎ ̎ MFStringMultiple-Field string arrayEmpty list SFTimeSingle-Field time value -1 sentinel (no time) MFTimeMultiple-Field time arrayEmpty list

41. X3D simple types, default values4 SFVec2f/SFVec2d Single-Field vector of 2-float/2-double values 0 MFVec2f/MFVec2d Multiple-Field vector array of 2-float/2-double values Empty list SFVec3f/SFVec3d Single-Field vector of 3-float/3-double values 0 0 0 MFVec3f/MFVec3d Multiple-Field vector array of 3-float/3-double values Empty list

42. accessType values X3DVRML97 inputOnlyeventIn outputOnlyeventOut initializeOnlyfield inputOutputexposedField

43. TimeSensor Output time is an SFTime ramp function ranging [0,1] that repeats every cycleInterval seconds

44. Designing animation chains X3D can be imposing, there are many nodes Nevertheless a simple design pattern is used for nearly every kind of animation This event ROUTE pattern enables you to expertly animate most X3D scene behaviors

45. 10-step design of animation chains,1 1. Pick target. Pick node and target field to animate (i.e., field that receives changing animation values). 2. Name target. Provide a DEF label for the node of interest, giving it a name. 3. Check animation type. Determine if the target field is a floating-point type: SFFloat, SFVec3f, MFVec3f, SFColor, and so on. The target field is either singleton SF type or array MF type. In the X3D type-naming convention, SF means Single Field, and MF means Multiple Field. Check target field accessType is inputOnly or inputOutput.

46. 10-step design of animation chains,2 4. Determine whether Sequencer or Script. If the target type is an SFBool or SFInt32, use a sequencer node as event source. If the target type is an SFNode or MFNode, use a Script node as the event source. 5. Determine if Interpolator. If you are not using a sequencer or Script node, determine corresponding Interpolator which produces that type of value_changed output. Example: PositionInterpolator produces SFVec3f value_changed events.

47. 10-step design of animation chains,3 6. Triggering sensor. If desired, add a sensor node at the beginning of the chain to provide the appropriate SFTime or SFBool triggering input to start the animation. Sometimes the triggering event is an output from another animation chain. 7. TimeSensor clock. Add a TimeSensor as the animation clock, then set its cycleInterval field to the desired duration interval of animation. Set loop='false' if an animation only runs once at certain specific times. Set loop='true' if it loops repeatedly.

48. 10-step design of animation chains,4 8. Connect trigger. ROUTE sensor or trigger node’s output field to the TimeSensor input in order to start the animation chain. 9. Connect clock. ROUTE the TimeSensor fraction_changed field to the interpolator (or sequencer) node's set_fraction field in order to drive the animation chain. 10. Connect animation output. ROUTE the interpolator, sequencer, or Script node's value_changed field to target node, field of interest in order to complete the animation chain.

49. Hello X3D Authors showing ROUTEs

50. Hello X3D Authors 10-step process

51. Interpolation Interpolation is linear averaging applied 2 ways: first across time axis, then across value axis

52. Linear Interpolation Piecewise-linear curve fitting can approximate any curve with arbitrary accuracy Multi-field (MF) values are individually interpolated proportionately key='0 0.3333 0.666 1' keyValue='1 0 0, 0 1 0, 0 0 1, 1 0 0'

53. Linear Interpolation Step functions are created by repeating time values key='0 0.25 0.25 0.5 0.5 1' keyValue='1 1 2 2 3 4' Note that time-fraction key array must always be monotonically increasing

54. ColorInterpolator example

55. ColorInterpolator scene graph

56. ColorInterpolator scene graph with ROUTEs

57. ColorInterpolator html pretty-print

58. Chapter 8: User Interactivity Nobody knows the kind of trouble we’re in. Nobody seems to think it all might happen again. —Gram Parson, One Hundred Years from Now TouchSensor PlaneSensor CylinderSensor SphereSensor KeySensor StringSensor

59. Use the description field The description field allows the author to provide guidance text for each Sensor node This is a great way to tell users what is happening in the scene, and what they should do to interact effectively “Short and sweet” descriptions are best

60. CylinderSensor design pattern

61. CylinderSensor diskAngle mode determination

62. Chapter 9: Event Utilities and Scripting Action is eloquence. —William Shakespeare, Coriolanus, Act III, Scene II BooleanFilter BooleanToggle BooleanSequencer BooleanTrigger IntegerSequencer IntegerTrigger Script

63. Boolean, IntegerSequencer event timelines

64. IntegerSequencer event timeline

65. Script nodes Script nodes are used to create special-purpose animation and computation capabilities. Only create a Script when no other X3D node can get the job done Script code can be written either in ECMAScript (also known as JavaScript) or Java Future work: bindings for C++

66. X3D Execution Model

67. Script life cycle

68. examples/Basic/course/ CreateVrmlFromStringRandomBoxes.x3d scene graph

69. ECMAScript source code <![CDATA[ ecmascript: function R () { return Math.random(); } function recompute (isActive) { if (isActive==true) initialize(); } function initialize() { for (i=0; i < 10; i++) { rand1 = 100*R(); rand2 = 100*R(); rand3 = 20*R(); rand4 = 40*R(); rand5 = 20*R(); sceneString = 'Transform { \n' + ' translation ' + rand1 + ' 0 ' + rand2 + ' children [ \n' + ' Shape { \n' + ' appearance Appearance { \n' + ' material Material { \n' + ' diffuseColor ' + R() + ' ' + R() + ' ' + R() + '\n' + ' } \n' + ' geometry Box { \n' + ' size ' + rand3 + ' ' + rand4 + ' ' + rand5 + '\n' + ' } \n' + ' ] \n' + '} \n' + '#########################################################\n'; Browser.print (sceneString); newNode = Browser.createVrmlFromString(sceneString); // newNode = Browser.createX3dFromString(sceneString); ModifiableExternalNode.children[i] = newNode[0]; } ]]>

70. 10 random boxes snapshot

71. Chapter 10: Geometry 3, Geometry2D Theorem. For a triangle with a right-angle between sides a and b, with hypotenuse c, a 2 + b 2 = c 2 —Pythagoras Arc2D ArcClose2D Circle2D Disk2D Polyline2D Polypoint2D Rectangle2D TriangleSet2D

72. Arc2D, ArcClose2D

73. Chapter 11: Lighting and Environment Daylight encourages good behavior. —Don Brutzman DirectionalLight PointLight SpotLight Background TextureBackground Fog

74. Light, object, viewpoint relationships

75. DirectionalLight

76. PointLight

77. SpotLight

78. Chapter 12: Environment Sensors Hereafter, when they come to model heav’n And calculate the stars, how they will wield The mighty frame, how build, unbuild, contrive To save appearances, how gird the sphere With centric and eccentric scribbled o’er, Cycle and epicycle, orb in orb. —John Milton, Paradise Lost, 1667 LoadSensor ProximitySensor VisibilitySensor Sound AudioClip

79. LoadSensor LoadSensor keeps track of progress and completion when downloading external file resources. LoadSensor can be used as a triggering node in event-animation chains. This capability lets authors carefully delay the commencement of scene animations by waiting until relevant image textures, sounds, and X3D files are properly loaded before commencing an animation sequence.

80. LoadSensor tooltip page

81. Sound ellipses and attenuation

82. Sound ellipse major, minor axes

83. Min, maxHalfWidth derivations helpful for Sound authoring

84. Stereo pan calculations for sound

85. Chapter 13: Geometry 4, Triangles and Quadrilaterals There is no “royal road” to geometry. —Euclid, to King Ptolemy I Normal TriangleSet TriangleStripSet TriangleFanSet QuadSet IndexedTriangleSet IndexedTriangleStripSet IndexedTriangleFanSet IndexedQuadSet

86. Normal calculations

87. Chapter 14: Prototypes There are more things in heaven and earth, Horatio, than are dreamt of in your philosophy. —William Shakespeare, Hamlet Act I Scene V ProtoDeclare (ProtoInterface, ProtoBody) ExternProtoDeclare ProtoInstance

88. Prototype Declaration hints Follow X3D naming conventions for node and field definitions. Provide useful/safe default initialization values for each field, rather than depending on default field values internal to the ProtoBody. Include annotation tooltips for each field. Avoid copying ProtoDeclare definitions into additional scenes, instead copy ExternProtoDeclare and ProtoInstance definitions.

89. ExternProtoDeclare hints Don’t wrap ProtoInterface around fields, that’s illegal. For important prototypes, make a separate NewNodeExample.x3d scene that provides copyable ExternProtoDeclare/ProtoInstance definitions corresponding to the NewNodePrototype.x3d scene. This lets authors avoid copying the ProtoDeclare definitions, so that a master version remains stable and improvable. Do not include initialization values in field definitions. They are illegal since the defaults in the original ProtoDeclare field declarations take precedence. Copy annotation tooltips from corresponding ProtoDeclare tooltips.

90. ProtoInstance hints Explicitly include initialization values, even if they match default values, to ensure proper operation. Sometimes a prototype has different initialization values than expected, if modified elsewhere. Remember to include proper containerField attribute, identifying parent-node field name for this ProtoInstance. Default value: children. Example values: color, coord, geometry, fontStyle, proxy, sound, texture, textureTransform. First debug proper ProtoInstance operation in the scene defining the original ProtoDeclare, rather than using ExternProtoDeclare. Why – make sure it works first! Browser debugging can be more cryptic for externally defined prototypes and different versions may occur in various remote url addresses, making it difficult to determine precisely which ExternProtoDeclare is being referenced.

91. Chapter 15: Metadata (online only) Metadata defined: in general, "data about data;" functionally, "structured data about data." Metadata includes data associated with either an information system or an information object for purposes of description, administration, legal requirements, technical functionality, use and usage, and preservation. --Dublin Core Metadata Initiative (DCMI) WorldInfo MetadataInteger MetadataFloat MetadataDouble MetadataString MetadataSet Chapter 15 will be provided online.

92. Conclusions and Recommendations X3D is a cool language. Authoring can be fun! Many resources, tools and examples are now available, more than ever before. Lots of important work remains. You can help. Together we are building the 3D Web.

93. Don Brutzman brutzman@nps.edu http://web.nps.navy.mil/~brutzman Code USW/Br, Naval Postgraduate School Monterey California 93943-5000 USA 1.831.656.2149 voice 1.831.656.7599 fax Contact