Rubik’s Cube in WebGL

WebGL is a new 3D graphics context for the <canvas> HTML element. It allows to create high-performance 3D rendering in a browser without the need of plug-ins. The WebGL graphics context is an OpenGL ES API for JavaScript.

I think, the WebGL API should be very familiar for everyone who has already programmed with OpenGL in C++ and GLSL. Creating a 3D rendering with WebGL typically involves the following steps:

1. Add a <canvas> element to an HTML page.
2. Access the element from JavaScript, and get the WebGL context.
3. Load a vertex shader and a fragment shader into the context.
4. Load geometry, colors and textures into the context.
5. Specify a camera matrix and transformation matrices.
6. Draw the geometry through the context.

I have ported one of my virtual Rubik’s Cube applets from Java to WebGL. To ease my work, I used some code from the WebGL demo repository. Below is a screenshot.

You can try it out here.

WebGL is currently supported in Chrome 12 and Firefox 5. Safari and Opera have preview versions which support it. As always, Internet Explorer lags behind.