如何将像素着色器应用于画布元素？

Question

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

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

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

是否可以将片段着色器应用于画布输出？如果是这样，怎么样？

Answer 1

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

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

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