Webgl 帧缓冲区绑定顺序
我正在尝试实例化draw调用之外的所有帧缓冲区。但如果我这样做,渲染会非常容易出错 我认为我的代码应该如何构造Webgl 帧缓冲区绑定顺序,webgl,framebuffer,Webgl,Framebuffer,我正在尝试实例化draw调用之外的所有帧缓冲区。但如果我这样做,渲染会非常容易出错 我认为我的代码应该如何构造 framebuffer1 = createFramebuffer() framebuffer2 = createFramebuffer() draw(){ bindFramebuffer(framebuffer1) drawScene() bindFramebuffer(framebuffer2) drawFirstPostProcess()
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()
}
这是我的真实代码:(第一个后期处理是景深,第二个是色差)
如何实例化帧缓冲区
我绘制所有元素的主要功能
更新1
故障:
正确:
我们可以看到的物体在移动,但在“glitchy”版本中,它们没有。浏览器中没有错误。这就像帧缓冲区只有第一个draw调用一样
更新2
您可以在此处找到源代码:
如果要运行项目,请执行以下操作:
git克隆
npm安装
npm启动
- 转到
http://localhost:8080/
答案是:缺少
gl.clear(…)
。绑定一个新的帧缓冲区后,我想做一个清除是一个好习惯,“glitchy”是什么意思?你不应该在渲染循环中创建帧缓冲区。最后,每帧都会创建一个新的。是否启用深度纹理?默认情况下,它们不可用。如果帧缓冲区附件大小与画布不匹配,则需要为其设置视口。从你的代码中根本不清楚你想做什么。将天空框绘制到bufftex1,立方体和天空框绘制到bufftex1,然后使用bufftex1将一些与深度相关的内容绘制到bufftex2,然后使用bufftex2绘制到画布。但是你在干什么?如果不向我们展示代码,我们就不知道了。欢迎来到堆栈溢出。如果需要调试帮助,必须创建一个a并将其放入问题本身。仅仅发布代码链接是不可接受的。
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,
}
}
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)
}