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.

Optimizing Batch Performance

WebGL 2 adds some interesting features, such as geometry-instancing. This feature allows us to render the same instance of a single mesh...