10% idle time in WebGL

Question

I'm using requestAnimationFrame to handle my frame rate in a WebGL game, and running through the Chrome profile shows that a solid 10% of the time is spent in (idle). Why is that? How can I reduce this time, that, unless I'm misunderstanding, is just wasted?

I'm using raw WebGL. Here's part of my rendering code:

Animator.prototype.tick = function() {
  window.requestAnimationFrame(util.bind(this.tick, this));
  if (this.paused) return;
  this.advanceWorld();
  this.drawScene();
};

Full code at: https://github.com/nickgeorge/quantum/blob/master/animator.js

Answer 1

Idle - is "doing nothing" (that is not bad though).
As you run your game with consistent frame rate, in ideal world requestAnimationFrame will do 60 frames a second. Your game logic + rendering might take less than ~16ms (60 frames a second), then the left over time will be considered "idle".

It is not bad, but good: means you have some reserve in terms of processing power. In fact 10% of idle is quiet low and around 0% - will hit your 60 frames performance boundary and frames will drop. Especially on mobile, that will just lead to quick battery drain, and low performance. Different hardware and software performs differently.

Answer 2

False alarm here, it turned out to just be an artifact of how I was pausing/unpausing the game to profile it. It turns out I got a lot more accurate data by using the chrome built-in profiling api, with a function like

profile = function(t) {
  Animator.getInstance().unpause();
  console.profile();
  setTimeout(function(){
    console.profileEnd();
    Animator.getInstance().pause();
  }, t*1000);
};