webgl shader - divide channels rgba

Question

Simply divide channels of a png image to represent texture splatting with out blending with each other.Below is an example of code to express what i am trying to achieve for simplicity:

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 = // ????

I have tried many variations i can only manage to get two textures woking but the alpha is always a texture as well below is an image alpha png:

I am more interested in splitting the channels to represent on the out put, only need the four channels r , g , b ,a no need calculate for black and white...

Thank you.

Careen Careen · Accepted Answer · 2015-11-07T09:23:59

I played around and came up with a solution:

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

It seems to work as expected only using the green, red , blue channel in the alpha-map png image.

webgl shader - divide channels rgba

1 Answers