在GLSL(webgl)中插入一个片段中的三个纹理

时间:2011-08-26 15:35:06

标签: glsl webgl

我希望能够在一个片段中混合三种不同的纹理,以便它们进行相同的插值。

我设法通过使用第三个纹理(textureColor3)来获得两个纹理(textureColor1,textureColor2),这是一个黑色到白色的渐变。我想用三种纹理做类似的事情但是能够插入三种纹理而不必将另一种纹理作为掩模包含它会很棒。非常感谢任何帮助。

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

2 个答案:

答案 0 :(得分:3)

如果你想让所有人都平等地融合,那么你可以简单地做一些事情:

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,您就可以简单地将它们乘以纹理值。这就像找到weighted average

答案 1 :(得分:0)

使用权重插入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);
...
}