着色器中的图像处理和导出结果

Question

有没有好的/推荐的方法在片段着色器中进行图像处理，然后将结果导出到外部 Javascript 结构？

我目前正在使用带有 THREEJS (WebGL 1.0) 的着色器纹理来显示我的数据。 它包含一组统一的 2D 纹理。我用它来模拟 3D 纹理。

此时我的所有数据都存储在片段着色器中，我想对整个数据（不仅仅是屏幕上的像素）进行一些图像处理，例如阈值化，然后将分割结果导出到适当的JS 对象。

我想在着色器中执行它，因为它运行得更快。

在这种情况下（我相信）渲染到纹理不会有帮助，因为我想修改/更新整个 3D 纹理，而不仅仅是屏幕上可见的内容。

THREEJS 的 Effect Composer 似乎也不是我想要的。

这有意义吗？我错过了什么吗？

是否有一些关于如何在着色器中进行“高级”成像处理（或者更好的是使用 THREEJS 着色器纹理）的代码/演示/文献，然后保存结果？

最好的

Answer 1

您可以照常渲染到画布中，然后使用canvas.getImageData() 检索图像。

然后是方法renderer.readRenderTargetPixels()（见here）。我还没有使用它，但它似乎可以满足您的需求。

因此，您可以按照您的描述进行渲染（据我所知，渲染到纹理不会覆盖您的纹理）到帧缓冲区（即使用THREE.WebGLRenderTarget），然后使用该方法检索图像数据。