Render 3D Worlds Using CSS and the DOM

Cast your mind back through to mists of time to January 2001 — reality TV is hip and fresh, ‘Dubya’ is unpacking boxes in the Oval Office and Tantek Celik — he of box model hack fame — first introduces the idea of using the interaction of CSS borders to create diagonal lines without the need for graphics . His ‘A Study of Regular Polygons’ demonstrated that by varying the thickness of CSS borders properties it was possible to create simple geometric shapes.

I clearly remember being quite gobsmacked by this idea at the time, but it also seemed a bit too obscure to be truly useful in everyday web development. Admittedly, a few developers managed to tease logos (Kevin did the SitePoint logo in a Tech Times edition) and simple diagrams out of a brittle tangle of DIVs, but in general it was all more about bloodymindedness than utility.

It’s taken five and a half years, but our own James Edwards (co-author of ‘The JavaScript Anthology’) has actually come up with a practical application of the technique. Using nothing more than Tantek’s idea, some JavaScript and some serious math noodling, James has constructed a working dynamic 3D rendering engine. The engine takes simple 2D plans and turns them into a shaded 3D world that the user can freely navigate through. Amazing stuff.

I should make it clear that, like Tantek’s original demo, at this stage it is an exploration of what’s possible, rather than a viable application. You would expect this kind application would fall into dynamic SVG in the near future.

Still, with fond memories of Wolfenstein 3D flooding back, I have to admit the idea of one day stalking my way through a Nazi stronghold built of CSS bricks has a certain appeal.