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.uniform1i(program.uOffscreen, true);
  draw();

  // on-screen rendering
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  // we set the uniform to false because of the default render
  gl.uniform1i(program.uOffscreen, false);
  draw();
}

We tell our ESSL program to use only diffuse colors when rendering into the offscreen framebuffer using the uOffscreen uniform. The fragment shader contains the following code:

void main(void) {
 
  if (uOffscreen) {
    fragColor = uMaterialDiffuse;
    return;
  }
 
  // ...
}

The following diagram shows the behavior of the render function:

Therefore, every time the scene updates, the render function is called instead of calling the draw function.

We change this in the init function:

function init() {
  configure();
  load();

  // instead of calling 'draw', we are now calling 'render'
  clock.on('tick', render);
}

This way, the scene will be periodically updated using the render function instead of the original draw function.