Real-Time 3D Graphics with WebGL 2 - Second Edition

Creating a Renderbuffer to Store Depth Information

Renderbuffers are used to provide storage for the individual buffers used in a framebuffer. The depth buffer (z-buffer) is an example of a renderbuffer. It is always attached to the screen framebuffer, which is the default rendering destination in WebGL.

The code to create a renderbuffer looks like the following code:

const renderbuffer = gl.createRenderbuffer();gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);

The first line of code creates the renderbuffer. Similar to other WebGL buffers, the renderbuffer needs to be bound before we can operate on it. The third line of code determines the storage size of the ...