WebGL in Firefox nightly builds, demoed with 3D Spore model

Firefox's latest nightly trunk builds now include a working implementation of …

The latest Firefox nightly builds now include Mozilla's implementation of WebGL, an emerging standard that aims to bring 3D graphics to the Web. Although the standard is still at a relatively early stage in the draft process, it is rapidly gaining momentum and has strong backing from a growing number of browser vendors. It's yet another sign that standards adoption is accelerating as the need to bring richer content to the Web drives forward browser evolution.

The WebGL working group was formed earlier this year when Mozilla teamed up with the Khronos Group, the organization behind the OpenGL standard, to define an open standard for native browser 3D. The goal is to develop low-level JavaScript APIs that will provide comprehensive support for OpenGL ES 2.0. High-level third-party libraries, such as C3DL, will be built on top to give Web application developers a more expressive and convenient way to leverage WebGL's 3D capabilities. Mozilla believes that the flexibility inherent in this layered approach will be advantageous in the long term and that the trend towards faster JavaScript engines will make it practical for real-world usage.

Apple is committed to the WebGL standard and recently introduced its own implementation which can be tested in the latest WebKit nightly builds. As a separate initiative, Apple has also invented a set of CSS enhancements to enable interactive 3D presentation of conventional Web content.

The underlying concept behind WebGL was originally conceived by Mozilla's Vlad Vukicevic who built the first experimental implementation as a plugin in 2007. He has pushed the project forward this year and has been aligning the code with the WebGL standard. Mozilla developer Mark Steele recently took over the effort and has advanced it to the point where it is sufficiently mature and robust to be merged into the mainline and enabled in the latest trunk nightly builds. He's also planning to explore possibilities for improving the performance of Firefox's JavaScript engine to better accommodate 3D programming.

"Everyone knows that if you want to do cross-platform hardware-accelerated 3D graphics on your desktop, you use OpenGL. If you ask the same for the web, there hasn't been a good answer. WebGL will hopefully fix that, taking advantage of the ubiquity and popularity of OpenGL in a way that fits the web," he wrote last month. "The WebGL working group is targeting the first half of 2010 for release of the standard."

Users and developers can now begin testing Mozilla's WebGL support by downloading the latest nightly builds and toggling the webgl.enabled_for_all_sites property in about:config. After I set that property, I was able to use WebGL using Minefield on Mac OS X. Instructions are available from Vukicevic's blog. Linux and Windows are supported too, but some Windows users may need to download an extra DLL and enable software rendering if they don't have up-to-date OpenGL drivers or 3D-enabled hardware. Vukicevic says that Mozilla might eventually explore solutions like building a Direct3D backend to provide native Windows support.

In a follow-up post featured at the Mozilla Hacks website, he shows how WebGL can be used to display a COLLADA model. Specifically, he uses a critter exported from the popular video game Spore. His demo displays the 3D model in a Canvas element and allows the user to rotate by clicking and dragging. A quick glance at the page source code provides some insight into how WebGL works. In the sporeview.js file, Canvas event listeners detect when the user clicks and moves the mouse so that the model can be rotate as the user drags. The Spore model, which is in the XML-based COLLADA format, is loaded with an XMLHttpRequest in the SporeFile.js script. The OpenGL shader language is used inside of HTML script tags that are referenced by ID in the JavaScript code. It's fascinating to see how the underlying concepts of OpenGL programming have been adapted for the Web.