Parsing Collada 3D assets with JavaScript in the HTML 5 Canvas element

Posted by on Nov 21, 2007 in 3D, Speaking5 comments

A few weeks ago there was a “Fronteers” (the Dutch guild of front-end developers) meeting at our office in Utrecht. I was asked to give a talk about something interesting related to front-end web development. Quite a lot has been said and written about standards, accessibility, etc. so I had to come up with something more exotic.

I ended up giving a talk about the new <canvas> element from the HTML 5 specification. It’s still in its infancy but you can do some nice things with it. I won’t bore you with the details, but you can find more info about this tag at the bottom of this post.

Besides showing all the basic line drawing stuff I wanted to make something that’d be a bit more interesting to the eye. Since I already wrote a Collada parser for the Sandy 3D engine I thought it would be a good idea to see if I could make it work with the canvas tag & JavaScript. Despite of time limitations I was able to make it work acceptably. That said, it’s fairly buggy, not all 3D models parse correctly and there’s some ugly hacks in the code :-). You need Firefox 2 to watch it. Here it is, take a look!

Tags: , , ,


» Comments RSS Feed
  1. Looks great! I will try too :)

  2. Coll indeed. I wonder how many FPS can it run at with a 1000 of triangles? Or would it be SPF :)

  3. is there a way to rotate the object or the camera looking at it? There are only x/y coordinates transformed in the project2D method.

  4. its very good now i try it.

  5. Did this parser of yours improved? I am looking for something to create modell-previews on my website (rotatable), but it is hard to find anything, and write one myself, well it would be way too much time learn anything needed.

Leave a comment