3D graphics on the web!

My first post in this blog was about the potential for HTML/CSS to adopt three-dimensional attributes, but there is another related technology that I didn't go into. It begins with part of the HTML5 standard; the Canvas element.

The HTML5 canvas element is a fascinating feature of the new standard. With a little knowledge and some further study the element makes it possible to use JavaScript to draw bitmap images directly — and dynamically — in the browser window. It lacks some of the niceties of vector graphics, such as the ability to draw an object once and then make changes without manually re-drawing, but it is a powerful tool.

In order to use the canvas element one must refer to its two-dimensional context. There are lots of code examples around if you want to see how that's done, suffice to say that it is simple. Having a variable to point to that 2D context it is then possible to draw primitives, pre-defined images, gradients and paths, among other uses of the canvas. Paths will sound familiar to any creator of vector graphics but their canvas implementation is more similar to that in image editors such as the GIMP.

That's all fine and dandy and certainly, with clever enough scripting, this 2D context could be used to simulate 3D graphics. Unfortunately it would take script clever indeed and would place a considerable drain on the CPU. I've no doubt that these considerations were among those that motivated a new open standard, WebGL.

This is a remarkable API, based on the OpenGL ES 2.0 specification. Khronos, with members including Opera, Mozilla, Google and Apple, are developing this as an open standard for use with the HTML5 canvas element. It's accessed in the same way as the original 2D context, but what it does is genuinely impressive.

Browsers supporting WebGL (development versions of those from the previously mentioned vendors) use hardware acceleration (the user's video card) to render 3D graphics using the popular OpenGL library.

The results are frankly staggering. Full-3D graphics rendered in real time in the browser, seamlessly integrated into perfectly normal web pages! I can't possibly do it justice in writing, so take a look at the WebGL wiki for instructions and see for yourself! If you don't fancy trying a development version of a browser you could look up videos on YouTube and such.

This is certainly not the sort of 3D that I was talking about in my earlier blog entry, but it's an amazing thing. Using this new context seems to involve quite a learning curve, but the possibilities will surely make it worth the effort for some.