Framebuffer Binding

Now, when we wish do render to a framebuffer, we bind its object.

gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)

If the size of the framebuffer's textures do not match the size of the HTML canvas, then the screen transform will be incorrect. To update it, we pass the framebuffer's origin and size to gl.viewport .

gl.viewport(0, 0, framebufferWidth, framebufferHeight)

Likewise, when binding the default framebuffer for on-screen rendering, return the screen transform to its default state. The GL provides the default size in its context.

gl.bindFramebuffer(gl.FRAMEBUFFER, null)
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)

Finally, we can freely use the contents of the framebuffer color and depth textures just by binding them as the current texture and sampling them normally.

gl.bindTexture(gl.TEXTURE_2D, colorTexture)

After rendering, unbind this texture prior to rebinding any framebuffer that attaches it.

gl.bindTexture(gl.TEXTURE_2D, null)

Though it might seem like a cool idea, it's not valid to sample from the same texture that you're rendering to. It might do something. Maybe. It won't explode your GPU.