我可以从 JavaScript 中的 WebGL 深度纹理读取单个像素值吗？

Question

简而言之

我想从 JavaScript 中的 WebGL 2 深度纹理读取单个像素值。这完全可能吗？

场景

我正在 WebGL 2 中渲染一个场景。渲染器被赋予了一个深度纹理，它将深度缓冲区写入其中。这个深度纹理用于post处理着色器等，所以我们可以使用。

但是，我需要在 JavaScript 中读取我的单个像素值，而不是从着色器中读取。如果这是普通的 RGB 纹理，我会做

function readPixel(x, y, texture, outputBuffer) {
    const frameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer( gl.FRAMEBUFFER, frameBuffer );
    gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0 );
    gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, outputBuffer);
}

这会将 x, y 处的像素写入 outputBuffer。

但是，是否可以对深度纹理做同样的事情？如果我只是将深度纹理传递给上面的函数，输出缓冲区只有零，并且我会收到 WebGL 警告 GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete.。检查帧缓冲区状态显示 FRAMEBUFFER_INCOMPLETE_ATTACHMENT.

当然，深度纹理不是RGBA纹理，但是我们可以给它一些其他值来获得我们的深度值，还是不可能？

动机

我知道这个问题已经在 Whosebug 和其他地方以某种形式被问过很多次，但总是有一些变化让我很难得到一个直接的是或否的答案以我在这里提出的形式提出问题。此外，许多问题和来源都非常古老，仅 WebGL 1，其中提到 webgl_depth_texture 有所不同等

如果答案是否定的，欢迎就如何轻松获得此深度像素提出任何建议。由于并非对每一帧都执行此操作，因此我更看重简单性而非性能。用例是拾取，经典的射线相交是不可行的。（我也知道我可以将标量深度值编码进出 RGB 像素，但我首先需要能够从 js 代码中访问像素。）

我欢迎任何见解。

Answer 1

不可能WebGL 2.0 is based on OpenGL ES 3.0.
在OpenGL ES 3.2 Specification - 4.3.2 Reading Pixels中明确规定：

[...] The second is an implementation-chosen format from among those defined in table 3.2, excluding formats DEPTH_COMPONENT and DEPTH_STENCIL [...]

我可以从 JavaScript 中的 WebGL 深度纹理读取单个像素值吗？

Can I read single pixel value from WebGL depth texture in JavaScript?

javascript

depth-buffer

webgl

mouse-picking

webgl2

简而言之

场景

动机