Extensible 3D: XML Meets VRML
by Len Bullard | Pages: 1, 2, 3, 4

Spazz 3D

The Spazz3D editor is a cheap VRML97 editor with advanced features. Keith Victor creator of Spazz3D, promises X3D XML support in a future version of the product. Meanwhile, users of this editor can avail themselves of the NIST translator to create X3D.

Universal Media (UM)

Universal Media is a library of textures, sounds, and objects that can be used to build a 3D world without having to start from scratch. The advantages of using this library are that it's free, cross-platform, and fast.

Web3D Chat

Web3D Chat is a Web3D technology showcase; it features Universal Media worlds. The Daybreak world is an example of a Web3D Chat world that is both edgy and serenely beautiful. Here is a scene from that world.

Aaron Walsh is the chair of the the Web3D Consortium's Universal Media Working Group, which is responsible for the development of Universal Media, and the architect of the Web3D Web(tm) for which Web3DChat is the 3D chat system. Scheduled for public release this December (2003) the Web3D Web is a digital media network. UM 2.0, the next major revision of the system, will represent 3D objects in X3D with XML encoding.

The Web3D Specification Examples

As part of the development of the X3D standard, a comprehensive set of examples has been developed. VRML veterans will recognize many of these from the bible of the VRML97 developers, the VRML 2.0 Sourcebook.

Other examples have been provided in VRML Classic and the XML encodings. These are also incorporated into the X3D-Edit editor described above.

Scripting Language Bindings

While X3D has the built in behavioral nodes such as interpolaters, scripted language nodes are also available for the more strenuous and sophisticated applications. The Final Committee Draft (FCD) for the X3D ECMAScript and Java language bindings is in the registration and balloting process at ISO. The text for these two parts is available here.

X3D By Example

Now that you have enough overview material to understand what X3D is and where to find sources of software and support, let's look at an example. While it is not possible to survey all the features, this example will acquaint you with the basics of X3D modeling. For this example, I will be using the Flux browser.

The X3D DTD is another example of the complexity and obscurity made possible by the use of XML parameter entities. For this example, I will defang the DTD and use simpler element productions exploring each one used in the basic example. There is a W3C XML Schema for X3D, but it doesn't seem that anyone has written a RelaxNG schema.

X3D: Root Element

<!ELEMENT X3D    ( head? , Scene ) >
<!ATTLIST X3D
	profile (Core|Interchange|Interactive|Immersive|MPEG4|Full)  #IMPLIED
	version  CDATA    #FIXED    "3.0">

The element tree looks familiar. It is the head/body structure found in HTML. The head is optional and only one is allowed. Unsurprisingly, the majority of the world is a scene.

The attributes are more interesting. The PROFILE attribute is worth noting. Profiles are combinations of different X3D productions meant to enable X3D to operate on a variety of devices from the desktop, to the cell phone, to fully immersive CAVE visualization systems. Profiles aren't well supported yet, but this is an indication of things to come.

Head Element

<!ELEMENT head ( component*, meta* ) >

The X3D Head element type consists of component and metatag declarations. Metatags are the more frequently used elements and are a means to pass generic descriptive information in the document. One will typically see things such as author names and publication dates in these tags.

<!ELEMENT meta EMPTY>  
<!ATTLIST meta
  http-equiv  CDATA          #IMPLIED
  name        CDATA          #REQUIRED
  content     CDATA          #REQUIRED
  scheme      CDATA          #IMPLIED
  %i18n;
  >

Scene Element

<!ELEMENT Scene  ( %ChildrenNodes; | %WildcardNodes; )*  >

The Scene element contains the meat of the X3D document. In the element type declaration for this element type, I've deliberately left the parameter entity declarations in to make the point that profiling, while indicated to the X3D processor by the profile attribute value on the document root, definitionally depends on CDATA sections in the DTD. Working out which productions belong to which components in which profiles is worthy of a book and a good reason to use an XML X3D editor.

So far we have an unremarkable X3D instance.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN"
  "http://www.web3d.org/specifications/x3d-3.0.dtd">
<X3D profile="Immersive" >
<head>
  <meta content="Simple X3D example" name="description"/>
</head>
<Scene>

.........

</Scene>
</X3D>

Shape Elements

It is time to add some content to display. Here is the Shape element type:

