GLSL：ShaderMaterial與自定義着色器是不是透明

我嘗試繪製紋理到這樣的領域：GLSL：ShaderMaterial與自定義着色器是不是透明

script(type='x-shader/x-vertex')#Vertex 
    varying vec2 vUv; 
    void main() { 
    vUv = uv; 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
    }  

script(type='x-shader/x-fragment')#Fragment 
    uniform sampler2D baseTexture; 
    varying vec2 vUv; 

    void main() {     
    vec4 baseColor = texture2D(baseTexture, vUv); 
    gl_FragColor = baseColor; 
    } 

this.materials = new THREE.ShaderMaterial({ 
    uniforms: this.uniforms, 
    vertexShader: document.getElementById('Vertex').textContent, 
    fragmentShader: document.getElementById('Fragment').textContent, 
    transparent: true, 
    blending: THREE.AdditiveBlending 
});

這並不正常工作，但質地是不是透明的，即使我改變alpha值。我紋理中的透明像素只是黑色。

但是，如果我寫baseColor.a = 0.0，我不能再看到紋理，但也不是在場景背後。我想我錯過了混合紋理與背景？

如何在three.js中使用GLSL實現此目的？

感謝

來源

2013-10-11 Slow In

你有沒有啓用混合，並將其設置爲使用alpha混合模式？此行：混合：THREE.AdditiveBlending - 爲什麼它是添加劑？它不會做alpha混合。 –

透明紋理元素爲黑色的部分原因可能與您繪製的順序有關。您正在寫入深度緩衝區，以防止表面背後的任何東西被繪製，即使紋理元素應該是透明的。一種解決方案是啓用alpha測試（在現代OpenGL中，這已被刪除，您必須在片段着色器中執行 - 類似於if（gl_FragColor.a <0.0001）discard;'），但更好的解決方案是繪製所有內容首先是不透明的，然後從後到前排列半透明幾何。 –

我不知道three.js所是如何工作的引擎蓋下，但我看到您設置混合是additive.That不是你想要什麼，alpha混合。 Alpha blending使用此功能：

glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

而添加劑的用途：

glBlendFunc(GL_ONE, GL_ONE);

因此，請確保您使用的第一個和你的紋理其實已Alpha通道RGBA的一個組成部分。

來源

2013-10-11 17:09:01

GLSL：ShaderMaterial與自定義着色器是不是透明

回答

相關問題