As shown in Chapter 2, Rendering, the framebuffer is the final rendering destination in WebGL. The results of the rendering on your screen are the contents of the framebuffer. Assuming that gl is our WebGL context, every call to gl.drawArrays, gl.drawElements, and gl.clear will change the contents of the framebuffer.

Instead of rendering to the default framebuffer, we can also render to a scene that is offscreen – we call this the offscreen framebuffer. This is the first step in implementing picking. To do so, we need to set up a new framebuffer and tell WebGL that we want to use it instead of the default one. Let's see how we can do that.

To set up a framebuffer, we need to create storage for at least two things: colors and depth information. We need to store the color for every fragment that is rendered in the framebuffer so we...