Canvas 3D Renderer updated

Tuesday, February 27, 2007
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

Labels: , , , ,

posted by Hans Schmucker @ 5:42 AM 0 Comments Links to this post

A few words about Javascript

Saturday, December 9, 2006
I'm a bit of a Javascript fan and since I don't have anything better to do right now I though I could tell you about a few typical errors that even the guys over at Google, along with 99% of all pages I know, make.

The problem is that people learn Javascript as well, a Script language, not a proper programming language... which is a shame because Javascript itself is probably one of the most comfortable languages I know. And because they don't see it as a proper programming language they just hack their code until it works... for now.

The worst abomination onto JS is probably browser sniffing: It's a pretty simple technique that's easy to understand which is probably why beginners tend to use it, however it's also a technique that a) requires a lot of testing, b) requires a lot of updates and c) goes completely bonkers when new browsers are released.

What browser sniffing (a.k.a. useragant sniffing) does is "ask" the browser about itself and then taking appropriate measures. Seems simple, right?

Well if it is so simple, then what would happen if you ask a browser if it is a "Mozilla"... Surprise! Pretty much all major browsers (including Internet Explorer) claim to be Mozilla. So let's ask about MSIE to make sure which Mozillas are actually Internet Explorer. Oops, Opera and a few others report that too. OK, then how about finding out which ones are really Mozilla by looking for "Gecko". Oh, Safari says it's "like Gecko". If you want an almost complete list, have a a look here.

You see: it doesn't work and it's really a shame that people still use this first-grader technique if there's a much easier alternative: Method sniffing.

In Javascript, every function or method that does not exist has the value "undefined". So if you want to use something that you are afraid isn't available everywhere, you just ask if the browser supports it directly, instead of asking for the browser and then assuming that a certain browser supports this or that.

For example, lets say we want to use the addEventListener method and as a fallback the attachEvent method, then we simply create a wrapper function:

function wrapperAddEventListener(obj,type,callback){
if(obj.addEventListener!=undefined) obj.addEventListener(type,callback,false);
else if(obj.attachEvent!=undefined) obj.attachEvent("on"+type,callback);
else alert("Sorry, your browser is not supported");
}

And that's it. And it works for pretty much everything, except for some strange HTML behaviours. Now my minions: Spread the word.

The next time I'll be looking at the scope of Variables in JS... a topic that isn't understood by more than a handfull of people, eventhough it's not that difficult. See you next time.

Labels: , , ,

posted by Hans Schmucker @ 12:57 AM 1 Comments Links to this post