如何将像素着色器应用于 canvas 元素？
How can I apply a pixel shader to a canvas element?
我有一个由外部库写入的 <canvas> 元素。我希望对此 canvas 应用 "post-production" 效果：我想在最终显示之前在每个像素上映射一个函数 (r,g,b,a) -> (r,g,b,a)。
我知道外部库写入从 <canvas> 元素获得的 2D 上下文。我也知道我要求的转换是 "pixel shader" 或 "fragment shader"。我知道我需要一个 webgl 上下文来应用这样的着色器。 this answer 告诉我一个 canvas 不能同时有多个上下文，所以我不确定这种方法是否可行。
我考虑的另一种方法是将 canvas 的输出捕获为流，然后将其写入新的 canvas 并应用我的转换。然而，this feature only exists in bleeding-edge Firefox.
是否可以将片段着色器应用于 canvas 输出？如果是，怎么办？
您可以将 2D canvas 复制到 WebGL 纹理，然后使用您设计的任何片段着色器将该纹理渲染到 WebGL canvas。
有很多关于使用 canvas 作为纹理源数据的堆栈溢出的例子
How Do I Use an HTML5 Canvas as a WebGL Texture
Blend two canvases onto one with WebGL
WebGL blit texture to canvas
我有一个由外部库写入的 <canvas> 元素。我希望对此 canvas 应用 "post-production" 效果：我想在最终显示之前在每个像素上映射一个函数 (r,g,b,a) -> (r,g,b,a)。
我知道外部库写入从 <canvas> 元素获得的 2D 上下文。我也知道我要求的转换是 "pixel shader" 或 "fragment shader"。我知道我需要一个 webgl 上下文来应用这样的着色器。 this answer 告诉我一个 canvas 不能同时有多个上下文，所以我不确定这种方法是否可行。
我考虑的另一种方法是将 canvas 的输出捕获为流，然后将其写入新的 canvas 并应用我的转换。然而，this feature only exists in bleeding-edge Firefox.
是否可以将片段着色器应用于 canvas 输出？如果是，怎么办？
您可以将 2D canvas 复制到 WebGL 纹理，然后使用您设计的任何片段着色器将该纹理渲染到 WebGL canvas。
有很多关于使用 canvas 作为纹理源数据的堆栈溢出的例子
How Do I Use an HTML5 Canvas as a WebGL Texture
Blend two canvases onto one with WebGL
WebGL blit texture to canvas