Stuttering with requestAnimationFrame and no obvious culprit

[Kulimaze]

Hi,

We're currently using Pixi.js for a few projects and we're encountering a strange issue with inconsistent FPS and can't find the cause. We're using the PIXI.Ticker to execute our render loop which works most of the time, but for short periods of time our game will visually stutter. I've been profiling the game and I'm noticing that a lot of frames are taking around 17ms to render even though our animation loop is finishing anywhere between 3-7ms. I've also checked time spent on network decoding and everything is completing in under 1ms so it doesn't seem like that could be the cause.

I also found a few cases where the frame takes >100ms to complete even though our animation loop took 7ms, which seems like strange behaviour.

If you want to see the game in action to test it yourself: http://spinz.io/ 

[ivan.popelyshev]

You asked me to to profile, but you don't ask with respect^W^W^W, you dont give unobfuscated code.

One of the possible problems i see is that you put all circles in big graphics object instead of using sprites with generated textures. "updateGraphics" in webgl mode takes too much.

And yeah, GC is a problem too.

Also, do you have stats on how many users have webgl?

[ivan.popelyshev]

Also, do you use setTimeout() to handle websocket connection while user browses another tab? Game state has to "catch up" even if requestAnimationFrame is stopped, otherwise its a problem when user changes tabs, buffer simply overfows.