javascript - WebGL帧缓冲区为空

我已经使用以下代码在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'ed了，可能会导致错误。有关即时消息做错了什么的任何反馈都很好

完整的代码可以在我的bitbucket上找到

最佳答案

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

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

关于javascript - WebGL帧缓冲区为空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15987049/