Most HTML5-enabled browsers have implemented a new function window.requestAnimationFrame(). This function is a better alternative to the setTimeout and setInterval functions. The function is designed to invoke rendering functions in your gaming application, such as the
drawScene function in our case. It executes in a safe way. It executes the target function only when the browser/tab has focus, which saves precious GPU resources. Using this function, we can obtain a rendering cycle that goes as fast as the browsers allow.
To use this function, we included a new file in our code, webgl-utils.js (https://code.google.com/p/webglsamples/source/browse/book/extension/webgl-utils.js). This small library has many useful functions but we will use only one function from it. We like this library since it has implemented this function in a cross-browser fashion. If a browser does not support it, then it invokes the setTimeout function. The following is the code...