Canvas 3d JS Library

One aspect of the library which can use improvement is loading Models. Currently, to load a model, one would have export an asset to a .obj format from an authoring tool then run the file through a converter. The converter reads the vertices, normals, etc and writes them out to a .js file. That file simply contains the arrays need to load the model. That file is then imported into an html file as a js resource and the variables from the file are ready to be used. So a model can be created as such:

Var model = new Model();

model.init(sphereVerts, sphereNormals, SphereTex, sphereFaces);

Where the parameters are defined in the file. The problem with this approach is that is introduces possible naming conflicts and is awkward to use as a model has to go through several passes just to get it into a scene. This approach is used because JavaScript can’t directly read files. The tradeoffs of parsing data this way are a bit high and we are now working on loading collada data, a .dae file which is really just xml. The parsing will be slower, but the process of getting a model into a scene will be more intuitive and less work on the user’s side as they will only have to do minimal conversion.  If they have an asset in another format, they can convert it.  But this is something we pretty much can’t avoid.  Even if we decided to use another format, we would have to jam it inside an xml file and that would just be awful.  We might as well use a standard that’s not only supported by many authoring tools, but also web-friendly.

When deciding which format to support for model loading, we rejected collada because it appeared unacceptably slow.  It turns out it was the script itself and not something in the .dae which was slowing it down.  So now our model initialization becomes:

var model = new Model();

model.init(“car.dae”);

Inside the car.dae is a reference to a texture, which the parser will take care of loading and applying to the geometry. It makes creating models easier, but more complicated in the library. The collada file actually contains a scene graph and writing one in JS is a bit intimidating. Nonetheless, it must be done for proper support.