maanantai 25. marraskuuta 2013

requestAnimationFrame

Im alive.. I've been learning javascript (+golang) for few months. Maybe I'll blog about them soon.. but I just wanted to write something about requestAnimationFrame ..
I've been using timeout function in consistant manner in few projects ( http://icegem.net/flip/ , http://icegem.net/the-zombipeli-by-team-omnom/ , + some others ), at the moment I am learning & implementing some particle systems with WebGL ( http://icegem.net/webgl/ (maybe WebCL too in future)), when I got stuff "done" I proudly went and pasted url around the nets "Look another rotating triangle!".. at this time at #opengl ircnet it was pointed out that there was stuttering and the animations lagged.
To this I just thought "are they messing with me, this is just simple test that everything works".. wroong.. different suggestion came up "why there was stuttering" .. now after investigating, it seems that requestAnimationFrame was the culprit. It called the callback function usually at 16ms, but it also sometimes calls it after 32ms, in a pattern fashion. So animating things looked ugly.. On chrome canary this was not observed.

( the testing tool: http://icegem.net/webgl/req/ ) the canvas draws black dot at height of "how many ms passed.

on chrome (Versio 31.0.1650.57 m) I get the following (see those little dots at red X) those are calls that are late:


On chrome canary everything seems fine:

and the webgl animation:

Chrome (those little gaps in otherwise smooth grey gradiant):



Canary (no gaps (well those little gaps are from 16ms animation update, but! they are consistant):