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

【问题标题】：Update uniforms or get data from fragment shader after image processing图像处理后更新制服或从片段着色器获取数据
【发布时间】：2017-05-19 15:21:48
【问题描述】：

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

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

考虑到片段着色器会在屏幕上渲染的像素上运行，我什至不确定这是否有意义。

我了解大部分限制条件，我一般想知道是否有一种好的技术可以在片段着色器中执行一些繁重的图像处理，并能够以某种方式从着色器中获取处理结果。

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

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

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

最好，尼古拉斯

【问题讨论】：

您可能需要查看 readPixels，它会为您提供原始 RGBA 数据，然后必须使用这些数据来生成实际图像。由于性能开销，您可能需要考虑在单独的 FBO 上进行处理，完成后使用画布上的 FBO 并从中生成图像。
khronos.org/registry/webgl/specs/latest/1.0/#5.14.12

【解决方案1】：

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

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

或作为数据 URL：

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);

【讨论】：