Question

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

I managed to get two textures (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);

Answer 1

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.