2016-11-17 180 views
1

我試圖在另一層上繪製一個紋理,但是我在邊緣周圍出現了alpha混合問題。我嘗試了許多混合組合,但沒有運氣。我哪裏錯了?WebGL alpha混合

當前幀緩衝(不透明)的狀態:

關屏的framebuffer渲染透明質感:

結果當我嘗試混合兩種。請注意,在圓的邊緣:

這裏的blendFunc:

_gl.blendFuncSeparate(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA); 

這裏的着色器。紋理的只是基本的渲染:

uniform sampler2D texture; 
varying vec2 vUv; 

void main() { 
    vec4 tColor = texture2D(texture, vUv); 

    gl_FragColor = tColor; 
} 

回答

2

最有可能你的紋理使用預乘alpha等你的混合功能應該是

_gl.blendFunc(_gl.ONE, _gl.ONE_MINUS_SRC_ALPHA); 

如果你的紋理沒有被預乘你可能想預乘他們無論是在你的shader

gl_FragColor.rgb *= gl_FragColor.a 

或當您加載它們(你叫gl.texImage2D之前)你可以告訴瀏覽器預乘他們

_gl.pixelStorei(_gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

This document probably explains the issues better

,你會發現這個相關的,以及

WebGL: How to correctly blend alpha channel png