Develop your WebGL strategy now

brad.midgley on

WebGL is a developing standard for delivering 3D content inside an HTML5 canvas.

The spec hasn’t reached a 1.0 version yet, but Safari, Firefox, Opera, and Chrome have support we can try out in their nightly builds for the draft version. I had the best luck on both Linux and OSX in trying out WebGL by using firefox nightly builds. There are several documents out there to help you try it… see here,  here, etc.

WebGL, along with HTML5, will open up doors for you technically and strategically. I want to go over some of the ways you can best make use of it.

  • Build interactive content using WebGL since simply making a movie users can’t interact with won’t impress. Users see awesome video content all the time using youtube–you are investing in new technology, so you should have results that aren’t possible using established technology
  • Think about the mobile browsing experience that scales down to the “small screen”. WebGL will soon make its appearance on iPhone and Android. It’s already shown up on Nokia’s N900.
  • Form a mobile app strategy since standalone apps will be able to use the same software to do 3D. Using WebGL inside a native app means rendering your 3D content inside an html viewer. On iPhone this is done using a UIWebView. This approach has advantages (code reuse) and drawbacks (flexibility, user experience complexity).
  • Use a few advanced features like directional light sources, curved surfaces, shadows. Not just another flat cube.
  • Make it obviously interactive by illustrating controls or even just status like the current viewing angle. Make the controls fade in after rendering the scene if you can. I’ve found most of the interactive WebGL content out there doesn’t make it obvious you can click and drag in the scene to manipulate it.
  • Remember to help people who are easing into the tech with a useful message for pre-WebGL browsers, possibly a preview of the feature that runs in a flash video. (Don’t depend on HTML5 or Flash 10.x for this since you want to cover old setups)
  • Consider your audience when planning your content. For example, Google built a fully operational Quake demo for WebGL. This hits home for developers–many of us saw Quake show up on the scene the first time and we’re impressed to see it in a browser.

Check out a few of the background and demos.

In the followup articles I will build some demo content using Processing.js and a few of the javascript WebGL frameworks. Game on!