Question

我使用代码在WebGL中创建了一个帧缓冲区：

this.buffer = ctx.createFramebuffer();
ctx.bindFramebuffer(ctx.FRAMEBUFFER, this.buffer);

this.depthTexture = this.createTexture(ctx, ctx.DEPTH_COMPONENT, 
    ctx.DEPTH_COMPONENT, ctx.UNSIGNED_SHORT);       
ctx.framebufferTexture2D(ctx.FRAMEBUFFER, ctx.DEPTH_ATTACHMENT, 
    ctx.TEXTURE_2D, this.depthTexture, 0);


this.colourTexture = this.createTexture(ctx, ctx.RGBA, ctx.RGBA, ctx.FLOAT);        
ctx.framebufferTexture2D(ctx.FRAMEBUFFER, ctx.COLOR_ATTACHMENT0, 
    ctx.TEXTURE_2D, this.colourTexture, 0);

使用

绘制它

this.ctx.useProgram(this.forwardShader.program);
this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, this.framebuffer.buffer);
this.ctx.viewport(0, 0, this.framebuffer.size, this.framebuffer.size);
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);

mat4.identity(this.viewMatrix);
mat4.identity(this.modelMatrix);

this.camera.transform(this.viewMatrix);

mat4.translate(this.modelMatrix, this.modelMatrix, [0, 0, -2]);

this.mStack.pushMatrix(this.modelMatrix);

mat4.translate(this.modelMatrix, this.modelMatrix, [0, -1, 0]);
mat4.rotateX(this.modelMatrix, this.modelMatrix, -Math.PI / 2.0);

this.setShaderUniforms();
this.plane.draw(this.forwardShader);

this.mStack.popMatrix(this.modelMatrix);

this.setShaderUniforms();
this.cube.draw(this.forwardShader);

this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, null);

然后使用

渲染结果

this.ctx.useProgram(this.renderTextureShader.program);
this.ctx.viewport(0, 0, this.viewportWidth, this.viewportHeight);    
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);

this.renderTexture.draw(this.framebuffer.colourTexture, this.renderTextureShader);

完美无缺，但是当我更改它以渲染深度纹理时，我得到一个白色的屏幕。我已经检查了相关的扩展是否已启用并将它们存储在一个数组中（显然，如果它们获得了gc，它可能会导致错误。任何关于我做错的反馈都会很好

我的bitbucket

上可以找到完整的代码

Answer 1

深度数据的范围可能有问题，请尝试：

this.depthTexture = this.createTexture(ctx, ctx.DEPTH_COMPONENT, ctx.DEPTH_COMPONENT, ctx.FLOAT);

WebGL Framebuffer是空白的

1 个答案: