hacks.mozilla.org

This is a guest post by David Humphrey and was originally posted in his weblog. David is a professor at Seneca College in Toronto where he teaches and researches open source development and leads Mozilla’s education project. David’s been involved with WebGL well before it became WebGL and was just a Firefox extension. It’s nice to see that work making its way out of the experimental stage and already being used to solve real-world problems even before it’s officially shipped anywhere.

I’ve been spending a lot of time lately thinking about 3D in the browser. It’s to the point that I have to blog about it, and try to get it out of my head and onto the web where it belongs. Part of the reason I’m writing this tonight is that my colleague, Cathy Leung, has just put up a demo so awesome I’m compelled to share it (video here):

She put the video together after this article was written about her work to make 3D accessible to web developers via C3DL. Cathy has been working with a team of students at Seneca College for the past few years, focused on an experimental 3D technology created by Mozilla. Her work proves how valuable 3D in the browser can be. I think a lot of people misunderstand its significance: “Doom in the browser?” Sure, but it’s way more than that. There is no shortage of tea pots on the web these days, as various browser vendors start to show-off early releases of WebGL enabled builds. However, Mozilla has been at this game a long time. I know because we’ve been using their stuff as long as they’ve been building it. And it’s really reached a new level now.

As Mozilla pushes WebGL further, and Cathy continues her work on C3DL, I’m focused on another project to harness the power of 3D in the browser. Together with Al MacDonald, I’m leading a Mozilla Foundation project to complete the work begun by John Resig to port the Processing language to JavaScript (aka processing.js). The processing.js port, while unfinished, is already amazing. Imagine if we took eight students, finished it, and added 3D support from C3DL? I know, exactly.

Part of what makes me so excited about all this work is the deep intersection of things I love. I’ve long been a fan of the work of Processing creators, Ben Fry and Casey Reas, every since they were part of the Aesthetics and Computation Group. I’ve always thought that their work belonged on the web instead of on the desktop. At the same time, my own work with Mozilla and the open web has proven to me the need for richer ways of working with things like open data. The web is at an interesting point in its evolution. We now take for granted that it can do what was once only possible via desktop apps. Looking forward I can already see a time when the web will also be the proper medium of artists, designers, data visualizers, and others pushing the limits of the second and third dimensions. I’m thrilled to be a small part of this effort now.

If you’d like to get involved with any of the work discussed above, please do get in touch with me. The most exciting aspect of everything I’ve told you remains that it’s all community developed, from Mozilla to C3DL to processing to processing.js. That’s how you build the software stack of the future.

If you see other cool WebGL demos post them in the comments here or let us know at @mozhacks. We’ll keep posting them as we find them.

A port of Puls to WebGL:

Escher-Droste effect in WebGL:

Metatunnel by FRequency:

(via Mark Steele)

This is a re-post from Vlad Vukićević’s personal blog. WebGL, an effort to bring a GL-based 3D extension to the web, is being standardized through Khronos. The WebGL work is based on the GL Canvas extension that Vlad started and is now being implemented in both Firefox and Safari. Builds that include support for WebGL are now being built every night. This work won’t make it into Firefox 3.6 but may be included in a post-3.6 release. To keep track of the WebGL progress you can follow Vlad or Mark Steele’s progress.

Since my post on Friday, we landed a few fixes to improve our WebGL implementation and to fix a couple of bugs we discovered on Friday. I’m looking forward to seeing what people do with WebGL, and how it can be useful on the web right now. For example, EA/Maxis recently added COLLADA export of Creature designs to their popular game Spore, and they have a Sporepedia where players can see others’ creations. Right now, those previews are just as images. With WebGL, they could be fully 3D, even animated.

Over the weekend I’ve put together this example, which uses WebGL to render an exported Spore creature, and let the user rotate the 3D model to view it from different angles. For those who want to try it out, you’ll need a recent Firefox nightly (one from today, September 21, or newer), and with one preference flipped as described in this post.

I’ll be working to update the very basic “getting started” demos from the GL ES 2 book that I ported to Canvas 3D as well, so that those who are interested in experimenting can have some good basic code to look at. They’re not updated yet, but they should be in the next day or two.

For those of you on Windows who don’t have an up to date OpenGL driver, or don’t have the possibility of getting one (e.g. many common Intel graphics cards doesn’t have OpenGL drivers), you can enable software rendering by downloading a Windows build of the Mesa software OpenGL implementation. It won’t be fast, but it should be enough for you to get an idea of what’s going on, and to play with some of the demos. To use it, download webgl-mesa-751.zip and extract it somewhere on your computer. It has a single file, OSMESA32.DLL, that you need to tell Firefox where to find: open up about:config, and set the preference webgl.osmesalib to the path of OSMESA32.DLL. If you extracted it to “C:\temp”, you would put in “C:\temp\osmesa32.dll” in the pref. Then, flip webgl.software_rendering to true, and you should be good to go.

(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.)