How do I measure FPS in my WebGL page using FPSMeter?

Question

I am trying to measure the FPS that I am getting from my WebGL webpage, using FPSMeter . I would like to measure the FPS from within canvas element, in which I am rendering a graphic. The body and canvas are declared as follows:

<body onload="webGLStart();">

<canvas id="canvas" style="border: none;" width="800" height="500" align="center"></canvas>

</body>

I declared a new instance of FPSMeter and webGLStart() is defined as follows:

function webGLStart() {
    var canvas = document.getElementById("canvas");
    initGL(canvas);

    meter.tickStart();

    initShaders();      
    initBuffers();

    document.onkeydown = handleKeyDown;
    document.onkeyup = handleKeyUp;

    tick();
    meter.tick();
}

I am seeing the FPS meter on my page however the FPS begins at around 7 and drops to 0 after a second or so.

Does anyone know why this might be happening and how to fix it?

Many thanks!

Answer 1

You need to move the benchmarking code into your function that does the drawing, like so:

function tick() {
    meter.tickStart();
    // draw the scene here
    meter.tick();
    // requestAnimationFrame(tick) ?
}

How do I measure FPS in my WebGL page using FPSMeter?

Question

1 answers

solution1
0 ACCPTED 2014-12-28 00:21:42

How do I measure FPS in my WebGL page using FPSMeter?

Question

1 answers

solution1 0 ACCPTED 2014-12-28 00:21:42

solution1
0 ACCPTED 2014-12-28 00:21:42