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

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

我知道外部库将写入从元素获取的2D上下文。我也知道我要的转换是“像素着色器”或“片段着色器”。我知道我需要一个webgl上下文来应用这样的着色器。这个答案告诉我，画布不能同时具有多个上下文，因此我不确定这种方法是否可行。

我考虑的另一种方法是将画布的输出捕获为流，并在应用了转换的情况下将其写入新画布。但是，此功能仅在尖端的Firefox中存在。

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

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

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

如何将HTML5画布用作WebGL纹理

如何在webgl中获取纹理？没有Canvas.toDataUrl（）

使用WebGL将两幅画布融合到一张

WebGL blit纹理到画布