Jan 162010

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.

 Posted by at 4:56 AM

  One Response to “Bringing kick-ass graphics to the web in 3D”

  1. I would so love to start playing with WebGL but the computer I have doesn’t want to run it in FF 3.7.x

    I have Windows 7 64 bit with a Radeon 5870 gfx card and FF can’t seem to find the OpenGL library. I know for a fact that the 5870 support almost everything up to v3.3 but FF just can’t seem to find the library. I’ve been trying to find help for weeks to no avail. Maybe somebody here has a workaround?


This site uses Akismet to reduce spam. Learn how your comment data is processed.