Friday, March 2nd, 2007

Canvas 3D Renderer Tweaked

Category: Canvas

Hans Schmucker has updated his Canvas 3D Renderer with new sample data, a few performance tweaks, background image support, support for colored polygons and a few other tweaks here and there.

The car you see is not a sprite, it’s simply an image put in front of the canvas for my amusement. 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.

Hans informally tested in a few browsers and had some feedback:

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.

Canvas Car

Posted by Dion Almaer at 8:10 am

3.5 rating from 33 votes


Comments feed TrackBack URI

and the point of this?

Comment by ajaxianfading — March 2, 2007

The advent of insanely-easy-to-code 3d js games perchance?

Comment by peter svensson — March 2, 2007

@ajaxianfading, you’re right that there isn’t much about Ajax in this post, but it’s still relevant IMO. Javascript experiments are at the heart of all Ajaxian sites, and now that this proof-of-concept is beginning to be realized, who knows what will be achieved with it?

Comment by Mike Ritchie — March 2, 2007

Very neat…

I certainly think it has some applicable use cases. For instance, a fallback engine possibly for X3D content where the client does not have a plugin installed (like Media Machines’ Flux Player, nor wants to install it. The content could be published with varying degrees of detail, the lower detailed objects intended for a canvas based renderer, the higher level stuff for Flux Player, which will handle utilizing the actual GPU.

The author, would of course, have to add support for X3D… but yes, good proof-of-concept.

Comment by Ryan Gahl — March 2, 2007

Interesante, pero he visto otros ejemplos de modelos 3D sobre HTML. Por ejemplo este enlace lo demuesta:

Comment by jesusvld — March 2, 2007

Very cool. Just FYI It works in Safari but Firefox is a little faster. It’s fastest by far in the Webkit nightly build.

Comment by Vance Dubberly — March 2, 2007

it says on the page that it is licensed under GPL 2.5 but where do i get the sourcecode?

Comment by Frankie! — November 5, 2007

Leave a comment

You must be logged in to post a comment.