In order to perform object selection using the offscreen framebuffer, we need to ensure that both framebuffers are synchronized. If the onscreen framebuffer and the offscreen framebuffer are not synchronized, we could miss crucial data, which may make our picking strategy inconsistent.
A lack of consistency will limit the ability to read colors from the offscreen framebuffer and use them to identify objects in the scene.
To ensure that the buffers are synchronized, we will create a custom render function. This function calls the draw function twice. First, when the offscreen buffer is bound, and a second time when the onscreen default framebuffer is bound. The code looks like this:
function render() {
// off-screen rendering
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
// we set the uniform to true because of an offscreen render
gl...