在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）

回答

相關問題