Interpolating three textures in one fragment in GLSL (webgl)

I would like to be able to blend three different textures in one fragment so that they interpolate equally.

I managed to get two texture开发者_运维百科s (textureColor1,textureColor2) to blend across the fragment by using a third texture (textureColor3) which was a black to white gradient. I would like to do something similar with three textures but it would be great to be able to interpolate three textures without having to include another texture as a mask. Any help is greatly appreciated.

vec4 textureColor1 = texture2D(uSampler, vec2(vTextureCoord1.s, vTextureCoord1.t));
vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord2.s, vTextureCoord2.t));
vec4 textureColor3 = texture2D(uSampler3, vec2(vTextureCoord1.s, vTextureCoord1.t));
vec4 finalColor = mix(textureColor2, textureColor1, textureColor3.a);

If you want them all to blend equally, then you can simply do something like:

finalColor.x = (textureColor1.x + textureColor2.x + textureColor3.x)/3.0;
finalColor.y = (textureColor1.y + textureColor2.y + textureColor3.y)/3.0;
finalColor.z = (textureColor1.z + textureColor2.z + textureColor3.z)/3.0;

You could also pass in texture weights as floats. For example, Texture1 might have a weight of 0.5, Texture2 a weight of 0.3 and Texture3 a weight of 0.2. As long as the weights add to 1.0, you can simply multiply them by the texture values. It's just like finding a weighted average.

Interpolate 3 textures using weights:

Assume your have weight from 0 to 1 for each texture type
And you have normalized weights - so they equal to 1 in sum
And you input weights as vec3 into shader

varying/uniform/... vec3 weights;
main {
resultColor.x = (texel0.x * weights.x + texel1.x * weights.y + texel2.x * weights.z);
resultColor.y = (texel0.y * weights.x + texel1.y * weights.y + texel2.y * weights.z);
resultColor.z = (texel0.z * weights.x + texel1.z * weights.y + texel2.z * weights.z);
...
}