web-dev-qa-db-ja.com

Three.js / WebGL-背後にある他の平面を隠す透明な平面

Three.js/WebGLに2つの平面があり、それらの一方または両方が透明である場合、背後の平面が上の透明な平面によって隠されることがあります。どうしてこれなの？

javascriptthree.jswebgldepthzbuffer
21
MaiaVictor

これはバグではなく、OpenGL（したがってWebGL）の動作方法です。透明なサーフェスはZバッファではうまく機能しないため、手動で並べ替えて、後ろから前にレンダリングする必要があります。 3つのJSがこれを実行しようとしていますが（X値> 0に設定すると問題が解決する理由です）、表示されているようにジオメトリが交差する場合を確実に処理できません。

この問題については 異なるSO質問 ）で詳しく説明したので、参照することをお勧めします。

12
Toji

透明な* .png画像を使用しているとしましょう。次に、これは役立ちます：

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
24
Alex Under

マテリアルにalphaTest: 0.5を追加してみてください。

21
mrdoob

depthWriteプロパティをfalseに設定すると、問題が解決しました。

new THREE.MeshBasicMaterial({ 
    opacity: 0.25, 
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false
});
21
Wilt

fwiw、平行平面がたくさんある場合（サンプルが表示されない、Googleがドメインを解決できない）、垂直軸に沿って並べ替えておくのは簡単です。飛行機のリスト[AB C D]の場合、描画順序は[A B CD]または[DC B A]のいずれかであり、他には何もありません。したがって、並べ替えによってパフォーマンスが低下する必要はありません。あなたが行くようにちょうどそれらを整理してください。

6
bjorke

問題を解決するためにメッシュrenderOrderを設定する

0
Nokey