Skip to content

Rubik’s Cube in WebGL

by werner on June 25th, 2011

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.


From → Web Design

  1. Great job ! I’ve Been trying to implement a 2 dimensional version of the cube by displaying all the faces side by side, but it was a disaster. I guess webGL is the way !

  2. Hi!
    The download link to the source code is broken. Could you please fix it. Thanks !

Comments are closed.