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，它可能会导致bug。任何关于我做错了什么的反馈都会很好

---

可以在my

上找到完整代码。深度数据的范围可能有问题，请尝试：

this.depthTexture=this.createTexture（ctx，ctx.DEPTH\u组件，ctx.DEPTH\u组件，ctx.FLOAT）；

这样做会导致错误“无效的\u操作：texImage2D:深度\u组件格式的类型无效”。我怀疑，虽然启用了深度纹理和浮点纹理的扩展，但从yetDepth线性化开始，这两种纹理无法结合使用