Welcome!

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

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
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
SYS-CON Events announced today that IoT Global Network has been named “Media Sponsor” of SYS-CON's @ThingsExpo, which will take place on June 6–8, 2017, at the Javits Center in New York City, NY. The IoT Global Network is a platform where you can connect with industry experts and network across the IoT community to build the successful IoT business of the future.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
In this Women in Technology Power Panel at 15th Cloud Expo, moderated by Anne Plese, Senior Consultant, Cloud Product Marketing at Verizon Enterprise, Esmeralda Swartz, CMO at MetraTech; Evelyn de Souza, Data Privacy and Compliance Strategy Leader at Cisco Systems; Seema Jethani, Director of Product Management at Basho Technologies; Victoria Livschitz, CEO of Qubell Inc.; Anne Hungate, Senior Director of Software Quality at DIRECTV, discussed what path they took to find their spot within the tec...
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
Disruption, Innovation, Artificial Intelligence and Machine Learning, Leadership and Management hear these words all day every day... lofty goals but how do we make it real? Add to that, that simply put, people don't like change. But what if we could implement and utilize these enterprise tools in a fast and "Non-Disruptive" way, enabling us to glean insights about our business, identify and reduce exposure, risk and liability, and secure business continuity?