Reputation: 75615
I have a page http://williame.github.com/Mandel_1 that draws an animating webGL scene using requestAnimationFrame
. This is the generally recommended approach.
Occasionally it updates a div-element beside the canvas.
In Firefox, this works well, although the Firefox address bar can be sluggish to focus.
In Chrome, the div often doesn't get repainted despite being updated and the whole of Chrome can become sluggish and unresponsive. I get reports of this from people on both Linux and Windows.
Additionally, the FPS I compute (by periodically counting how many frames in the previous 3 seconds) does not match the FPS that Chrome's own debug FPS counter shows. The discrepancy is enough to make me wonder if Chrome is measuring something else?
How can I structure my draw-loop to keep Chrome and other browsers responsive whilst drawing at as good a frame-rate as possible?
Upvotes: 2
Views: 222
Reputation:
I'm not sure what's going in in your app but it looks like each time you insert a div you are also compiling and linking 4 shaders and checking for success. Compiling and linking is slow.
Try compiling and linking all your programs at startup.
Or, conversely, if you are 100% sure they will compile and link then don't check the compile and link status in which case their compilation and linking will be 100% async relative to JavaScript.
Upvotes: 1