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

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!

  • Delicious
  • Facebook
  • Digg
  • Reddit
  • StumbleUpon
  • Twitter

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

  1. Matthias says:

    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.

  2. Andari says:

    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 Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>