webgl：透明（アルファ）を​​使用したときの白い境界線

Question

アルファチャンネルを持つテクスチャをレンダリングすると、非透明部分の周りに白い枠線が表示されます（枠線はアルファ> 0および< ）：

元のテクスチャは、イラストレーターで作成およびPNGとしてエクスポートされます。ここにある：

（まあ、そうここlinkがあり、透明性/完全に不透明でないピクセルを調整し、画像を変更されたStackOverflowのようだ）

私ものの、それは、おそらくブレンドです設定に問題があるのか​​を知るいけない：

gl.enable(gl.BLEND); 
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 

[更新]

ここ

このテクスチャは私はテクスチャの左部分にアルファ勾配を加え（それが半分になるまで0~1不透明から取得される）レンダリングバージョン、

ありますテクスチャのみがこの位置に描画されます。それはa = 0.5付近で白っぽいと思われる。本当に奇妙な。

gl.enable(gl.DEPTH_TEST); 
gl.depthFunc(gl.LEQUAL); 

任意のアイデア：

gl.clearColor(0.603, 0.76, 0.804, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
// render objects here 

深さ関数は次のようになります。背景には、ちょうどクリア色ですか？どうもありがとう。

[更新2]

自分の質問に答える：キャンバスの背景色やHTMLページのボディが白の場合に効果が生じます。私は説明がありません。

Answer 1

は自分の質問に答えます。私は説明がありません。

（ちょうど見つけることが答えを容易にするために、私のオリジナルのポストのアップデート2からこれを追加）

Answer 2

抽選は何ですか？これは、私にとって深みをバッファリングする問題のように見えます。白い背景から始め、白い部分に合成されるように境界線を描画し、次に境界線を使って物の後ろに描画します。境界が元の白い背景とブレンドされた領域は、深さバッファにその平面の深さに等しい値を格納するので、後ろにあるオブジェクトが描画されると、ピクセルはその領域で破棄されます。

一般的なルールは、不透明なオブジェクトの後に透明なオブジェクトを、通常は前後に描画することです。加算ブレンドを使用している場合は、不透明な描画の後に深度バッファを無効にして、それらを任意の順序で描画するのに十分です。

Answer 3

これは、テクスチャ線形補間に関連する問題です。境界線上では、補間されたピクセルの半分が緑色の半分、0.5のアルファがかかります。たとえ透明であっても、テクスチャを修正して、緑のピクセルを1つ増やして境界を拡張する必要があります。

Answer 4

シェーダでFragColorを設定するときは、イメージRGBにイメージアルファを掛けてみてください。

Answer 5

事前に乗算されたアルファを使用すると、この問題は解消されます。

参照：HTMLページのキャンバスや身体の背景色が白の場合に効果が発生します。http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D