X3D the HTML way

by Anita Havele and Nicholas Polys

What happens when enterprise 3D graphics meets the World-Wide Web? When peanut butter and chocolate meet?  The answer, of course, is ‘Delicious Things’! 

When these worlds collided several years ago, interactive 3D on the Web was the domain of advanced enterprises and research institutions. With modern networks, hardware, standards, and open software, we can publish and share rich multimedia worlds simply as a Web address. Now, Web3D runs on anyone’s graphic Web device across the globe from phones and XR headsets to clusters and VR CAVEs. 

In this blog we will feature three (3) amazing new examples of free and open methods for producing 3D Web content on the Web. We will take a look at patterns of composing and modifying 3D scenes. Specifically, we will explore the live creation and editing of 3D content from inside the Web browser using several different open source tools. We will examine:

• X3DOM live editor  

• X_ITE live editor

• Jupyter Notebook Viewer (nbviewer.org) : Front-end Assembly

Before we do however, some context is order. Web browsers can display interactive 3D graphics through several means. For today, we will focus on Javascript renderers that use WebGL to draw hardware-accelerated 3D graphics in HTML pages and in Extended Reality (WebXR) devices. We will also use the ISO Standards of Extensible 3D (X3D) and glTF (Graphics Library Transmission Format).

When we look at the source of Web3D HTML page, we will see several key elements: 

• A reference to the renderer.js and related.css

  • Here we will look at the open source X3DOM and X_ITE, which have lots of great examples and tutorials on their websites

• A composition of User Interface elements and logic through the DOM and Javascript

• A 3D scene description composing models and animations (glTF, X3D), lighting,  physics, and interactivity (X3D), even W3C’s WebAudio sound!

In these first two examples, we use a scene we created by putting together several models from online - we found glTF models of some cups and a marble table. They are Community Commons licensed. Because X3Dv4 supports glTF2, we can place these glTF models into a scene and add lighting, animation, and interactivity with X3D. As we see here, with further integration into the DOM, scenes can be modified with scripting or live editing in the browser!  

So let’s see what it looks like!

1.    X3DOM Live Editor 

In this example, you can edit the live scene and hit ‘Update’ to see the results.

If you have models on a CORS -enabled server, you can paste in your X3D url to load it!

2.    X_ITE Playground live editor

Edit the speed of an animation by changing the cycleInterval attribute.

3.    Jupyter Notebook Viewer (nbviewer.org) - Front-end Assembly

This specific link is not editable, but you can see the pattern to use python libraries to create a Web visualization of some CAD parts … inside your Jupyter Notebooks on the Web! Github Here.

• Learn more at webx3d.org !

• The Web3D Consortium and its community have several webinars and tutorials online, as well as examples on glitch and jsfiddle.

This blog has focused on some fascinating aspects of the modern standards ecosystem that support the Web-based Metaverse: The World Wide Webiverse. Today we saw how using the Document Object Model (DOM), the X3D scene graph is now part of the web page, enabling web authors to operate on 3D scene elements directly and build amazing applications!. 

Join the Web3D Consortium as we continue to build technologies that provide for the interoperability of interactive 3D worlds to enable an open, immersive platform for the Web using Web3D and other standard formats and APIs.