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 can create an image. Additionally, we need depth information to make sure that we have a scene where overlapping objects look consistent. If we do not have depth information, then we would not be able to tell, in the case of two overlapping objects, which object is at front and which one is at the back.

To store colors, we will use a WebGL texture; to store depth information, we will use a renderbuffer.