 | Level: Introductory Dethe Elza (delza@livingcode.org), Senior Technical Architect, Blast Radius
15 Dec 2005 Once upon a time, 3D for the Web promised to be as easy as building a Web page. Unfortunately, 3D -- even simple 3D -- is more complex than displaying scrolling text and pictures. Each VRML vendor implemented a different subset of the spec, and it never gained traction. And so 3D on the Web faded away. Or did it? It turns out that VRML lives on in its XML flavor, X3D, which has grown to encompass VRML's siblings H-Anim (Humanoid Animation) and GeoVRML. Can 3D on the Web finally be used for more than virtual shopping malls? The latest installment of this mini-series on XML media shows that it can. In this article, Dethe focuses on a couple of uses that X3D is ready for now, and takes a look at where it might go in the future.
It has been 10 years since Virtual Reality Markup Language (VRML)
failed to take the Web by storm. Now X3D (VRML in XML) has been
adopted as an ISO standard and has implementations in development.
XGL (OpenGL in XML) is a competing 3D XML spec.
The Web Hypertext Application Technologies
Working Group (WHATWG) is working on a 3D canvas proposal. The open-source 3D tool Blender can now export X3D (See Resources for more on these technologies.). After all the boom and
bust, the era of 3D in the browser might finally be here.
How will it evolve? Can it be integrated with other XML
dialects, such as XHTML and SVG?
Whatever happened to VRML?
VRML came about in the heady days when HTML was taking off like wildfire.
It was an attempt to join the concepts of View Source and virtual reality
with the rapidly expanding Web. As a concept it was great, but it faced too
many limitations: The hardware wasn't really ready, OpenGL was not a standard feature, and existing
implementations were both incomplete and incompatible. It didn't help that
the most widespread use of VRML appeared to be virtual shopping malls, which
combined the risk of Internet purchasing with nearly all the inconvenience of
visiting a real mall. VRML continued to putter along, mostly in research
contexts, but failed to take hold and was largely written off by the Web
community.
But it never completely died, and times have changed. With the ubiquity of
XML, the VRML spec was rewritten to take advantage of XML parsers (and
programmer familiarity with XML).
The resulting spec, X3D, is governed by the Web3D
Consortium, which provides open-source tools, examples, and documentation (see
Resources). Games, OpenGL, and inexpensive video cards drove the
graphics of standard computers to levels that surpass all but the most
advanced of earlier dedicated graphics workstations -- computers that cost orders of
magnitude more. The pieces are now in place for VRML to rise again.
And X3D is rising. It's still a peripheral technology, but the niches that use it
are growing and becoming more important. This article provides a couple of
examples in areas outside of the main commercial uses of X3D: rapid
prototyping and education.
What about performance? Games like Quake have graphics engines tuned for specific angles and types of images; they
are not general-purpose 3D rendering engines. An X3D player, on the other
hand, is not only a general 3D engine, but also builds and maintains both a
scene graph and an XML Document Object Model (DOM) tree. However, for many uses
its current performance is adequate, and bound to improve.
The secret of X3D's (potential) success is that OpenGL has become ubiquitous.
With OpenGL, you can render high-quality 3D scenes in real time, without the
overhead of a ray-tracer. Languages that build on OpenGL fall along a range,
from XGL (see Resources)
which encodes the OpenGL API in XML, to X3D
which provides a higher-level interface that incorporates a scenegraph, animation,
and scripting, to Flatland's 3DML which is based on the concept of building
blocks. While these get progressively easier to use, they also get more
limited. X3D appears to fall in the sweet spot of power versus
ease of use, since the XGL Web page has not been updated for more than two
years and the 3DML format doesn't appear to have caught on widely.
After VRML was standardized, two extensions were proposed and developed:
- GeoVRML was designed to overcome VRML's limited view of the world -- namely that everything basically existed inside a room. With GeoVRML it became much easier to use VRML for outdoor scenes, such as mapping elevations.
- H-Anim was designed to allow VRML to model humanoid figures for animation -- similar to what the commercial program Poser can do, with constraints on joint manipulation used for inverse kinematics to provide realistic animated movement.
Both GeoVRML and H-Anim were adopted into the X3D specification, but because X3D is modularized these extensions are not supported by all profiles or in all viewers. X3D also benefits from its status as an ISO standard.
X3D defines several subsets of the complete specification as profiles:
- The Interchange profile supports geometry, texturing, basic lighting, and animation, and is designed primarily to transfer data between applications.
- The Interactive profile adds additional lights, enhanced timing, and sensor nodes for interaction with the 3D environment.
- The Immersive profile adds audio, collision, fog, and scripting.
- The Full profile adds NURBS, H-Anim, and GeoSpatial components.
These are the baseline profiles. Other profiles include MPEG-4 Interactive, which is a scaled-down version of the Interactive profile that's targeted at mobile devices, and the CAD Distillation Format (CDF) for translation and interchange of Computer Aided Drafting (CAD) data.
So, what is X3D good for today? The Web3D site lists CAD,
medical imaging, and visual simulations as the main focus, but also
mentions cartography, education, technical training, and documentation. X3D also has potential for data visualization, rapid prototyping,
entertainment, and games. I can't begin to cover all of these in an article like this,
so I'll just focus briefly on two of them -- rapid prototyping and education -- and then look at where X3D might
be headed.
Rapid prototyping
Imagine you want to develop a new product. How do you describe it to your
potential investors (or customers)? You can build a physical model, have
an artist render it on paper, or mock it up in X3D and let the
interested parties play around with it.
Figure 1. The Fig (a notional handheld computer)
Listing 1 shows the main X3D structures (see fig.x3d in Download for the complete file) that's used to create the image in Figure 1, which was taken using the FreeWrl browser (see Resources). This is a very basic example of what you can accomplish using X3D, without delving into the more advanced issues like lighting, animation, and scripting. I coded this file by hand, which is one option, but most people are more comfortable with a 3D drawing program, using X3D to render for the Web.
Listing 1. fig.x3d
<?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'
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance'
xsd:noNamespaceSchemaLocation=
'http://www.web3d.org/specifications/x3d-3.0.xsd'>
<head>
<meta name='filename' content='fig.x3d' />
<meta name='author' content='Dethe Elza' />
<meta name='created' content='2005-12-02' />
<meta name='description'
content='Prototype of the Fig, a notional handheld computer.' />
</head>
<Scene>
<!-- This NavigationInfo node is added to many scenes,
making examination of objects easier. -->
<NavigationInfo type='"EXAMINE" "ANY"' />
<Viewpoint description='' position='0 0 .55' />
<Background skyColor="1 1 1" groundColor="1 1 1" />
<!-- Set up the basic shape of the device -->
<Shape DEF="screen">
<Appearance>
<Material diffuseColor='.8 .8 .8' />
<ImageTexture url="hello_world.png" />
</Appearance>
<Box size='.5 .3 .01' />
</Shape>
<!-- Put a logo on the lower-left side -->
<Transform translation="-.23 -.12 .015">
<Shape DEF="logo">
<Appearance>
<Material diffuseColor=".8 .8 .8" />
<ImageTexture url="fig_logo.png" />
</Appearance>
<Box size=".025 .03 .00001" />
</Shape>
</Transform>
<!-- Define a speaker grille and translate to the left side -->
<Transform translation="-.23 .12 .015">
<Group DEF="Grille">
<!-- Dot for the first hole of grille -->
<Shape>
<Appearance DEF="grey_hole">
<Material diffuseColor=".2 .2 .2" />
</Appearance>
<Sphere DEF="Dot" radius=".001" />
</Shape>
<!-- Now we re-use the dot, translating to a new location -->
<Transform translation="-.01 -.005 0">
<Shape USE="Dot" />
</Transform>
<!-- Snipped five more translated dots -->
</Group>
</Transform>
<!-- Reuse the speaker grille, translated to the right side -->
<Transform translation=".23 .12 .015">
<Group USE="Grille" />
</Transform>
<!-- Define a raised area on the left for hand-hold and buttons -->
<Transform translation="-.23 0 0">
<Shape DEF="control_area">
<Appearance DEF="white_plastic">
<Material diffuseColor='.9 .9 .9' shininess="1" />
</Appearance>
<Box size=".04 .3 .03" />
</Shape>
</Transform>
<!-- Re-use handle, translating it to the right -->
<Transform translation=".23 0 0">
<Shape USE="control_area" />
</Transform>
<!-- Create a raised bevel to round the box -->
<Transform translation="-.25 0 0">
<Shape DEF="vertical_bevel">
<Appearance USE="white_plastic" />
<Cylinder height=".3" radius=".015" />
</Shape>
</Transform>
<!-- Re-use bevel -->
<Transform translation=".25 0 0">
<Shape USE="vertical_bevel" />
</Transform>
<!-- Four more bevels snipped -->
<!-- Define a sphere to round the corner -->
<Transform translation="-.25 -.15 0">
<Shape DEF="Corner">
<Appearance USE="white_plastic" />
<Sphere radius=".015" />
</Shape>
</Transform>
<!-- Three more corners snipped -->
<!-- Define the camera/microphone grouping in the top bevel -->
<Transform translation="0 .148 .014">
<Group DEF="camera_microphone">
<Transform rotation="1 0 0 1.57">
<Shape>
<Appearance USE="white_plastic" />
<Cylinder radius=".006" height=".002" />
</Shape>
</Transform>
<Shape DEF="camera">
<Appearance>
<Material diffuseColor="0 0 0" shininess="1.0" />
</Appearance>
<Sphere radius=".003" />
</Shape>
<Transform translation="-.03 -.002 .01">
<Shape DEF="microphone">
<Appearance USE="grey_hole" />
<Box size=".006 .001 .001" />
</Shape>
</Transform>
<Transform translation=".03 -.002 .01">
<Shape USE="microphone" />
</Transform>
</Group>
</Transform>
<!-- Define the coloured buttons on the left -->
<Transform translation="-.23 .02 .015">
<Group DEF="buttons">
<!-- Red button -->
<Transform translation="-.01 0 0">
<Shape>
<Appearance>
<Material diffuseColor="1 0 0" shininess=".4" />
</Appearance>
<Sphere radius=".006" />
</Shape>
</Transform>
<!-- Yellow, Green, and Blue buttons snipped -->
</Group>
</Transform>
<!-- Re-use buttons on the right, flipped -->
<Transform translation=".23 .02 .015" rotation="0 1 0 3.15">
<Group USE="buttons" />
</Transform>
</Scene>
</X3D>
|
 |
