2016-11-17 6 views
1

私は別のレイヤーに1つのテクスチャを重ねようとしていますが、エッジの周りにアルファブレンディングの問題があります。私は運がない多くのブレンドの組み合わせを試しました。どこが間違っていますか?WebGLアルファブレンディング

フレームバッファ(不透明)の現在の状態:オフスクリーンフレームバッファにレンダリング

透明テクスチャ:

の検索結果を私は2つをブレンドしてみてください。円のエッジに注意してください:

はここ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

ほとんどの場合、あなたのテクスチャがあらかじめ乗算アルファを使用していて、あなたのテクスチャは、おそらくのいずれかでそれらを前増加したくあらかじめ乗算されていない場合ので、あなたブレンド機能が

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

する必要がありますあなたのシェーダ

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