WebGL 2 adds some interesting features, such as geometry-instancing. This feature allows us to render the same instance of a single mesh with differing shader attributes using instancing and only one render call. Though instancing is limited, as it’s based on the same mesh only, it’s still a great way to improve performance if you have to draw the same meshes multiple times, especially if combined with shaders. While this functionality is provided in WebGL 2, we'll build our own geometry-optimization techniques for educational purposes. We will cover WebGL 2's geometry instancing feature in Chapter 11, WebGL 2 Highlights.

How do we optimize our scene without using the WebGL 2 geometry-instancing API? We can use geometry-caching as a way to optimize the animation of a scene full of similar objects. This is the case in the bouncing balls example. Each bouncing ball has a different position and color. These features are unique and independent for each ball. However, all of the balls share the same geometry.

In the load function, for ch05_03_bouncing-balls.html, we created 50 vertex buffer objects (VBOs) for each ball. Additionally, the same geometry is loaded 50 times, and on every rendering loop (draw function), a different VBO is bound, despite the geometry being the same for all the balls!

In ch05_04_bouncing-balls-optimized.html, we modified the load and draw functions to handle geometry-caching. In the first place, the geometry is loaded just once (load function):

function load() {
  scene.add(new Floor(80, 2));
  scene.add(new Axis(82));
  scene.load('/common/models/geometries/ball.json', 'ball');
}

Second, when the object with the 'ball' alias is the current object in the rendering loop (the draw function), the drawBalls delegate function is invoked. This function sets some of the uniforms that are common to all bouncing balls (so that we do not waste time passing them every time to program for every ball). After that, the drawBall function is invoked. This function will set up those elements that are unique for each ball. In our case, we set up the program uniform that corresponds to the ball color and the Model-View matrix, which is unique for each ball because of the local transformation (ball position):