Cube test for WebGL

Click the animation to change the colours and cube size.

Your browser doesn't support HTML5, which is required for this web page to work properly. Please consider trying again with the latest version of a HTML5 capable browser, such as Firefox, Chrome, Safari or IE9.

 

Perhaps the most exciting thing about HTML5 is the ability to draw on a 2D canvas. However, even more exciting is the possibility to draw on a 3D canvas, which is being developed in some browsers at the moment. That new technology is known as WebGL and it is even integrated into processing.js so that we can use the P3D library to draw interactive 3D graphics directly onto a canvas object on a web page. The example above uses the P3D library to demonstrate simple 3D cube drawing, with the advantage of random colour and cube size.

As WebGL is still in development it won't work on just any browser: you have to view this page in a WebGL enabled browser, such as Google Chrome. Also, the browser will likely need to be told to enable WebGL, as generally it's disabled by default. I did that by copying my Linux desktop Chrome shortcut and changing the properties so that the command target ended with the parameters --enable-webgl %U instead of just %U. So, if you don't see the 3D example running on this page, hopefully you will if you enable WebGL.

Another problem with using a technology still under development is that it may not work as well as you expect. For instance, once the page has loaded into Chrome it takes a long time to start displaying the cube on my computer. In fact, Chrome had to ask me three times whether I wanted to wait for the page, which it said was unresponsive. However, after that it did start running the demo code. Apparently it's recommended that you use the latest nightly build version of Chrome for WebGL use. I didn't, but still got results, so hopefully things will go even better for you if you follow that advice. Having said that, for me it was a wait well worthwhile to see WebGL in action under processing.js. Hopefully you'll think so to.