In order to perform object selection using the offscreen framebuffer, this one has to be synchronized with the onscreen default framebuffer every time that this last one receives an update. If the onscreen framebuffer and the offscreen framebuffer were not synchronized, then we could be missing addition or deletion of objects, or updates in the camera position between buffers. As a result of it there would not be a correspondence.
A lack of correspondence will hinder us from reading the picking colors from the offscreen framebuffer and use them to identify the objects in the scene. We can also refer to picking colors as object labels.
To implement this synchronicity, we will create the render function. This function calls the draw function twice. First when the offscreen buffer is bound and second time when onscreen default framebuffer is bound. The code looks like this:
function render(){
//off-screen rendering
gl.bindFramebuffer(gl.FRAMEBUFFER...