<!ELEMENT Shape (IS?, (
     ( (%AppearanceNodes;), (( %GeometryNodes; ) | %WildcardNodes;)? ) |
     ( ( %GeometryNodes; ), ((%AppearanceNodes;) | %WildcardNodes;)? ) |
     ( %WildcardNodes;, (( %GeometryNodes; ) | (%AppearanceNodes;) | %WildcardNodes;)? )
)? ) >

We will concentrate on only two of these, starting with a geometry node. While the majority of performant graphics use collections of vertex information in shapes such as face sets, X3D also includes a set of primitive Euclidean shapes -- sphere, box, and cylinder -- to enable a user to create and modify basic shapes. While not always performant, a lot of work can be done using only basic shapes. Here is an example of a creature made up entirely of X3D basic shapes. He is ugly but great for picking up trash off the roadside.

For this exercise, we use the sphere. For now, the only important attribute is "radius" which defaults to a value of one meter.

<!ELEMENT Sphere (IS?) >
<!ATTLIST Sphere
	radius %SFFloat; "1"
	containerField NMTOKEN "geometry"
	class       CDATA       #IMPLIED
	DEF    ID        #IMPLIED
	USE    IDREF     #IMPLIED>

Here is a sphere inside a shape element. Note that the radius value is defaulted by simply not using it in the production.

<Shape>
  <Sphere/>
</Shape>

To make it more apparent, we'll add some color. Colors, textures and so on are added to X3D geometry using an element type called, appropriately, an Appearance element.

Appearance Elements

The Appearance element type is scarier looking in the declaration than it is to actually use. The actual number of potential elements is not that large. This version of the element type was created by Heiko Grussbach to provide a "complete, unordered, concisely enumerated version of the Appearance" element type. I'm not sure if this makes the case for keeping XML parameter entities or getting rid of them.

<!ELEMENT Appearance (IS?,

(  (FillProperties, LineProperties?) | (LineProperties, FillProperties)? )?,

(  ((%MaterialNodes;), (((%TextureNodes;),((%TextureTransformNodes;)|%WildcardNodes;)?) |

            ((%TextureTransformNodes;),((%TextureNodes;)|%WildcardNodes;)?) |

            (%WildcardNodes;,((%TextureNodes;)|(%TextureTransformNodes;)|%WildcardNodes;)?) )? )

 | ((%TextureNodes;), (    ((%MaterialNodes;),((%TextureTransformNodes;)|%WildcardNodes;)?) |

            ((%TextureTransformNodes;),((%MaterialNodes;)|%WildcardNodes;)?) |

            (%WildcardNodes;,((%MaterialNodes;)|(%TextureTransformNodes;)|%WildcardNodes;)?) )? )

 | ((%TextureTransformNodes;), (((%MaterialNodes;),((%TextureNodes;)|%WildcardNodes;)?) |

            ((%TextureNodes;),((%MaterialNodes;)|%WildcardNodes;)?) |

            (%WildcardNodes;,((%MaterialNodes;)|(%TextureNodes;)|%WildcardNodes;)?) )? )

 | (%WildcardNodes;, (    ((%MaterialNodes;),((%TextureNodes;)|(%TextureTransformNodes;)|%WildcardNodes;)?) |

            ((%TextureNodes;),((%MaterialNodes;)|(%TextureTransformNodes;)|%WildcardNodes;)?) |

            ((%TextureTransformNodes;),((%MaterialNodes;)|(%TextureNodes;)|%WildcardNodes;)?) |

            (%WildcardNodes;,((%MaterialNodes;)|(%TextureNodes;)|(%TextureTransformNodes;)|%WildcardNodes;)?) )? )

)? ) >



<!ATTLIST Appearance

    containerField NMTOKEN "appearance"

    class       CDATA       #IMPLIED

    DEF ID      #IMPLIED

    USE IDREF   #IMPLIED >

Here is the much less intimidating element instance inside a shape.

<Shape>
  <Sphere/>
   <Appearance DEF='RED'>
    <Material diffuseColor='1 0 0'/> 
   </Appearance>
</Shape>

The appearance node is named using a DEF attribute. As in most uses of name values, this is useful for reusing or manipulating the named element. We'll come back to this use of naming later. Notice that the Appearance element contains a Material element.

