webgl 着色器 - 划分通道 rgba

Question

简单地划分 png 图像的通道以表示纹理飞溅而不相互混合。下面是一个代码示例，用于表达我为简单起见而试图实现的目标：

uniform sampler2D my-alpha-png;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D texture3;

vec4 alpha   = texture2D( my-alpha-png, vUV).rgba;
vec4 tex0    = texture2D( texture1, vUV *10.0 ).rgba; 
vec4 tex1    = texture2D( texture2, vUV *10.0 ).rgba; 
vec4 tex2    = texture2D( texture3, vUV *10.0 ).rgba;   

vec4 colornone = alpha.a; // i want this channel to be blank;
vec4 color1  = alpha.r;  // this is texture1
vec4 color2  = alpha.g;  // this is texture2
vec4 color3  = alpha.b;  // this is texture3

gl_FragColor = // ????

我尝试了很多变体，我只能设法获得两个纹理，但 alpha 始终是纹理，下面是图像 alpha png：

我更感兴趣的是在输出上拆分通道来表示，只需要四个通道 r ， g ， b ，a 不需要计算黑白...

谢谢。

Answer 1

我玩了一圈，想出了一个解决方案：

 vec4 final = (alpha.r * tex0) + (alpha.g *tex1) + (alpha.b * tex2) ;

它似乎只使用 alpha-map png 图像中的绿色、红色、蓝色通道按预期工作。