I ready about the sale of Dextrose to Zynga by Paul Baukaus, and it got me motivated to poke around with some html5 gaming again (a nice sunday morning thing to do). The outcome was an island generator using three.js and jquery ui.

Rudimentary but functional. 3d javascript for the future!

When you start the demo, you just get an empty sea, but move the cube around with the arrow keys and hold down space to raise some mountains out of the sea. The demo has a bad case of z-fighting, but I only spent an hour or so on this, so I’ll look into those issues in the future sometime.

Three.js

Three is a great library from one of the authors of papervision 3d (so they know what they’re doing when it comes to browser-based graphics). It is surprisingly fast on modern browsers - the slowest thing seems to be the canvas drawing calls, which aren’t hardware accelerated. The great thing about doing javascript work though, is that browsers are being updated so often at the moment (Safari, IE9, Firefox and Chrome) that what is slow but workable today, will be liquid smooth in 6 months time (assuming browser development keeps going like this).

Three also has output support for canvas and webgl. I’m using canvas in this demo.

A 3d game engine

I’d like to play with this demo some more, and turn it into a mini game. I’m currently thinking of using three to render to multiple canvases, and position the camera so that the terrain doesn’t obscure itself, and I can use the browsers native z-order stacking for elements on top of the map. This should make a realtime 3d world doable without pegging the CPU (I have a strong aversion to pinning the CPU to draw a 400 face terrain when this macbook can play TF2 at native resolution).

Then add multiplayer via websockets and node.js and you’d have that multiplayer canvas game that Simon Willison predicted.