我正在尝试实例化我在draw调用之外的所有帧缓冲区。但是,如果我这样做,则渲染会非常毛刺。
我认为我的代码应该如何结构化
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
转到
http://localhost:8080/
最佳答案
答案是:缺少gl.clear(...)
。绑定新的帧缓冲区后,我想这是clear
的好习惯。
关于webgl - 帧缓冲区绑定(bind)顺序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44745025/