Recording FPS in webGL

Question

I am trying to compare performance for 3d applications on mobile devices. I have a 3d solar system set up in webGL and im trying to record or at least display the FPS. So

Answer 1

Using a rotating array can do better. with dom element:

the following script do the trick:

var fpsLastTick = new Date().getTime();
var fpsTri = [15, 15, 15]; // aims for 60fps

function animate() {
  // your rendering logic blahh blahh.....


  // update fps at last
  var now = new Date().getTime();
  var frameTime = (now - fpsLastTick);
  fpsTri.shift(); // drop one
  fpsTri.push(frameTime); // append one
  fpsLastTick = now;
  fps = Math.floor(3000 / (fpsTri[0] + fpsTri[1] + fpsTri[2])); // mean of 3
  var fpsElement = document.getElementById('fps')
  if (fpsElement) {
    fpsElement.innerHTML = fps;
  }
}