Since long it was known that WebGL is coming to Firefox, but we never knew it would come as a surprise out of the wild. Firefox’s latest nightly builds now include an implementation of WebGL. Here is some background: WebGL is an emerging standard that promises to bring Hardware accelerated 3D graphics to the browser.
Mozilla’s WebGL project gives web developers a way to connect the HTML 5 Canvas tool, which can be used to display complex graphics in the browser without plug-ins like Flash, to the OS’s native, hardware accelerated graphics engine, OpenGL.
OpenGL is an OS-native graphics engine that’s most often associated with video games, but is also often used in data visualizations and virtual reality apps. These days, It’s the backbone for Rich graphics in the OS UI. The trend started with Apple adopting it in one of the earlier Macs, followed by Windows Vista and Windows 7.
OpenGL, as the name says in Open standard so is Apple’s OpenCL. Following the Trend, Mozilla is also trying to turn WebGL into an open standard for browsers. There’s already a WebKit version of WebGL in development, though so far the sole users of the webkit, Google Chrome & Safari don’t have added WebGL support.
Even the new WebGL support in the Firefox nightly builds is very much in the alpha testing stage. In other words, don’t look for your favorite online games to rush to adopt WebGL tomorrow.
However, as developers start to experiment with the new tools we’ll likely get a sneak peek at how HTML 5 can push the boundaries of what’s possible on the web for 3-D animations interfaces without using Flash, Silverlight or any other plug-ins.
If you’d like to experiment with WebGL with a trunk nightly build, all you have to do is change a preference: load about:config, search for “webgl“, and double-click “webgl.enabled_for_all_sites” to change the value from false to true. You’ll currently have the most luck on MacOS X machines or Windows machines with up-to-date OpenGL drivers.
So far Mozilla doesn’t have any working demos or examples of what you can do with WebGL, but developer Vladimir Vukićević, who has been working on the project, and has come up with an example from the Game Spore.
Featured at the Mozilla Hacks website, it shows how WebGL can be used to display a COLLADA model. Specifically, it uses a critter exported from the popular video game Spore. The 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.
(Mac OS X users shouldn’t need to bother with software rendering, since Apple already provides a high quality OpenGL implementation, and Linux users should be ok as long as they have recent OpenGL drivers installed.)
loading...
loading...