如何通过gl.readPixels可靠读取FBO中的深度值？

我尝试通过gl.readPixels从FBO中读取深度值，示例代码如下：

const canvas = document.getElementById("glcanvas");
const gl = canvas.getContext("webgl2");
 
const width = 64;
const height = 64;

const fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);

// COLOR ATTACHMENT
const color = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, color);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, color, 0);

// DEPTH ATTACHMENT
const depth = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depth);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32F, width, height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_MODE, gl.NONE);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depth, 0);

// REQUIRED ON SOME PLATFORMS
gl.drawBuffers([gl.COLOR_ATTACHMENT0]);


// CLEAR DEPTH + COLOR
gl.clearDepth(0.5);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// READ DEPTH PIXEL
const depthPixel = new Float32Array(1);
gl.readPixels(0, 0, 1, 1, gl.DEPTH_COMPONENT, gl.FLOAT, depthPixel);

我在多款显卡和浏览器上测试该最小示例，gl.readPixels均触发错误：

WebGL: INVALID_ENUM: readPixels: invalid format

此外，部分较新的显卡中，gl.getExtension("WEBGL_depth_texture")返回null。请问该行为是否是已知/预期情况？我记得2012年在WebGL 1.0中可无障碍从后台缓冲读取深度值，难道是记忆有误？

问题解答 #

1. WEBGL_depth_texture扩展返回null是预期行为 #

WebGL2原生内置了深度纹理支持，不需要再通过WEBGL_depth_texture扩展启用——这个扩展仅针对WebGL1环境。因此在WebGL2中调用gl.getExtension("WEBGL_depth_texture")返回null是正常且符合规范的。

2. gl.readPixels触发INVALID_ENUM错误的原因 #

WebGL2对gl.readPixels的format和type组合有严格限制：

• 当使用gl.DEPTH_COMPONENT作为format时，默认仅支持gl.UNSIGNED_SHORT和gl.UNSIGNED_INT作为type参数
• 你的代码中使用了gl.FLOAT作为type，而深度纹理是DEPTH_COMPONENT32F浮点格式，这种组合需要设备支持EXT_depth_float扩展才能生效，否则会触发枚举错误。

3. 解决方法 #

方法一：依赖EXT_depth_float扩展（兼容性有限）

先判断设备是否支持该扩展，支持后再执行读取：

const ext = gl.getExtension('EXT_depth_float');
if (ext) {
  const depthPixel = new Float32Array(1);
  gl.readPixels(0, 0, 1, 1, gl.DEPTH_COMPONENT, gl.FLOAT, depthPixel);
}

方法二：通用兼容性方案（推荐）

将深度值渲染到浮点颜色附件中，再读取颜色值：

1. 创建一个RGBA32F格式的浮点颜色纹理附加到FBO
2. 在片元着色器中将深度值写入该颜色纹理的通道（比如gl_FragDepth或直接输出深度值到颜色变量）
3. 使用gl.readPixels读取这个颜色纹理的像素值，以此获取深度数据

这种方法无需依赖特定扩展，兼容性更强。

4. 关于WebGL1读取深度值的记忆偏差 #

WebGL1中默认也不支持无障碍读取深度缓冲区，当时需要依赖WEBGL_depth_texture扩展，同时也受限于格式/类型的匹配规则，不存在完全无限制的深度读取能力，你的记忆存在一定偏差。

内容的提问来源于stack exchange，提问作者resle