# 10% idle time in WebGL

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.drawScene();
};

• Are you using raw WebGL or some framework alike three.js? – Kromster May 22 '14 at 7:15
• just raw. If you're curious: github.com/nickgeorge/quantum/blob/master/animator.js – Nick May 22 '14 at 7:16
• I've included that to the question, thx – Kromster May 22 '14 at 7:20
• If you increase the work load - more updates/rendering - does it stay fixed at 10% or drop? It may simply be that for 10% of the time there is nothing else to do other than idle. – OriginalDaemon May 22 '14 at 9:51

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.

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);
};