如何在canvas圖像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