加快 WebGL readPixels 的拾取速度

Question

我正在实现 GLSL 拾取，它依赖于 readPixels() 来获取单个像素数据。

我的第一次尝试是简单地在屏幕上绘制颜色图（1x1 像素），读取像素，然后在其上绘制。 可悲的是，这导致 fps 从稳定的 60 下降到 30-40。

经过一番谷歌搜索，我发现问题是由 CPU 和 GPU 之间的同步引起的。所以我尝试在屏幕外缓冲区中进行渲染，如此处所述 http://coffeesmudge.blogspot.com/2013/08/implementing-picking-in-webgl.html

但它似乎并没有改变任何东西 - 我仍然在使用缓冲区时从缓冲区中读取（它必须处于活动状态才能 readPixels 工作）。

所以我的问题 - 我可以在屏幕外缓冲区不使用时以某种方式读取它吗？

Answer 1

您可以使用多个渲染目标： https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/

这样，您可以将当前帧缓冲区附加到颜色附件 0，并在颜色附件 1 中附加一个额外的拾取缓冲区。在额外的缓冲区中，您可以写入拾取信息（例如，对象 id）。

由于一切都在一次通过中完成（场景渲染和渲染拾取缓冲区），因此开销应该是最小的。