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

Question

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

我目前使用THREEJS（WebGL 1.0）的着色器纹理来显示我的数据。 它包含一个统一的2D纹理数组。我用它来模拟3D纹理。

此时我所有的数据都存储在Fragment Shader中，我想对整个数据（不仅仅是屏幕上的像素）执行一些图像处理，比如阈值处理，然后将分割结果导出到正确的JS对象。

我想在着色器中做它，因为它运行得非常快。

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

我似乎并不认为THREEJS的Effect Composer是我正在寻找的。

它有道理吗？我错过了什么吗？

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

最佳

Answer 1

可以渲染像往常一样到画布上，然后用canvas.getImageData()检索图像。

然后是方法renderer.readRenderTargetPixels()（参见here）。我还没有使用它，但它似乎做你想要的。

所以，你可以像描述的那样渲染（渲染为纹理不会覆盖你的纹理，只要我可以告诉）到帧缓冲区（即使用THREE.WebGLRenderTarget），然后使用该方法检索图像数据。