Bringing kick-ass graphics to the web in 3D

I’ve spent the last week and a half or so writing about WebGL, the in-progress specification to bring real-time 3D graphics to the web. This is a very, very cool technology done — in my opinion — in the right way: instead of inventing a whole new API, WebGL takes the established and well-regarded OpenGL ES standard and makes it available to web content.

I’ve written a series of eight articles with corresponding demos. In order to try them out, you’ll need to be running a trunk build of Firefox, and set the webgl.enabled_for_all_sites preference to true.

Getting started with WebGL

How to set up a WebGL context.

Adding 2D content to a WebGL context

How to render simple flat shapes using WebGL.

Using shaders to apply color in WebGL

Demonstrates how to add color to shapes using shaders.

Animating objects with WebGL

Shows how to rotate and translate objects to create simple animations.

Creating 3D objects using WebGL

Shows how to create and animate a 3D object (in this case, a cube).

Using textures in WebGL

Demonstrates how to map textures onto the faces of an object.

Lighting in WebGL

How to simulate lighting effects in your WebGL context.

Animating textures in WebGL

Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.

I should note that the last demo currently badly leaks memory due to a bug in the WebGL code in the current trunk builds of Firefox. A fix is in the works and should hit the tree soon.

I really look forward to seeing some of the excellent stuff that’s likely to come with the introduction of GL support for the web.