WebGL - 3d in the browser

You may have noticed the software on this blog is written in javascript (HTML5 Canvas), with the goal being you don't have to download any software to view the demos.

The trade off is things run much slower than native code. But computers are really fast nowdays & and people's attention span and desire to install software is very low.

Finally there seems to a 3d web standard emerging, WebGL - a 3d version of the 2d canvas library I have been using, and so fits in the same niche described above. Click to find out "does your browser support WebGL?"

Some cool examples: http://www.chromeexperiments.com/webgl

A Tron Lightcycle game on 3d surface: http://cycleblob.com/

Canvas Wrapper with getTransform()

The Canvas spec does not include a getTransform() method, so after performing rotation/scale/translation operations there is no way to work out where you really are.

So, I have created a wrapper class, which sits over the top of Canvas, and should behave exactly the same, except you now have a getTransform() method which returns a matrix such that the following doesn't do anything:

var m = ctx.getTransform();
ctx.setTransform( m[0][0], m[0][1], m[1][0], m[1][1], m[2][0], m[2][1] );

To use, add the following line:

<script type="text/javascript" src="canvas_wrapper.js"></script>

then wrap your canvas object in a CanvasWrapper, ie:

ctx = new CanvasWrapper(document.getElementById("canvas").getContext("2d"));

It works by duplicating Canvas' matrix operations, and mimicking the Canvas interface. An annoyance is that Canvas has public fields, instead of accessor methods, so I can't tell when it has been changed and have to update the canvas state before any drawing call.

Update 10/2/2013: Thanks to Heikki Pora for a patch adding some missing features.

Update 19/5/2015: The HTML Spec now includes context.currentTransform but it doesn't work for me in Firefox or Chromium, ctx.mozCurrentTransform does work in Firefox.