Canvas 3D Renderer updated

I’ve updates the Canvas 3D Renderer with new sample data, a few performance tweaks, background image support, support for colored polygons and a few tweaks here and there.

Note however that the car you see is not a sprite, it’s simply an image put in front of the canvas for my amusement. So don’t get confused if it doesn’t behave the way you expect it to do.

Right now the sample data has around 200 faces and while the code is almost ready for shared vertices (which means that one vertex belongs to many faces, resulting in a much lower number of vertices in memory and therefore a lot less calculations) right now a face still consists of 3 vertices, meaning that it does about 500-600 rotations, projections,clipping and collision tests per frame update, with very few optimizations so far and for that the speed is (at least in my opinion) amazing.

What’s interesting to me are the test results… I didn’t time them, so I can’t give you any numbers, but
Opera 9.1 is definitely the slowest one, but with a very steady framerate, which probably means that drawing and garbage collection are very fast (as these tend to take up a variable amount of time), but arithmetic is slow.

Firefox 2 is pretty steady as well, and a lot faster than Opera.

Firefox 3 Alpha is certainly the fastest browser, but with a very unsteady framerate. I guess the new garbage collector is causing this while drawing speed is increasing thanks to Cairo.

You can still find it at http://tapper-ware.net/canvas3d/ (Note that the background gets drawn during the first screen update after the image has loaded, so it will probably take a second or two to appear the first time you load the page. Screen updates happen whenever you move around).

P.S. I’d appreciate it if you could send me mail if you want me to answer your comments. hansschmucker at gmail dot com

2 thoughts on “Canvas 3D Renderer updated”

  1. Is it possible to load other .obj files other than the one (rr1.obj) you’ve created? I’ve tried exporting from Blender to .obj models that I’ve created but I cannot view them like you can with your demo? Also, is there a way to control a movable camera in the 3D space? This demo is extremely interesting and I highly suggest you further it’s development! Thanks – Luke

  2. Hey Luke.

    It should be possible with any triangulated model, but in order to get colors, you’ll have to hack the format a bit. But by now this sample is really horribly outdated: There are lots of better software renderers out there now.

    If you still want to use this one for some reason, there’s an updated version at
    http://www.tapper-ware.net/devel/js/JS.tinyDim/
    that works a lot better with more complex models and has limited support for normals and lighting.

    By default it loads
    http://www.tapper-ware.net/devel/js/JS.tinyDim/rr13.obj
    It should be able to read any obj file that uses
    v float float float
    for vertices and
    f integer/integer/integer integer/integer/integer integer/integer/integer
    for faces.

Leave a Reply

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

*