0

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!

petehallw
  • 1,014
  • 6
  • 21
  • 49
  • 1
    I don't see any code here that re-draws the canvas every frame, but you should put `meter.tick()` into that method (your `tick`?), not just in the init. – Sebi Dec 27 '14 at 22:53
  • I have now put it in the function which draws the scene and it works. Thanks for that :) – petehallw Dec 27 '14 at 22:56
  • FYI: [Chrome has a built in FPS Meter](https://developer.chrome.com/devtools/docs/tips-and-tricks#counter-display) (FF probably does too?) – gman Dec 27 '14 at 23:27
  • @petehallw I'm glad I helped, I'll post an answer, so that the question isn't left "unanswered" :) – Sebi Dec 28 '14 at 00:16

1 Answers1

0

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) ?
}
Sebi
  • 1,390
  • 1
  • 13
  • 22