User Tools

Site Tools


Sidebar

General

Python Tutorials

WebGL Tutorials

Node.js Tutorials

Node.js in WebStorm


Martin Christen

View Martin Christen's profile on LinkedIn


Twitter

Timeline of @MartinChristen

MartinChristen avatar

RT @snebiker: #PlayGameLieschtel - brilliant event by Kantonsbibliothek Baselland #KBL to get kids into libraries, including family #gamede…
About 2 days, 14 hours ago by: Martin Christen (@MartinChristen)

MartinChristen avatar

Only a handful tickets left for @PyConDE in Karlsruhe (October 24-28, 2018) - The schedule is now available at… https://t.co/Og4fp3DsoA
About 5 days, 7 hours ago by: Martin Christen (@MartinChristen)

MartinChristen avatar

IAMCP & @swissmade_sw Augmented Reality event just started https://t.co/bdREI6lJM4 #ar #AugmentedReality #Basel… https://t.co/9KpsdU3fvM
About 6 days, 13 hours ago by: Martin Christen (@MartinChristen)
webgl:tutorial04

WebGL Tutorial 4: Animation - using requestAnimationFrame

When running an a graphics application at 60 frames per second (FPS) a frame must be drawn within 16.67ms.

Quick redrawing frames is a key element of all 3d graphics engines. Using time events (for example setInterval) has many disadvantages, especially it is not synchronized with other animations (for example CSS, SVG, …) and it is not precise enough.

Luckily there is an API for this, the “requestAnimationFrame”, an example call is:

function renderloop(){
  window.requestAnimFrame(renderloop);
  render();
};

The big drawback of requestAnimationFrame: It is still vendor specific and doesn't run with all WebGL capable browsers.

“requestAnimationFrame” is available in:

  • Chrome Version 24+
  • Firefox Version 23+
  • Internet Explorer 10+
  • Opera 10+
  • (Safari: nightly builds only)

The following code created by Eric Möller, Paul Irish and Tino Zijdel is a cross browser solution with a fallback for all browsers:

(function() {
   var lastTime = 0;
   var vendors = ['ms', 'moz', 'webkit', 'o'];
   for(var x = 0; x < vendors.length &&  !window.requestAnimationFrame; ++x){
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                          || window[vendors[x]+'CancelRequestAnimationFrame'];
   }
 
   if (!window.requestAnimationFrame)
       window.requestAnimationFrame = function(callback, element) {
           var currTime = new Date().getTime();
           var timeToCall = Math.max(0, 16 - (currTime - lastTime));
           var id = window.setTimeout(function() { 
                    callback(currTime + timeToCall); },timeToCall);
           lastTime = currTime + timeToCall;
           return id;
        };
 
   if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
         clearTimeout(id);
      };
}());

References
Paul Irish, 2011, "requestAnimationFrame for Smart Animating"
Erik Möller, 2011, requestAnimationFrame for smart(er) animating
Source Code: https://gist.github.com/paulirish/1579671
Mozilla docs: requestAnimationFrame API


webgl/tutorial04.txt · Last modified: 2013/09/03 15:32 by mchristen