WebGL - see it in action! (one for the techies)

As keen and conscientious developers, we are always looking for new and more efficient ways of creating our sites. Cool and fun is a bonus. A while ago I briefly talked about WebGL and since I have had a bit of free time I thought it was time to revisit this.

To remind those who lack an eidetic memory / don’t read out blog and aren’t avid techies, WebGL is an attempt by the Khronos Group to develop a cross-platform API to bring the functionality of OpenGL to the web.

It is backed by browser manufacturers Mozilla, Opera, Google and Apple, albeit only in pre-release software thus far. It gets rid of the need for any additional plugins and allows hardware accelerated graphics rendering (where available, in theory software rendering is supported otherwise). Unfortunately, it does still rely on the presence of OpenGL on the target system. A more thorough list of the pros and cons of the WebGL can be found here.

Now, returning to my point (much rejoicing), I have been evaluating /experimenting with WebGL recently. Some time back, I did a lot of work with OpenGL using C++, and then C#, for which NeHe Productions was invaluable; indeed my research suggests it is still a heavily used resource and well worth checking out.

In spite of my super human ability to forget information almost immediately, I have still found myself comparing development with my previous experience. WebGL is an odd beast – it is a low level api, and has no fixed function support. This, combined with the relatively slow speed of JavaScript (the language used to invoke theWebGL functionality) has meant that a project must be approached in a very different way. Without getting too technical, in OpenGL, you would use the wide array of functions available to achieve what you set out to do (initially at least), whereas WebGL requires that you split out some of the calculations to be processed in parallel on the graphics card in the form of Shaders rather than using JavaScript.

This multifaceted coding approach is especially odd compared with Flash development, for which I tend to prefer to mix drawing on the stage (my artistic needs must be satisfied somehow!) with the application code. Like everything else, once you have the right mindset, it is relatively straightforward to create simple examples; indeed for anyone interested I would recommend http://learningwebgl.com/blog/as a good place to start. The lessons offered adhere broadly to those on NeHe, but help introduce the complexities inherent in WebGL development. To give you an idea of what is offered, below is a very simple demo built upon several of his tutorials that I created while first looking into the subject. It’s worth reiterating at this point that current browser releases won’t yet be able to display this – only those with pre-release builds need apply (if you are interested: http://nightly.mozilla.org/ is where I got my test one).

These complexities won’t make any difference to the user, though; indeed the lack of a plugin should eventually make the experience a smoother one overall. It will allow accelerated 2D and 3D graphics to be easily delivered in a cross-browser format without placing the onus on the user to download additional plugins or software beyond the browser itself.

That said, in addition to the previously linked cons, it is worth noting the lack of a proprietary, compiled format does mean that users who choose to can pick apart your WebGL app to see how it works – unless satisfied with JavaScript obfuscation, sites that are very concerned with the security of their proprietary code should maybe look at another solution. Ultimately though, the value of what your site offers should ideally mean more than the way you deliver it, so this shouldn’t dissuade people from considering WebGL when the spec reaches fruition (hopefully later this year).

This will ONLY work if you have a pre-release version of the new browsers. If you fancy have a go at our spinning cube game, download a pre-release version here. For those without the pre-release version of the browsers, there's also a screen capture of it below.

Click within the Cube box to make it work!




Nick Nawrattel
Head of Rich Media