如何在画布图像 webgl 上应用纹理？

【问题标题】：How do I apply texture on canvas image webgl?如何在画布图像 webgl 上应用纹理？
【发布时间】：2015-12-07 11:16:28
【问题描述】：

我有一个基本图像并为此创建了图层。图层是 png 图像。

我可以加载 canvas.drawImage 来添加带有基本图像的图层。但是如何在不改变图层大小的情况下在图层图像上应用纹理。

比如，我想在 webgl 中的另一个图像上渲染图像。

【问题讨论】：

【解决方案1】：

我不知道你想要达到什么效果，但我认为片段着色器会帮助你，试着把这段代码放到shadertoy editor：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;        
    fragColor = texture2D(iChannel1, uv) * texture2D(iChannel0, uv);
}

并且不要忘记给 iChannel0 和 iChannel1 放一些纹理，所以它看起来像这样：

是的，我忘记了那些文章，它们也应该对你有很大帮助： WebGL image processing 和 WebGL using 2 or more textures

【讨论】：

您好，感谢您的回复。我让它在带有叠加图像的画布上工作。