Real-Time 3D Graphics with WebGL 2 - Second Edition

Optimization Strategies

If you play around a little bit and increase the value of the ballsCount global constant from 50 to 500, you will start to notice that the frame rate degrades:

In the preceding screenshot, the rendering hovered roughly around 30 frames per second. Depending on your computer, the average time for the draw function can be higher than the frequency at which the animation timer callback is invoked. This will result in dropped frames. To correct this, we need to make the draw function faster. Let's see a couple of strategies to do this.