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

Please note that the size of the storage is the same as with the texture. Similar to before, we need to ensure that for every fragment (pixel) in the framebuffer, we have a color (stored in the texture) and a depth value (stored in the renderbuffer).