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

Question

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

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

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

Answer 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