AJAX3D - The Open Platform For Rich 3D Web Applications
Real-time 3D is emerging as a first-class media type for the Web
May. 28, 2007 04:45 PM
Real-time 3D is emerging as a first-class media type for the Web. Network bandwidth and graphics hardware processing power are now sufficiently advanced to enable compelling Web-based 3D experiences, including games, online virtual worlds, simulations, education, and training. Commercial developers are expressing increasing interest in exploiting real-time 3D in Web applications to enhance production values, create engaging immersive experiences, and deliver information in a more meaningful way.
Much of the infrastructure is in place to enable professional Web 3D deployment in a cross-platform, open, royalty-free environment. Interoperability standards such as ISO-standard Extensible 3D Graphics (X3D) are now mature, fully functional, and robust and supported by multiple open source implementations and affordable production pipelines. However, those technologies only go so far in that they are focused on the transportability of embedded rich content, and not on the applications that embed it. The industry is in need of a rapid development environment for creating scalable, highly interactive client/server 3D applications on the Web.
The initial development has begun. Media Machines has created the first showcase applications and tutorials, and has launched a Web site (www.ajax3d.org) as an open industry forum to explore technologies, techniques, and best practices. This article describes the key technical concepts behind AJAX3D and, via examples, introduces the beginnings of a formal programming framework for general use.
One DOM object is of particular interest to AJAX programmers: the XMLHttpRequest object, which allows a Web application to make server requests without requiring that the contents of the page be refreshed. This capability is fundamental for creating dynamic, responsive applications that meet the expectations of today's consumers. The SAI has a similar capacity in createX3DFromURL, a method of the X3D "browser" object that loads 3D content on demand.
The combination of the DOM, SAI, and XMLHttpRequest comprise the underpinnings of AJAX3D and, in fact, suggest a precise definition of AJAX3D, where an AJAX3D application is a Web browser-hosted program that:
Embedding X3D Scenes in a Web Browser
- Uses the SAI to access a real-time 3D scene
- Uses the DOM to manipulate Web page content in response to changes in the 3D scene
- Uses server-request methods (XMLHttpRequest, createX3DFromURL) to store and retrieve data in response to, and/or leading to, changes in a 3D scene.
The first step in creating an AJAX3D application is to create an HTML page that embeds X3D content. This is done using EMBED or OBJECT tags (the former being well supported in all Web browsers):
<embed WIDTH="640" HEIGHT="480" NAME="FLUX" SRC="helloajax3d.x3d"
TYPE="model/x3d" DASHBOARD="0" BGCOLOR="0xFFFFFF">
var browser = document.FLUX.getBrowser();
Once we have a handle on the X3D browser, we can access the ExecutionContext object, which lets us access all of the live objects in the scene to retrieve and change properties, or send and receive events:
var context = browser.getExecutionContext();
Working with the X3D Scene Graph
The primary data structure in an X3D world is the "scene graph" or a collection of graphical objects organized in hierarchical relationships. The scene graph is akin to a DOM document in that it's structured data representing the rendered content; however. 3D scene graphics tend to be far more complex than even the richest DOM documents.
The SAI provides a few ways to access the scene graph. Once a valid execution context is obtained (see above), we can either ask it for an object by name, or a collection of all the top-level nodes in the scene as follows:
var theText = context.getNode("THETEXT");
var nodes = context.getRootNodes();
The scene graph is hierarchical, but it's not a strict tree like a DOM document. Objects in the scene graph can have multiple parents so long as no object is a descendant of itself either directly or indirectly. The technical term for this structure is a Directed Acyclic Graph or DAG - hence the term "scene graph." Many operations on the X3D scene graph require knowledge of this structure so it's important to understand this concept early on.
Nodes, Fields, and Events
The fundamental object type in X3D is the node. Nodes are scene graph elements; they can represent geometric shapes, their visual properties, animations, scripts that contain program code, clickable behaviors, and so on. The properties of nodes are called fields; fields store basic data type information such as floating point values, integers, strings, 2D and 3D vectors, bitmapped images, and arrays of those types.
theText.string = "Hello";
theText.string = "AJAX3D!";
The SAI also defines field listeners: objects with callback methods that are invoked when an event is generated. Here's an example of adding a field listener to a TouchSensor - an object that tells the programmer when some geometry in the world has been clicked on (by generating a touchTime event):
var observer = new Object;
observer.readableFieldChanged = clickCallback;