Three.js中同一網格物體上的多個透明紋理

是否可以在Three.js中的同一個人物表面上放置多個紋理，以便完成alpha混合，GPU在webGL中加速？Three.js中同一網格物體上的多個透明紋理

紋理（或應該）應用於相同的臉部，以便底部紋理（紋理1）沒有Alpha通道，並且上述紋理在下面的圖像示例中以類似於紋理2的方式進行alpha通道引導。

這種混合可以使用HTML5 Canvas作爲前置步驟來實現，但由於紋理位圖可能很大，我更願意跳過Canvas混合操作。

我通過創建一個網格副本併爲每個網格應用一個紋理進行了測試，並使其他網格變得透明並將其移動了一點，這幾乎成功，但有一些閃爍，並且因爲對象不能完全處於相同的位置，紋理之間存在一些不正確的效果。他們應該看起來像他們混合在例如。 Photoshop（如下圖）。

enter image description here

來源

2013-04-29 Timo Kähkönen

你可以嘗試的辦法，答案[這裏]（http://stackoverflow.com/questions/13309289/three-js-geometry-in-top -of-another/13309722＃13309722） – WestLangley 2013-04-30 20:21:09

謝謝。似乎是一個好方法。並可能處理也呈現多個紋理彼此之上。但迄今尚未測試。 – 2013-05-01 08:53:17

使用ShaderMaterial並設置兩個紋理制服，然後着色器中混合起來。

我做了這個例子：http://abstract-algorithm.com/three_sh/這真的應該夠了。

所以，你讓ShaderMaterial：

var vertShader = document.getElementById('vertex_shh').innerHTML; 
var fragShader = document.getElementById('fragment_shh').innerHTML; 

var attributes = {}; // custom attributes 

var uniforms = { // custom uniforms (your textures) 

    tOne: { type: "t", value: THREE.ImageUtils.loadTexture("cover.png") }, 
    tSec: { type: "t", value: THREE.ImageUtils.loadTexture("grass.jpg") } 

}; 

var material_shh = new THREE.ShaderMaterial({ 

    uniforms: uniforms, 
    attributes: attributes, 
    vertexShader: vertShader, 
    fragmentShader: fragShader 

});

有了這樣的材料製作網：

var me = new THREE.Mesh(new THREE.CubeGeometry(80,80,80), material_shh);

你可以把最簡單的頂點着色器：

varying vec2 vUv; 

void main() 
{ 
    vUv = uv; 
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
    gl_Position = projectionMatrix * mvPosition; 
}

和片段着色器會怎麼做混合：

#ifdef GL_ES 
precision highp float; 
#endif 

uniform sampler2D tOne; 
uniform sampler2D tSec; 

varying vec2 vUv; 

void main(void) 
{ 
    vec3 c; 
    vec4 Ca = texture2D(tOne, vUv); 
    vec4 Cb = texture2D(tSec, vUv); 
    c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a); // blending equation 
    gl_FragColor= vec4(c, 1.0); 
}

如果你需要融入更多的紋理，你用同樣的公式只是多次混合。

所以這裏的結果：

enter image description here

來源

2013-06-03 12:52:23

感謝您的回答。我需要等待17個小時才能獎勵賞金。 – 2013-06-03 13:26:00

這種方法不適合我們需要在特定位置放置多個紋理的情況。 – Tarun 2015-06-11 11:29:37

@Tarun是的，UV貼圖會照顧到這一點。那麼，任何類型的UV-coordiante明智的操縱。 – 2015-06-11 14:32:18

Three.js中同一網格物體上的多個透明紋理

回答

相關問題