Framebuffer Binding Order

Question

I am trying to instantiate all my framebuffers outside of a drawing call. But if I do, the render is very buggy.

I think my code should be structured

framebuffer1 = createFramebuffer()
framebuffer2 = createFramebuffer()

draw(){
    bindFramebuffer(framebuffer1)
    drawScene()
    bindFramebuffer(framebuffer2)
    drawFirstPostProcess()
    bindFramebuffer(null)
    drawSecondPostProcess()
}

What does my current code look like

framebuffer1 = createFramebuffer()

draw(){
    bindFramebuffer(framebuffer1)
    drawScene()
    framebuffer2 = createFramebuffer()
    bindFramebuffer(framebuffer2)
    drawFirstPostProcess()
    bindFramebuffer(null)
    drawSecondPostProcess()
}

And here is my real code: (the first post-process is the depth of field, and the second is chromatic aberration)

How to create a copy of the framebuffer GitHub

export function createFramebuffer(gl, width, height) {
    // Framebuffer part
    const colorTexture = gl.createTexture()
    gl.bindTexture(gl.TEXTURE_2D, colorTexture)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
    gl.texImage2D(
        gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE,
        null,
    )

    // Create the depth texture
    const depthTexture = gl.createTexture()
    gl.bindTexture(gl.TEXTURE_2D, depthTexture)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
    gl.texImage2D(
        gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0,
        gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null,
    )

    const buffer = gl.createFramebuffer()
    gl.bindFramebuffer(gl.FRAMEBUFFER, buffer)
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0)
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0)

    gl.bindTexture(gl.TEXTURE_2D, null)
    gl.bindFramebuffer(gl.FRAMEBUFFER, null)

    return {
        buffer,
        colorTexture,
        depthTexture,
    }
}

My main function is where I draw all the elements GitHub

const chromatic = new ChromaticAberration(gl)
const depth = new DepthField(gl)

const bufftex1 = createFramebuffer(gl, canvas.width, canvas.height)

GLB.animate = (time) => {
    window.requestAnimationFrame(GLB.animate)

    gl.enable(gl.DEPTH_TEST)

    gl.viewport(0.0, 0.0, canvas.width, canvas.height)

    gl.bindFramebuffer(gl.FRAMEBUFFER, bufftex1.buffer)

    gl.clear(gl.COLOR_BUFFER_BIT + gl.DEPTH_BUFFER_BIT)

    drawCubes()
    skybox.draw()

    const bufftex2 = createFramebuffer(gl, canvas.width, canvas.height)
    gl.bindFramebuffer(gl.FRAMEBUFFER, bufftex2.buffer)

    depth.draw(
        canvas.width, canvas.height, bufftex1.colorTexture, bufftex1.depthTexture,
        document,
    )

    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
    gl.disable(gl.DEPTH_TEST)

    chromatic.draw(time, canvas.width, canvas.height, bufftex2.colorTexture, document)
}

Update 1

Glitchy:

Correctly:

The object that we see is moved, but in the "buggy" version they do not. There is no error in the browser. This is similar if the framebuffer had only the first call to play.

Update 2

: https://github.com/ice-blaze/lilengine/tree/depth%2313 :

• git clone
• npm install
• npm start
• http://localhost:8080/

Answer 1

: gl.clear(...). , clear.