OpenGL for the web

The WebGL specification gives web developers access to an OpenGL ES 2.0 drawing context for the canvas tag. What that means is that you can finally harness the power of the GPU for awesome visuals and heavy-duty number crunching in your web apps.

OpenGL ES 2.0 is a subset of OpenGL 2.0 aimed at embedded devices and game consoles. As such, it's a very minimalistic low-level API, even more so than desktop OpenGL. In fact, if you took desktop OpenGL and stripped out everything but shaders, vertex arrays and textures, you'd get something quite like OpenGL ES 2.0.

As there is no fixed-function pipeline, you need to write GLSL shaders to draw anything. And you need to do your own transformation math, including keeping track of the transformation matrix stack. So the raw API is really not for the faint of heart; you do need to know your 3D math and shading equations.

For example, to draw the spinning cubes on the right - around 200 lines of application code, 250 lines of shaders and 800 lines of library code - I had to scrounge the internet for GLSL shaders to do the transformation and lighting, write a small matrix math library in JavaScript and a DOF blur shader. While highly educational, it was also a rather steep hill to climb.

So, the intended audience of the raw context interface are not really end-users, but library developers who can write easy-to-use interfaces to the functionality, and 3D developers who require a high level of control over the rendering pipeline.

The really cool thing about the OpenGL Canvas is that it doesn't make policy decisions. There's no single set-in-stone use case for it: In addition to 3D graphics, you can also use it for filtering images, visualizing fluid dynamics, doing real-time video effects, or just crunching a whole lot of FP math. If you can do it on the GPU, you're in luck!

You can also place content above the canvas