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 ...

Get WebGL Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.