Education
Education is another area where X3D can shine. With free tools it is
possible to create teaching materials, animations, simulations, and so on. And
students can get into the X3D worlds, view the source code, and extend or adapt them.
Figure 2 is a simple view of the platonic solids generated by a Python script
(which is included in Download).
Figure 2. Platonic solids
Listing 2 shows the main X3D structures
(see platonics.x3d in Download for complete file)
that's used to create the above image. Using scripts to generate models, you can create
visuals as simple or as complex as you like. Alternatively, you can use scripts to convert between formats to repurpose 3D content that's generated by (or for) many other programs (see Resources).
Listing 2. platonics.x3d
<?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'
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance'
xsd:noNamespaceSchemaLocation=
'http://www.web3d.org/specifications/x3d-3.0.xsd'>
<head>
<meta name='filename' content='platonics.x3d' />
<meta name='author' content='Dethe Elza' />
<meta name='created' content='2005-10-20' />
<meta name='description'
content='Display of the Platonic solids' />
</head>
<Scene>
<!-- This NavigationInfo node is added to many scenes,
making examination of objects easier. -->
<NavigationInfo type='"EXAMINE" "ANY"' />
<Viewpoint description='Default' position='0 0 7' />
<Background skyColor="1 1 1" groundColor="1 1 1" />
<!-- tetrahedron description snipped -->
<!-- cube description snipped -->
<!-- octohedron description snipped -->
<Transform translation="1.25 0 0" scale=".5 .5 .5">
<!-- this is the dodecahedron description -->
<Shape>
<Appearance>
<Material diffuseColor="0 1 0" />
</Appearance>
<IndexedFaceSet coordIndex="0,7,8,15,4,-1, 6,10,9,8,7,-1,
0,1,5,6,7,-1, 1,2,12,11,5,-1, 12,13,16,17,11,-1,
2,3,18,13,12,-1, 4,3,2,1,0,-1, 3,4,15,14,18,-1,
6,5,11,17,10,-1, 9,10,17,16,19,-1, 8,9,19,14,15,-1,
13,18,14,19,16">
<Coordinate point=".577 .577 .577, .934 0 .357, .577 -.577
.577, 0 -.357 .934, 0 .357 .934, .934 0 -.357, .577 .577
-.577, .357 .934 0, -.357 .934 0, -.577 .577 -.577, 0 .357
-.934, .577 -.577 -.577, .357 -.934 0, -.357 -.934 0,
-.934 0 .357, -.577 .577 .577, -.577 -.577 -.577, 0 -.357
-.934, -.577 -.577 .577, -.934 0 -.357" />
</IndexedFaceSet>
</Shape>
</Transform>
<!-- icosahedron description snipped -->
</Scene>
</X3D>
|
|
Want to play a game?
I haven't found any instances of X3D being used directly to generate game
content or game worlds. While it won't be feasible to rewrite Quake or Halo
in X3D any time soon, simpler games will be possible. At one time, SVG was considered
too slow for games, but times have changed. Now the Gnome
project is rewriting its games into SVG. At some
point soon, you'll realize the benefits of keeping as much media
content in XML as possible, leveraging tools across all content. In that
case, using SVG for 2D and X3D for the 3D content might make a lot of sense.
The future of X3D
Although X3D was developed independently of SVG, the two technologies are complimentary for 3D and 2D graphics. So far I haven't seen any tools that support SVG for texturing surfaces in X3D, but the plan is to support that. Given that people have already written tools to display 3D using SVG or the canvas tag, it might even make sense to have a way to
statically render X3D in an SVG file.
With the recent release of Firefox 1.5, SVG and the scriptable canvas tag
have begun to enter the mainstream
(both are built into Firefox and don't require plug-ins). Both WHATWG and Firefox
developers have proposed extending the canvas tag to include a 3D context as
well. Since Firefox is built on a cross-platform application toolkit
(XULRunner), the possibilities for applications that leverage powerful 2D and
3D tools (along with all the other XML-based technology in that toolbox) get
interesting quite fast. I look forward to playing with applications that
are capable of using the full XML media stack.
Another realm to watch for X3D in is the growth of Fab Labs
(see Resources). Started by MIT, these small-scale
fabrication workshops enable you to create nearly anything you can
model. What has not been standardized yet (as far as I've been able to
see) is a 3D language for capturing these models. If there were such a
language -- let's call it Fabrication Markup Language (FabML) -- X3D would make a
great basis for it.
Download | Description | Name | Size | Download method |
|---|
| Example code | x-matters43-examples.zip | 72KB | HTTP |
|---|
Resources Learn
- Extensible 3D (X3D) Tooltips offers summary descriptions and authoring hints for each X3D element and attribute.
- VRML 2.0 Sourcebook is the X3D version of Sourcebook example files.
- Web3D Consortium is the home for development of X3D specification, information, and tools.
- The H-Anim Specification is for modeling humanoid figures in VRML or X3D.
- GeoVRML is the working group for geo-referenced data in VRML/X3D, such as maps and 3D terrain models.
- X3D Frequently Asked Questions can provide background on X3D.
- The XGL Specification hasn't been updated since 2003, but this is the spec for encoding OpenGL directly in XML.
- The X3D entry in Wikipedia has historical information and further links.
- 3D Industry Forum is the main competitor to the Web3D Consortium, developers of the binary U3D specification embedded in Adobe Acrobat.
- Flatland are developers of the high-level 3DML "Blocks"-based specification and Rover software.
- Check out the VRML Shopping Mall. To prove I'm not making up the annoyance of VRML malls, you can experience one yourself (VRML viewer required).
- OpenGL, without which none of this would be possible.
- In many ways Scalable Vector Graphics (SVG) is the 2D cousin to X3D, and in the future they should work well together.
- Get the basics on SVG -- read Nicholas Chase's developerWorks tutorial "Introduction to Scalable Vector Graphics" (March 2004). You'll also find a wealth of SVG content in the developerWorks XML zone.
- The Web Hypertext Application Technology Working Group (WHATWG) is working on the next generation of HTML and Web-based technologies.
- Find out more about WHATWG and
canvas in Edd Dumbill's two-part article "The future of HTML" (developerWorks, December 2005).
- FabLab, MIT's Center for Bits and Atoms has put together a roughly $20,000 (US) package that gives people the equivalent of open source for physical objects.
- Learn how you can become an IBM Certified Developer in XML and related technologies.
Get products and technologies
- The FreeWRL Viewer is an open-source viewer for Linux and OS X (Windows support coming). This is the tool used to test the examples in this article and it is expected to support the full interchange profile by early 2006.
- Xj3D Viewer is an open-source X3D viewer in the Java language.
- X3D-Edit is a Java-based editor for X3D graphics.
- lib3ds is an open-source library for working with the 3DS model format.
- Rawkee Maya Exporter can be used to export X3D data from Alias Maya application.
- Blender is one of the premier open-source 3D applications, with X3D exporters available.
About the author | 
| | Dethe Elza's favorite job title has been Chief Mad Scientist. Dethe can be reached at delza@livingcode.org. He keeps a blog mainly about Python and Mac OS X at http://livingcode.blogspot.com/ and writes programs for his kids. Suggestions and recommendations on this column are welcome. |
Rate this page
| |
