3D on canvas

Skip menu

3D on canvas

Since pretty much all browsers support canvas nowadays - and have been blessed with brandnew and ever faster scripting engines - doing 3D stuff in the canvas' 2D context has (in my opinion) become a viable technique for non-plugin based coolness. Below is a selection of demo's I'be been working on, running on a javascript 3D engine that will probably be released for wider use somewhere in the future.

with Lost Boys # The flickr mashup

flickr mashup This was the very first demo, originally posted on the Lost Boys blog, then finding its way to ajaxian, and finally chrome experiments.

Although being the first demo, it is still the most interactive demo of them all, and showcases the essence of what this engine will one day do :)

collada # The earth

The earth Until I started looking around, I didn't know there was an xml based format for 3D scenes called Collada. I had been using my own "format", but this was obviously way easier, since 3D modelling apps can export it.

This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.

dramatically lit # Duck

Dramatically lit duck The dramatically lit duck is another demo using a collada file als a base, with some custom topping.

The duck rotates around its center, while two lights with different colors dramatically illuminate it from both sides.

rotating # Cubes

Rotating cubes This demo basically makes no sense; its only purpose is to demo camera movement, rotation, and realtime lighting on rotating surfaces.

Before, lighting was statically applied once, but that obviously looked weird on rotating bodies.