Welcome!

Open Source Cloud Authors: Zakia Bouachraoui, Liz McMillan, Elizabeth White, Pat Romanski, Yeshim Deniz

Related Topics: Machine Learning , Open Source Cloud

Machine Learning : Article

AJAX3D - The Open Platform For Rich 3D Web Applications

Real-time 3D is emerging as a first-class media type for the Web

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.

AJAX - Asynchronous JavaScript and XML - has emerged as a preferred method for developing sophisticated Web applications. AJAX makes client/server programming available to JavaScript developers via Dynamic HTML, resulting in rich, responsive applications hosted in a Web browser. While AJAX is being used to deploy some of the industry's leading applications, such as Google Maps and Netflix, current browsers are limited in their capacity to render dynamic content, in particular, high-performance real-time 3D.

AJAX3D combines the power of X3D, the standard for real-time 3D on the Web, with the ease of use and ubiquity of AJAX. AJAX3D employs the X3D Scene Access Interface (SAI) - the X3D equivalent of the DOM - to control 3D worlds via JavaScript. With the simple addition of an X3D plug-in to today's Web browsers, we can bring the awesome power of video game technology to the everyday Web experience.

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.

AJAX3D Basics
AJAX3D is based on the integration of two programming models: the W3C Document Object Model (DOM) and the ISO Scene Access Interface (SAI). The DOM defines a model for programs interacting with a Web document; the SAI allows programs to control X3D scenes. JavaScript code running on a Web page can interact with the DOM and the SAI simultaneously, enabling applications that integrate traditional 2D Web page elements with the 3D world. Both the DOM and SAI are independent of any programming language; however, our focus for AJAX3D is on JavaScript.

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:

  • 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.
Embedding X3D Scenes in a Web Browser
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">

Note: all examples in this document use Media Machines' FLUX Player as the X3D plug-in. However any SAI-compliant X3D plug-in that supports JavaScript should be able to support AJAX3D.

Accessing the X3D Scene from JavaScript
Once the X3D plug-in has been embedded, it can be accessed from JavaScript like any other DOM object. The FLUX object is used to access the SAI "browser" object - not to be confused with the Web browser, which is the main object defined by the SAI for connecting to the 3D scene. The browser is accessed as follows:

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");

or:

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.

Dynamic behaviors in the scene graph are accomplished via events - fields that let their values be changed, or that tell the application when their values have changed. An AJAX3D application can send events via the SAI using a straightforward JavaScript property-setting syntax as in the following example:

theText.string[0] = "Hello";
theText.string[1] = "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;
sensor1.touchTime.addFieldEventListener(observer);


More Stories By Tony Parisi

Tony Parisi, president and CEO of Media Machines, is a technology pioneer and accomplished entrepreneur. He is co-creator of the Virtual Reality Modeling Language (VRML), the ISO standard for 3D graphics on the World Wide Web, and is widely recognized as an expert in standards, technologies, and emerging markets for interactive rich media. In 1995 Tony founded Intervista Software, an early innovator in real-time, networked 3D graphics technology and developed WorldView, the first real-time VRML viewer for Microsoft Windows. In 1998 Intervista was purchased by PLATINUM technology, inc., and Tony joined the company to lead business affairs for its 3D visualization group. Tony founded Media Machines in 2001 and is spearheading the development of FLUX, a real-time 3D technology that continues to push the envelope in interactive graphics for the Web. He is also a lead editor and co-chair of the Extensible 3D (X3D) Specification, the new standard for Web3D graphics being developed by the Web3D Consortium.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
@CloudEXPO and @ExpoDX, two of the most influential technology events in the world, have hosted hundreds of sponsors and exhibitors since our launch 10 years ago. @CloudEXPO and @ExpoDX New York and Silicon Valley provide a full year of face-to-face marketing opportunities for your company. Each sponsorship and exhibit package comes with pre and post-show marketing programs. By sponsoring and exhibiting in New York and Silicon Valley, you reach a full complement of decision makers and buyers in ...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessio...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
LogRocket helps product teams develop better experiences for users by recording videos of user sessions with logs and network data. It identifies UX problems and reveals the root cause of every bug. LogRocket presents impactful errors on a website, and how to reproduce it. With LogRocket, users can replay problems.
Data Theorem is a leading provider of modern application security. Its core mission is to analyze and secure any modern application anytime, anywhere. The Data Theorem Analyzer Engine continuously scans APIs and mobile applications in search of security flaws and data privacy gaps. Data Theorem products help organizations build safer applications that maximize data security and brand protection. The company has detected more than 300 million application eavesdropping incidents and currently secu...