私たちはThree.jsベースのWebGLプロジェクトに取り組んでおり、WebGLで透明性がどのように処理されるかを理解するのに苦労しています。この画像は、alpha = 0.7で描画された両面サーフェスを示しています。これは、右側で正しく動作します。ただし、真ん中の奇妙なアーティファクトの近くに表示され、左側では透明度がまったく機能していないように見えます。
http://emilaxelsson.se/sandbox/vis1/alpha.png
問題はここでも見ることができます： http ：//emilaxelsson.se/sandbox/vis1/ 誰かが以前に似たようなものを見たことがありますか？その理由は何でしょうか？
問題は、透明なオブジェクトを後ろから前の順序で並べ替えてレンダリングする必要があることです（メッシュの不透明度を0.7（透明）から1.0（不透明）に変更しようとすると、Zバッファが表示されます。正常に動作します）。
見る：
あなたの場合、メッシュが1つしかないことを想定しているので、解決するのは簡単ではないかもしれません。
編集：以下の議論を要約するだけです。このような両面透明メッシュの正しいレンダリングを実現することが可能です。これを行うには、立方体の6つの側面に対応するメッシュの6つのバージョンを作成する必要があります。各バージョンは、「キューブの側面」（前面、背面、左、右、上、下）に基づいて後ろから前の順序で並べ替える必要があります。レンダリングするときは、（カメラの視線方向に基づいて）正しいメッシュを選択し、その単一のメッシュをレンダリングします。
高価な並べ替えや複数のメッシュを使用せずに、（添付した画像に基づいて）ケースの簡単な解決策は、深度テストを無効にし、顔のカリングを有効にすることです。メッシュの前に不透明なオブジェクトがない場合は、許容できる結果が得られます。
