Blog about (Web-) Programming, Graphics and Games.

01.11.2010

WebGL/bullet.js Demo

The demo shows two characters, the left is calculated using the physics library bullet.js, the right without physics. You can toggle the use of physics with a checkbox. On my Pc I get following framerates:

with physicswithout physics
Chrome 819 fps59 fps
Firefox 4 beta 6~17 fps (heavily varying)60 fps

Its interesting, that there isnt the performance gap between Chrome and Firefox, that was observed in an earlier blogpost, anymore. The reason are improved javascript engines and webgl- instead of software-canvas output. Though the Firefox physics performance varies heavily (sometimes drops to 3fps), probably because of background optimizations, while Chrome display is smooth.

Update: bullet.js, together with this and 2 Canvas demos, is now also available here: http://code.google.com/p/bulletjs/

9 Kommentare:

Denis hat gesagt…

Hi pl4n3,

Very good suit. Now would be a bit faster (+ -10 fps) using air as the following example callback.

(Function () {
draw ();
setTimeout (arguments.callee, 0);
})();

Another thing is to use the webworkers on the physics and animation in GLSL gain too many FPS ...

pl4n3 hat gesagt…

Hi, thanks for the comment!
Yes, that might fasten things. I will try out webworkers, havent done this before, very interesting technology.. I also did some idle time with setTimeout(..,15), so that the webpage dont takes all cpu usage, but a benchmark should get all cpu.. :)

Jas hat gesagt…

Wow, this is awesome!

How did you do this port? By hand, or with some kind of automated process?

I'm tempted to start using the code in my projects, but I wonder how easy it will be to keep it in sync with bullet upstream.

pl4n3 hat gesagt…

Yes, the port is done by hand from JBullet. So any changes or bugfixes for Bullet or JBullet have to be synced manually.

Anonym hat gesagt…

Well, the javascript version can be nearly as fast (maybe 2 times slower instead of 10), but you have to completely hand-optimize it and get rid of using objects, using typed arrays, caching and such and use a javascript optimizer that will do some optimalizations like inlining, simplification etc like Closure Compiler can do a little bit.

Anonym hat gesagt…

This is another attempt btw:
http://syntensity.blogspot.com/

pl4n3 hat gesagt…

Yes, I have seen the Bullet/WebGl demo (via LLVM->Javascript compilation). Its awesome. The optimizations sound interesting, though the source should stay maintainable. Best would be, if the Javascript JIT-Compiler does the optimizations and inlining itself. :)

Adrian Sweeney hat gesagt…

What browser do you use to see this.

I'm on FF4b7 and it can't initialise the webgl

pl4n3 hat gesagt…

Here it runs with FF 4 beta 6 and Chrome 8. I will test it soon with FF 4 beta 7. Do other WebGl demos run on your system? Imo sometimes WebGL cant initialize, when it cant find right gfx-card/driver..