webgl 着色器 - 划分通道 rgba

Question

简单地划分 png 图像的通道以表示纹理飞溅而不与每个通道混合 other.Below 是一个代码示例，用于表达我为简单起见而尝试实现的目标：

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 图像中的绿色、红色、蓝色通道，它似乎按预期工作。

webgl 着色器 - 划分通道 rgba

webgl shader - divide channels rgba

javascript

shader

webgl

fragment-shader