Интерполяция трех текстур в одном фрагменте в GLSL (webgl)

Question

Я хотел бы иметь возможность смешивать три разных текстуры в одном фрагменте, чтобы они одинаково интерполировались.

Мне удалось получить две текстуры (textureColor1, textureColor2) для смешивания по фрагменту с помощью третьей текстуры (textureColor3), которая представляла собой градиент от черного к белому.Я хотел бы сделать нечто подобное с тремя текстурами, но было бы здорово иметь возможность интерполировать три текстуры без необходимости включать другую текстуру в качестве маски.Любая помощь с благодарностью.

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

Если вы хотите, чтобы все они смешались одинаково, то вы можете просто сделать что-то вроде:

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;

Вы также можете передавать веса текстур как поплавки. Например, Texture1 может иметь вес 0,5, Texture2 - 0,3, а Texture3 - 0,2. Пока веса добавляются к 1.0, вы можете просто умножить их на значения текстуры. Это как найти средневзвешенное значение .

Answer 2

Интерполируйте 3 текстуры с использованием весов:

Предположим, у вас есть вес от 0 до 1 для каждого типа текстуры
И у вас есть нормализованные веса - так что они равны 1 в сумме
И вы вводите весакак vec3 в шейдер

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);
...
}