Performance Diagnosis

Questions
,
1

I’m using request animation frame to tween an objects position. just going in a linear fashion from a to b. It looks decent enough, however sometimes seems to “stutter” and according to chrome dev tools I get dropped frame(s)

when I look at the performance report I generally get this…

image

which looks good and is an acceptable time.

Unfortunately I sometimes get this…

image
image1855×335 28.9 KB

As you can see its taking significantly longer, I also spot this occasionally

image
image1272×370 24.8 KB

even though still an acceptable time it shows two WebGL.Renderer.renders

These issues seems to occur randomly, so not just at the start or end of my animations.

So my questions…

  • How can I determine why the renderer is taking too long (15ms) in some instances?
  • Does it matter that sometimes it shows two WebGL.Renderer.renders?
  • Am I barking up the wrong tree looking at this, if so, can anyone suggest any other tools to determine why frames are dropping?
2

In general, it’s hard to evaluate performance issues without seeing the code. Even then it’s problematic if the application is quite complex. It’s preferable to reproduce performance issues in small-scaled examples.

Anyway, frame drops in WebGL can be cause by many issues. For example you should ensure to avoid object creation wherever you can. Otherwise the GC overhead will be more noticeable and perform larger frame times. Also subtle things like outdated graphics drivers can cause such performance issues.

I suggest you remove as much code as possible from your app and simplify it until the performance issue goes away. This is often the only way to narrow down a performance issue if you have no clue at all at the beginning.

I’ve experienced that the visualizations of the performance tab are sometimes misleading. If you can ensure that you don’t call render() twice within a single frame, you can ignore this issue.

1 Like
3

If its of any interest to others, I believe I have tracked the issue down, as @Mugen87 suggested, to the GC. I was copying a lot of objects, which could fill it and this caused the GC to fill and need emptying.

image
image796×99 6.73 KB

I also found that using the memory tab on the chrome dev tools really helped (id somehow never actually used it!) as well as making sure memory is ticked on when recording performance, I could tally up the drop in memory.

thanks to @Mugen87 for pointing me in the right direction

4

In backend, setTimeout is more smooth frame rate than requestanimationframe loop. Count by the moment.