html - 如何将像素着色器应用于 Canvas 元素？

Question

我有一个 <canvas>由外部库写入的元素。我希望对此 Canvas 应用“后期制作”效果:我想映射一个函数 (r,g,b,a) -> (r,g,b,a)在最终显示之前遍历每个像素。

我知道外部库写入从 <canvas> 获得的二维上下文元素。我也知道我要求的转换是“像素着色器”或“片段着色器”。我知道我需要一个 webgl上下文应用这样的着色器。 this answer告诉我一个 Canvas 不能同时有多个上下文，所以我不确定这种方法是否可行。

我考虑的另一种方法是将 Canvas 的输出捕获为流，然后将其写入应用了我的转换的新 Canvas 。然而，this feature only exists in bleeding-edge Firefox .

是否可以将片段着色器应用于 Canvas 输出？如果是，怎么做？

Answer 1

您可以将 2D Canvas 复制到 WebGL 纹理，然后使用您设计的任何片段着色器将该纹理渲染到 WebGL Canvas 。

有很多关于使用 Canvas 作为纹理源数据的堆栈溢出的例子

How Do I Use an HTML5 Canvas as a WebGL Texture

how to get texture in webgl?without Canvas.toDataUrl()

Blend two canvases onto one with WebGL

WebGL blit texture to canvas