2

webgl コンテキストに 2 つの透明で重なり合う球体があります。オーバーラップ中に、球がどのように描画されるかを制御したいと思います。このページで私の問題を見ることができます：

http://andrewray.me/stuff/circle-clip.html

赤と青の球が重なったとき、青の球が赤の球の後ろに隠れるようにしたいです。

球がシーンに追加される順序を単純に変更すると (最初に大きな球を追加すると)、目的の動作が得られます: http://andrewray.me/stuff/circle-clip-correct.html

ただし、私のプロジェクトでは状況が異なります。最初に大きな球体を追加しても交差点が見えます。

私が得た最も近いものは、小さな球体をカメラに近づけることです。この例では、小さい球体を 10 単位近づけました: http://andrewray.me/stuff/b-test/

ただし、矢印キーを使用して移動すると、交差点がときどき点滅し、完全に表示されたままになることがあります (特に横から気泡が入っている場合)。

両方のマテリアルに設定しようとしdepwthWrite: falseましたが、効果がありません。

少しいじりましたrenderer.sortObjects = falseが、これは、シーンの残りの部分で発生させたい「自然な」描画順序を削除していると思います。私が問題にしているのは、まさにこれらの領域です。

  1. webgl / three.js で透過オブジェクトの描画順序を強制できますか? 小さい球体を 10 単位近づけても、Z ファイティングしているように見えます
  2. または、透明なオブジェクトを重ねる動作を強制する方法はありますか?
4

1 に答える 1

9

多くのヘッドバンギング (良い種類ではありません) の後、メッシュのフラグを使用して描画順序を強制できることを発見しました。

3 つのr70 以上の使用renderOrder

mesh.renderOrder = 0.5; // Value from 0 to 1

3 つのr69 以下の場合renderDepth

mesh.renderDepth = 0.5; // Value from 0 to 1

最初に最低値、最後に最高値を描画します。

于 2013-07-15T07:09:44.747 に答える