David Emery Online

Web 3D

6 September 2006

One of the more interesting talks at BarCamp London was Matt West’s talk on 3d using JavaScript. In it he showed how you can use javascript as a software renderer to render basic 3d using the canvas tag – which only WebKit/Safari, Mozilla/Firefox and Opera support. The demo was pretty impressive, and the library it’s based on – Canvastastic – has support for gouraud shading and basic primitives; it takes me right back to when I was a game developer…

However, one thing – no matter how impressive it was (very!), it’s not actually useful. To start, the lack of IE support almost kills it dead before it’s even really got going. Coupled with the fact that it really needs a MacBook Pro or better to run at a decent frame rate, and the lack of texturing support mean that it’s potential for use in the real world is limited at best.

After having seen the talk I started to think about the possibilities that would be opened up if we did have decent 3d capabilities in browser. Obviously at the moment we can do 3d using Shockwave-Flash, and it actually works reasonably well – it has gpu support, so games and the like are quite speedy. The downside, obviously, is that you have to have the full Shockwave plugin, and you get all the traditional Flash problems along with it.

What if, instead of 3d being part of a browser plugin, it was actually built into the html/css spec?

When styling objects, as well as the current width: and height: attributes in css, we could add a depth: attribute. This would allow simple 3d compositing, so that when a div, for example, was given a depth of 100px the div would appear 100px into the page, and hence be smaller then normal (and the content appear smaller, as opposed to text overflowing for example).

This would allow for some interesting effects, but it doesn’t really get us anywhere. To really start getting useful we’d need some more css attributes. As all html block elements are rectangular, we can add some attributes for the corners: top-left-depth, top-right-depth, bottom-left-depth and bottom-right-depth. Each of these obviously corresponds to the depth of each corner, so we could then make – for example – one side of a div recede into the distance.

So, if we’ve got this far – and this is already quite useful (we could do Vista task switcher style controls, for example) – we can start to make some assumptions about how the rendering engine is working, and hence what it could do. It would make the most sense to base the renderer upon something like OpenGL – in the same way Quartz is based on it, and Aero in Vista. The implementation would then inevitably use a rectangle (made from a triangle pair) for each block element, texturing it with its contents.

That opens up even more interesting possibilities. Firstly, we might as well have top-left, top-right, bottom-left and bottom-right attributes, each of which take 5 values: top, bottom, left, right and depth. Most of the time I would imagine you’d specify top, left and depth, and leave the others as auto. This would then allow block elements to be transformed, stretched etc. Another vital attribute would be rotate: which would be 3 values, allowing the element to be rotated in 3d.

Two more things quickly – I’ve rambled on quite enough already. Firstly, we should then get some primitives build in. In the same way we have divs, we should have cubes, spheres, pyramids and cylinders. These could be marked up in a similar way to tables, something like this:

<cube>
<topside>Some content</topside>
<leftside>More content</leftside>
...
</cube>

These would then texture map their contents onto the appropriate sides of the primitive.

As a final hurrah, some form of 3d format should be supported natively (possibly multiple formats). Having a 3d object appear on a page should be as easy as having an image, and combined with some of the above ideas could be incredibly powerful – imagine a 3d object, containing elements that are rendered by the browser such as text and links floating on your page.

The possibilities would be almost endless, but on a very basic level would allow designers to add subtle, usability enhancing effects such as growing elements and perspective shifting incredibly easily.