9

アルファ チャネルを持つテクスチャをレンダリングすると、透明でない部分の周りに白い境界線が表示されます (境界線は、アルファ > 0 および < 1 を持つピクセルのように見えます)。

ここに画像の説明を入力

元のテクスチャは illustrator で作成され、png としてエクスポートされます。ここにあります：

ここに画像の説明を入力

（まあ、stackoverflowが完全に不透明/透明ではないピクセルを調整して画像を変更したようですので、ここにリンクがあります）

セットアップの何が問題なのかわかりませんが、おそらくブレンディングです。

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

[アップデート]

これはレンダリングされたバージョンで、テクスチャの左側の部分にアルファ グラデーションを追加しました (したがって、半分まで不透明度が 0 から 1 になります)。

ここに画像の説明を入力

このテクスチャは、この位置でレンダリングされる唯一のテクスチャです。a=0.5 付近が最も白いようです。本当に奇妙です。背景はクリアされた色です：

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

深さ関数は次のようになります。

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

何か案は？どうもありがとう。

【アップデート2】

私自身の質問に答える:キャンバスの背景色またはhtmlページの本体が白の場合に効果が発生します。説明はありませんが。

4

4 に答える 4

4

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

参照: http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D

于 2012-10-22T07:11:53.930 に答える
3

これは、テクスチャリングの線形補間に関連する問題です。境界では、補間されたピクセルの一部は、半分が白、半分が緑、および 0.5 アルファになります。テクスチャが完全に透明であっても、境界線をもう 1 つ緑色のピクセルで拡張するようにテクスチャを変更する必要があります。

于 2011-10-14T16:36:40.000 に答える
2

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

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

于 2011-10-12T11:45:21.300 に答える
1

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

于 2011-12-23T17:35:33.743 に答える