Tuesday, April 12, 2011

requestAnimationFrame

On the suggestion of @mrdoob today I reworked the animation loops for my Quake 3 and Doom 3 demos to use requestAnimationFrame (if it's available). This won't really produce a visible difference for most people, but it should utilize the browser event loop more efficiently. Paul Irish gives a good explanation of it at his blog.

A side effect of this that may be of interest to other developers is the simple little jQuery plugin I wrote to support this functionality in a cross platform manner that also provides a few perks to the user. You use it like so:

$('#canvas').requestAnimation(function(event) {
    // Draw frame here...
});

The "event" passed into the callback function contains the following values:

timestamp: Current timestamp, equivalent to new Date().getTime()
elapsed: Milliseconds elapsed since the animation started
frameTime: Milliseconds elapsed since the callback was last called
framesPerSecond: Rough count of the number of times the callback has been called over the last second. Only updates once per second.

If you wish to stop animating, return false from your callback.

I recognize that this may not meet everyone's needs, and probably is a little buggy at the moment, but it should provide a quick and easy way to do a basic animation loop in a way that plays well with your browser. If you have any suggestions for improving it let me know!

2 comments:

  1. I like the idea of the jQuery plugin to wrap functionality, will take a look at that!

    I wrote a drop in replacement for setTimeout/setInterval to help developers get the performance increase of requestAnimationFrame without having to refactor their code too much.

    http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/

    ReplyDelete
  2. Pandora Charms Gemstone is actually every single distinctive together with fashionable inside kind, as well as offers become usually well-liked in between ladies, particularly using their own classic kind that may be inherited by way of period to be able to period. Pandora Buckskin Bracelet necklaces is reduced mix to create truly emblematic, substantial appeal anklet bracelets as well as additional gemstone points. Pandora Stores Gemstone offers already been around because of the fact 1982, nevertheless it been found the precise advantages linked to Pandora's customized team inside 1999 which genuinely began their unique status. The precise stunning gemstone linked to Pandora is known as subsequent Ancient greek language False impression linked to Zeus, by which turned out to be angered along with Prometheus together with Epimetheus regarding presenting fireside to be able to mankind, can you make use of fireside to be able to supply gentle for that evening second, which often discouraged Zeus greatly. Pandora Espresso beans Australia Gemstone offers already been around because of the fact 1982, nevertheless it been found the precise advantages linked to Pandora's customized team inside 1999 which genuinely began their unique status. This sort of greatest present which will be valued permanently, Cleaning Pandora Bracelet design amazon . com pandora is reduced that is recognized because of its stylish together with regular design. Pandora is reduced produce a exceptional present for all those unique women and men in your existence.

    ReplyDelete