Framebuffer绑定顺序

我试图实例化绘制调用之外的所有帧缓冲区。但如果我这样做，渲染是非常糟糕的。Framebuffer绑定顺序

如何，我认为我的代码的结构应

framebuffer1 = createFramebuffer() 
framebuffer2 = createFramebuffer() 

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

如何我当前的代码是寻找

framebuffer1 = createFramebuffer() 

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

这里是我真正的代码：（第一后处理是景深和第二个色差）

我如何实例化一个帧缓冲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, 
    } 
}

我的主要功能，我画的所有元素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) 
}

更新1

出问题：

正确：

的对象，我们可以看到，移动，但在 “出问题” 的版本他们不这样做。浏览器中没有错误。就好像帧缓冲器只有第一次绘制调用。

更新2

你可以在这里找到源代码：如果你想运行项目https://github.com/ice-blaze/lilengine/tree/depth%2313 ：

git clone
npm install
npm start
去

来源

2017-06-25 Ice-Blaze

“* glitchy *”是什么意思？ –

您不应该在渲染循环中创建帧缓冲区。你最终会在每一帧创建一个新的。你是否启用深度纹理？它们默认情况下不可用。如果您的帧缓冲区附件大小与您的画布不匹配，那么您需要为这些视口设置视口。从你的代码中你完全不清楚你想要做什么。你绘制一个天空盒bufftex1，立方体和天空盒bufftex1，然后使用bufftex1绘制与bufftex2深度相关的东西，然后使用bufftex2绘制到画布。但你在做什么？没有向我们展示我们不知道的代码。 – gman

欢迎来到Stack Overflow。如果你想调试帮助你必须创建一个[最小可验证的完整示例]（https://meta.stackoverflow.com/questions/349789/how-do-i-create-a-minimal-complete-verifiable-example）并把它**在问题本身**。只需发布一个链接到你的代码是不可接受的。 – gman

答案是：缺少gl.clear(...)。绑定一个新的帧缓冲区后，我想这是一个好习惯做clear。

来源

2017-06-25 20:29:22

Framebuffer绑定顺序

回答

相关问题