Setting up an offscreen framebuffer

As shown in Chapter 2, Rendering Geometry, the framebuffer is the final rendering destination in WebGL. When you visualize a scene on your screen, you are looking at the framebuffer contents. 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 our scene offscreen. This will be the first step for 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 to do that.

To set up a framebuffer, we need to be able to create storage for at least two things: colors and depth information. We need to be able to store the color for every fragment that is rendered in the framebuffer so we can create an image; in contrast, we need depth information to make sure that we have a scene where overlapping objects look consistent...