在GLSL中的一个片段中插入三个纹理（webgl）

我希望能够在一个片段中混合三种不同的纹理，以便它们均等插值。在GLSL中的一个片段中插入三个纹理（webgl）

我设法得到两个纹理（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);

来源

2011-08-26 John David Five

这并不完全清楚你想要实现什么。当你说你想让三种纹理“平等混合”时，你的意思是什么？ –

为什么不能将每个textureColorX除以3，然后添加这些值？或者手动任何你想要的“插值算法”。 –

感谢您的帮助！我希望能够同样地混合三种不同的纹理，着色器如何插入分配给每个顶点的三种不同颜色。目前我有一个手写算法，基于它们的alpha来混合纹理。我正在寻找它来插入他们如上所述。 –

如果你希望它们都同样融合，那么你可以简单地这样做：

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。

来源

2011-08-28 15:18:00 TaylorP

我认为权重会让我更接近我想达到的目标，但我确实希望在整个片段中进行一些融合。类似于这里显示的三角形（一个片段）：[http://learningwebgl.com/blog/?p=134] –

啊，所以你基本上想要在不同的像素有不同的权重，即梯度？如果将权重存储为顶点属性，则可以将其传递到像素着色器。如果要控制每个像素的权重，但唯一的选项是将权重存储在现有纹理的Alpha通道中，或添加其他纹理。如果你不需要透明度的alpha，使用alpha通道是更好的选择。 – TaylorP

有道理，谢谢！我想我会坚持将权重存储在alpha通道中。似乎有道理，我可以通过纹理来改变它...还简化了我的着色器代码：'vec4 textureColor1 = texture2D（uSampler，vec2（vTextureCoord1.s，vTextureCoord1.t））; \t vec4 textureColor2 = texture2D（uSampler，vec2（vTextureCoord2.s，vTextureCoord2.t））; \t \t vec4 finalColor = mix（textureColor2，textureColor1，textureColor1.a）;' –

插值3个纹理使用权：

假设你有重从0到1的每个纹理类型
你有规格化权 - 所以他们等于1的总和
你输入权重VEC 3成着色器

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

来源

2015-04-04 11:27:37

在GLSL中的一个片段中插入三个纹理（webgl）

回答

相关问题