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
- 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.