<!ELEMENT Material (IS?) >
<!ATTLIST Material
	ambientIntensity %SFFloat; "0.2"
	diffuseColor     %SFColor; "0.8 0.8 0.8"
	emissiveColor    %SFColor; "0 0 0"
	shininess        %SFFloat; "0.2"
	specularColor    %SFColor; "0 0 0"
	transparency     %SFFloat; "0"
	containerField NMTOKEN "material"
	class       CDATA          #IMPLIED
	DEF              ID        #IMPLIED
	USE              IDREF     #IMPLIED >

The Material element provides the color information to be applied to the sphere inside the shape element. If you add the production above to your file and display it in Flux, you see a red sphere floating in a sea of black. Still, unremarkable as worlds go, but not much markup either. Next, instead of using a Material element, we will use an ImageTexture.

<!ELEMENT ImageTexture (IS?) >
<!ATTLIST ImageTexture 
	url     %MFString; #IMPLIED
	repeatS %SFBool; "true"
	repeatT %SFBool; "true"
	containerField NMTOKEN "texture"
	class       CDATA       #IMPLIED
	DEF     ID       #IMPLIED
	USE     IDREF    #IMPLIED >

The Shape production with an ImageTexture element looks like this:

<Shape>
  <Sphere/>
   <Appearance DEF='RED'>
    <ImageTexture url="earth-topo.png"/> 
   </Appearance>
</Shape>

Paste that into your X3D example. Save the following image into the same directory where you are creating the X3D example and give it the name "earth-topo.png".

Open the new X3D example. If you have the Flux X3D browser installed, you can play with the Flux navigation controls at the bottom of the screen. Click on the one with the down arrow looking icon with the sticky note that says "Move". Place the mouse cursor over the world and move it toward the top of the screen. The world comes to you or you go to it. Put the arrow elsewhere on the screen and experiment. The following things are worth noting.

• You wrote very little code to create this world. Most of the work is in creating the image texture.
• You wrote no code to create the animation effects that enable you to examine the world.
• The geometric 3D world can be easily manipulated into many different views using only the browser controls.

Viewpoint Elements

That's pretty good for a starter world, but not good enough. Real time animation deserves some real animation. First, let's add another element type that enables you to control where a world opens, what one sees when it does, to instantaneously move to different views of the world, and to move the user view in real time under author control. Appropriately, this is a Viewpoint element type.

<!ELEMENT Viewpoint (IS?) >
<!ATTLIST Viewpoint
	fieldOfView %SFFloat;    "0.785398"
	jump        %SFBool;     "true"
	orientation %SFRotation; "0 0 1 0"
	position    %SFVec3f;    "0 0 10"
	description %SFString;   #IMPLIED
	centerOfRotation  %SFVec3f; "0 0 0"
	containerField NMTOKEN "children"
	class       CDATA        #IMPLIED
	DEF         ID           #IMPLIED
	USE         IDREF        #IMPLIED >

Paste the following into the file just above the <Shape> element.

<Viewpoint description="The World" orientation="0 1 0 1.57" position="10 0 0"/>

Select the web browser refresh button to reload. Notice:

• The world is closer and centered in the view.
• The side facing you is the Western hemisphere.
• The Flux control now has a Viewpoint name in it, "The World" instead of "Default".
• If you use the Flux controls to move the world, then hit the Viewpoint button, the display returns to the Viewpoint named "The World".

No world is complete without diverse points of view, yes? So let's add some more.

<Viewpoint description="The World" orientation="0 1 0 1.57" position="10 0 0"/> 
<Viewpoint description="Closer" orientation="0 1 0 1.57" position="6 0 0"/> 
<Viewpoint description="Near" orientation="0 1 0 1.57" position="2 0 0"/> 
<Viewpoint description="Heart of Darkness" orientation="0 1 0 1.57" position="0 0 0"/>

If you click on the arrow controls next to the button with The World on it, you will see the world appear to come closer. Click again and the screen goes black. Note that the left most position attributes are ten, six, two and zero. That last viewpoint is inside your world at its center.

Note that it is not the sphere that is moving; it is the currently active viewpoint changing, which is why the move is instantaneous. A viewpoint is an object in the X3D world; there can be many of them, and they can be animated using the same kinds of animation element types as are used on the geometry. Think of a viewpoint as a camera that can be fixed or moving. Selecting a different active viewpoint is selecting among the cameras. Moving a viewpoint in the world can move the user along with it.

Pages: 1, 2, 3, 4

Next Page