Canvas in full 3D

Normally you'd use canvas for 2D graphics only, but with the recent releases of next-gen javascript engines (Tracemonkey, V8 and Squirrelfish) overall speed got an immense boost, so we've been putting some more effort in a canvas based 3D engine.

What’s canvas?

Canvas is an html5 element that allows you to create images via javascript using a built in set of drawing methods for creating lines, fills, transformations and more. Because it’s basically just a pixel buffer, it doesn’t suffer from performance or memory consuming overhead, making it both fast and reliable.

Demo

An early demo of the engine didn’t do any texturing or real user interaction yet, but both of these things have since been added (albeit preliminary), and can now be seen in action in this new flickr-enabled mashup demo. Click any panel to assign a random photo to it. All photos used in this demo are from the Lost Boys flickr group.

Current work on the engine includes better texture mapping, and Collada support – of which the latter is already coming along nicely ;) A demo featuring this will follow soon.

Canvas is currently supported by all browsers except IE. Although various techniques are available for bridging this gap, this engine is probably a few bridges too far to ever work without native support or a plugin.

Marcus Westin made a short clip and put it on youtube:

17 reacties

• Dat ziet er goed uit! Papervision here we come :)

  reactie van Arjen op 19 November 2008 14:51

• Absolutely awesome! Canvas FTW!

  reactie van Paul Downey op 19 November 2008 16:46

• WOW - that's what I can say about it :)

  reactie van op 19 November 2008 18:41

• good stuff. I like the mouse/object event functionality.

  Almost 2 years ago I made a prototype 3d js canvas engine that supports .obj 3d and .mtl color files. I based it on this one, which you may know:
  http://www.tapper-ware.net/canvas3d/

  The OBJ import I implemented may be useful to you. I didn't have time to add Collada support - I think it was kind of new at the time. Send me your email address if you think you'd like to take a look at it.

  reactie van jason op 19 November 2008 19:03

• Will this be open source? What will the license/usage policy be?

  reactie van Andrew Wooldridge op 19 November 2008 19:39

• Leck mich am Arsch - ist das geil.

  reactie van phpeter op 19 November 2008 22:37

• I am also curious about the license, I would like to see a basic physics engine and collision and would even be willing to contribute.

  Thanks

  reactie van Rob Ellis op 19 November 2008 22:52

• I'd love to contribute too, if you're going to open source it.

  reactie van Bill Mill op 20 November 2008 00:33

• For IE canvas, could you use moocanvas?
  Also another vote for open source.

  reactie van rdza op 20 November 2008 10:35

• Potverdikkeme Peter! En dan heb je het beste nog verzwegen! Groetjes, EP.

  reactie van Eric-Paul op 20 November 2008 10:51

• Awesom! and you can see the Google Chrome's power with those examples, it's faster than any browser...

  reactie van jose op 20 November 2008 12:29

• Nice! Will IE8 support canvas?

  reactie van Jeroen op 20 November 2008 12:51

• peter = koning

  reactie van Kjeld op 20 November 2008 14:03

• Wait until you can use threads to offload heavy computing so it doesn't block the UI. (Coming in Firefox 3.1.)

  reactie van Christopher Blizzard op 21 November 2008 16:18

• En dan probeerde je dat jaren geleden op een zoldertje in Utrecht nog met simpele dHtml omgevingen en daar was geen performance te behalen! Errug cool wat je er nu allemaal uit weet te trekken!!!

  reactie van Martin Reurings op 24 November 2008 02:20

• Te gek. One step beyond!

  reactie van Remco Koene op 27 November 2008 12:47

• Wow! een soort Papervision 3D. Heel erg goed gedaan! Goed voor de inspiratie! Bedankt!

  reactie van Webdesign etten leur op 01 December 2008 15:32