WebGLの透明テクスチャ動作

Question

環境：WebGL、Chrome。モデルのためにテクスチャとして透過PNGのを使用したとき、私は、次の動作があります。

1. 画像Aを - ツリーは、その背後にある建物を隠し、私は世界のボックスのテクスチャを参照してください。 B：
   ウィンドウが透明であると私は後ろの

A何を見、正常に動作する - イメージ・B - それはまた同時に

（バックの枝が表示されていない）自体を非表示にします

両方のスクリーンショットは、異なるカメラ位置から同じ場面で同時に作成されました。テクスチャは同じアルゴリズムで生成されます。

私は窓や枝の透明性の違いだか理解することはできません。私の主な質問は、それらの背後にあるオブジェクトを隠さないようにブランチを修正する方法です。シェーダコードは次のとおりです。

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); 

が、私は時々、望ましい結果を得るが、それは物事を行うための適切な方法かどうかわからない、有効/無効のブレンドとdepth_testと共演しました。あなたはデプスバッファの問題に実行している

Answer 1

、それはあなたのシェーダやブレンドモードとは何の関係もありません。何が起こっている

はあなたにあなたの透明ジオメトリをレンダリングする順序は、その背後にレンダリングするあなたの能力に影響を及ぼしていることです。これは、深度バッファに透明または非透明の概念がないためです。その結果、シーンに視覚的に寄与していないにもかかわらず、透明ピクセルは深度バッファに自分自身を書き込んでしまいます。そのあとで描画するピクセルは、「見えない」ため破棄されます。透明なオブジェクトの背後にあるジオメトリを最初に描画した場合、透過的な深度が破棄される前にフレームに書き込まれるため、ジオメトリが正しく表示されます。

これが大きくても、市販のゲームエンジンは依然としてある程度のに苦労ものですので、多少の混乱を引き起こしてそれについて悪い感じはありません。 :)

あり、この問題への「完璧なソリューションは、」ませんが、何それは本当につまるところは、そのようなあなたのシーンを構築しようとしている：

1. は、状態（シェーダ/テクスチャ/並べ替えの任意の不透明なジオメトリをレンダリングなど）
2. 次に透明なジオメトリをレンダリングします。可能であれば、深さで並べ替えて、カメラから最も遠いものを最初に描画します。

透明なジオメトリのフラグを立て、他のものの後にレンダリングするだけで、この問題の90％が解決されますが、透明なオブジェクトが重なっても問題は残ります。あなたのシーンによっては、それは問題ではないかもしれませんが、アーティファクトを引き起こしている場合は、描画する前に透明なオブジェクトを深さで並べ替える必要があります。 0.5が役立つかもしれない、例えばより低いアルファと

Answer 2

廃棄フラグメントは、（もちろん、副作用があります）。

gl_FragColor.a < 0（あれば。5） 破棄;

AlphaFunctions in WebGL?