With the recent launches of HTML5 compatible browsers like Firefox 4 and IE9 there has been a lot of buzz and hype on the web about all the fancy things we can now do directly in our browsers without the need for plugins. I think I've found my favourite application so far - Google Labs' Body Browser. This is an application that renders 3D objects directly in the browser with controls to move, zoom and redraw the model on the fly. On the surface this may not look like anything new or innovative (something like this could be achieved in Flash or a similar plugin), but it's what under the cover that counts.
HTML5 & WebGL
The underlying technologies powering this application are HTML5 and OpenGL (which is the core technology behind WebGL). By now we all know what HTML5 is and what it's broadly capable of, but 3D graphics rendering directly in an HTML5 canvas element may be something slightly more unfamiliar to most, and Google Labs' example is a really nice and practical example of exactly this.
What is WebGL, and how is this better than Flash?
It's basically a software vs hardware accelerated graphics comparison. WebGL is based on OpenGL, which is a 2D and 3D computer graphics API that talks directly to your computer graphics, and therefore any graphics rendered using WebGL in a canvas element will be hardware accelerated. Graphics rendered in plugins like Flash are classically software accelerated, but that could be about to change with Molehill (read Richard's blog post Flash Player 11 (With Molehill) Now in Public Beta).
Why are hardware accelerated graphics better than software accelerated graphics?
The obvious advantage is that the power of modern day graphics cards/chips will almost always significantly outweigh what can be achieved by software, which fundamentally means web applications can now take full advantage of your hardware.
Then there's the compatibility issue. Take devices running iOS for example - since Flash is not supported it is likely that we'll see much richer sites coming soon once mobile web browsers fully support HTML5 and WebGL technology.
Then there's the weight/size issue. Using plugins means your web page will take longer to load, or even worse require the user to download the plugin before they can use it. If instead you're using a browser that supports HTML5 and WebGL then no plugins are necessary, which means much less loading. This may turn out to be critical for Rich Media ads for example, which are often restricted to an initial load limit. If no plugins are required this could mean we start seeing richer Rich Media ads appearing on sites around the web, which are likely to bursting to the brim with fancy graphical features.
Check out these other two great examples of HTML5 canvas and WebGL, but remember to open them in Chrome or Firefox 4!
Comments.