图像处理后更新制服或从片段着色器获取数据

Question

我在片段着色器（阈值处理）中进行了一些图像处理，我想从JavaScript访问结果。然后我可以使用常规JavaScript保存修改后的图像。

我将要分割的原始纹理传递给片段着色器作为制服，然后我进行阈值处理。它在屏幕上正确呈现。现在我想访问阈值图像以便将其保存。

鉴于片段着色器在屏幕呈现的像素上运行，我甚至不确定是否有意义。

我理解大多数约束，我总体上想知道是否有一种很好的技术可以在片段着色器中执行一些繁重的图像处理，并且能够以某种方式从着色器中获取处理结果。

我想到的另一个用例：从鼠标光标填充等等

Javascript对我来说太慢了，也许网络工作者可以提供帮助，但我希望利用GPU来进行图像处理。

（我目前正在使用THREEJS +自定义着色器 - 可能不相关但仅供参考）

最佳， 尼古拉斯

Answer 1

有两种方法可以解决您的问题（如果我能正确理解问题）。所以，假设我们有一个canvas。我们将处理后的图像渲染到该画布。现在我们可以将图像保存为JPEG或PNG blob：

canvas.toBlob(
    (blob) => {
        /* do something with the blob, i.e. send it to a server */
    },
    'image/jpeg',
    0.95
);

或作为数据网址：

const imageAsDataUrl = canvas.toDataURL('image/png');

另外，如果由于某种原因你想要访问图像的实际像素值，你可以通过WebGL调用来读取它们（假设gl是上下文）：

const pixels = new Uint8Array(4 * canvas.width * canvas.height);
gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);