FPS WebGl

FPS (frames per second or frame rate) is very important  in computer graphics programming to determine the performance of your game or program. Usually the best FPS is around 60(monitor refrash rate is usually at 60 hz) but you can go down to 30 FPS without notice big changes in performance. Below 25-30 FPS  things get worse and you notice stuttering which is annoying . Based on FPS you can also do some comparison between hardware components.

 

1x1.trans FPS WebGl

 

For JavaScript and WebGL the CPU plays a big role. JavaScript being interpreted is not as fast as C/C++ thus for performance try to move everything  that is math based (like matrix multiplication) on the GPU via shaders.

First let me clarify some things: You can’t actually compute GPU  FPS  in browser because rendering is done using an asynchronous queue. The method used below gives you only an idea about JavaScript timing. Maybe in WebGL 2.0 will have some options to see GPU usage. This extension could do the trick to see GPU timing but for the moment it can’t be used in any browser : Ext_disjoint_timer_query

Now to compute JS FPS” you must count the number of frames(n) processed over a time period(t). The time period is 1 second (1000 ms), you can experiment with other intervals but 1 avoids division.

FPS = n/t=n/1=n;

function init(){
    
    var timeNow=0;
    var fps=0;
    var timeLast=0;
    
    tick();
    function tick() {
        //from webgl-utils.js
        window.requestAnimFrame(tick);
        
        computeFps();
        update();
        draw();
    }
    
     function computeFps() {
        timeNow = new Date().getTime();
        fps++;

        if (timeNow - timeLast >= 1000) {
            //Write value in HTML
            //multiply with 1000.0 / (timeNow - timeLast) for accuracy
            document.getElementById("FPS").value = "FPS: " + Number(fps * 1000.0 / (timeNow - timeLast)).toPrecision( 5 );
            
            //reset
            timeLast = timeNow;
            fps = 0;
        }
    }
    
}

Beside FPS  you should compute the number of milliseconds it takes to process the frames, because FPS cand give  misleading results.  If frame rate drops from let’s say from 400(2.5ms to render) to 200(5ms to render) and from 60( 16.66 ms ) to 30 ( 33.33 ms ) FPS  you will say  …wow what a huge difference between 400 and 200 FPS . In bouth cases the number of milliseconds doubled.

 function computeFps() {
        timeNow = new Date().getTime();
        fps++;
        
        if (timeNow - timeLast >= 1000) {
            //Write value in HTML
            //multiply with 1000.0 / (timeNow - timeLast) for accuracy
            document.getElementById("FPS").value = "FPS: " + Number(fps * 1000.0 / (timeNow - timeLast)).toPrecision( 5 );
             
            document.getElementById("msframe").value =1000/fps;
            //reset
            timeLast = timeNow;
            fps = 0;
        }
    }

There are some cool tools that you can use to show you FPS and ms with some graphic history. I like stats.js very much, also  if you are using chrome check chrome’s FPS  by activating chrome://flags/ (in your url bar). Also I included here webgl-utils.js which I use in my projects. There are other versions of this on the internet, I like to use this because it is simple. But you can check Paul Irish post about this topic or Source code from Gman. Also check WebGL Stats


webgl-utils.js :

/**
* Provides requestAnimationFrame in a cross browser way.
*/
window.requestAnimFrame = (function () {
 

    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
         function (/* function FrameRequestCallback */callback,/* DOMElement Element */element) {


             window.setTimeout(callback, 1000 / 60);

         };
})();

window.cancelAnimFrame = (function () {
   
    return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.CancelRequestAnimationFrame;

})();


Tagged under:
blog comments powered by Disqus