如何将像素着色器应用于画布元素？
[英]How can I apply a pixel shader to a canvas element?
问题描述
我有一个由外部库写入的<canvas>元素。 我希望对此画布应用“后期制作”效果：我想在每个像素最终显示之前，将函数(r,g,b,a) -> (r,g,b,a)映射。
我知道外部库将写入从<canvas>元素获得的2D上下文。 我也知道我要的转换是“像素着色器”或“片段着色器”。 我知道我需要一个webgl上下文来应用这样的着色器。 这个答案告诉我，画布不能同时具有多个上下文，因此我不确定这种方法是否可行。
我考虑的另一种方法是将画布的输出捕获为流，并在应用了转换的情况下将其写入新画布。 但是， 此功能仅在尖端的Firefox中存在 。
是否可以将片段着色器应用于画布输出？ 如果是这样，怎么办？
1 个解决方案
解决方案1
5 已采纳 2015-12-25 09:22:37
您可以将2D画布复制到WebGL纹理，然后使用您设计的任何片段着色器将该纹理渲染到WebGL画布。
关于使用画布作为纹理的源数据的堆栈溢出有很多示例
如何将画布图像数据转换为具有正确x，y的每个像素文本值的数组？
[英]How can I convert canvas image data into an array of per pixel text values with proper x,y?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.