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

Question

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

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

我考虑的另一种方法是捕获画布的输出流，并将其写入应用了我的变换的新画布中。然而，这个功能只存在于最新版的Firefox中。 是否可能对画布输出应用片段着色器？如果可以，如何操作？

- jameshfisher

---

你不必使用captureStream()，CanvasContext2D.drawImage()方法可以接受另一个画布作为图像源。然后，您只需要创建另一个画布元素，并在其上执行drawImage(yourActualCanvas, 0, 0)操作。如果绘制的画布未被污染，则可以调用画布的getImageData()进行像素转换，或者您也可以在globalCompositeOperation中找到更快的方法！ - Kaiido

这是一个例子：http://jsfiddle.net/an0ajbfw/ - Kaiido

Answer 1

你可以将2D画布复制到WebGL纹理中，并使用你设计的任何片段着色器将该纹理渲染到WebGL画布上。在stackoverflow上有很多使用画布作为纹理源数据的例子。 如何使用HTML5画布作为WebGL纹理 如何在WebGL中获取纹理? 不使用Canvas.toDataUrl() 使用WebGL将两个画布混合成一个 将WebGL纹理复制到画布上

- gman