JSONモデルの透過素材がThree.jsシーンで奇妙に見える

Question

JSONモデルの不透明度を変更したとき、素材が奇妙に見えました。

は、ここに私のコード

var jsonLoader = new THREE.JSONLoader(); 

jsonLoader.load('model/body.json', addBodyToScn); 
function addBodyToScn(geometry, material) { 
    var Mtl = new THREE.MeshFaceMaterial(material); 
    jsonMesh = new THREE.Mesh(geometry, Mtl); 
    jsonMesh.scale.set(2, 2, 2); 
    jsonMesh.material.materials.forEach(function(m){ 
     m.transparent = true; 
     m.opacity = 1; 
    }); 


jsonLoader.load('model/cow.json', addCowToScn); 
function addCowToScn(geometry, material) { 
    var Mtl2 = new THREE.MeshFaceMaterial(material); 
    jsonMesh = new THREE.Mesh(geometry, Mtl2); 
    jsonMesh.scale.set(2, 2, 2); 
    jsonMesh.material.materials.forEach(function(m){ 
     m.transparent = true; 
     m.opacity = 1; 
    }); 

私は牛の不透明度を変更しようとしたと私は牛の内部人間の一部を見てみたいです。

opacity = 0.5
opacity = 0

私は関係なく、私は不透明度の異なる番号を使用し、牛内の人間の部分を見ることはできません。

私は何が起こったのか分かりません。

Answer 1

あなたが見ている問題は、zバッファと透過性と関連している可能性があります。 リアルタイムレンダリングでは、適切な透明度が最初に見えるよりも難しいです。理由を説明しようとします。

何が起こっているのですか： 透明な牛が最初に表示されます。レンダリング中、牛の各フラグメント（ピクセル）のzバッファに深さ値（=カメラまでの距離）が書き込まれます。ピクセルカラーはカラーバッファの値とブレンドされます（この時点であなたの場合は黒です）。

その後、人体はレンダリングされますが、各レンダリングされたフラグメントについて、最初にデプステストが実行されます。レンダリングされた人体のフラグメントが既にレンダリングされたフラグメントの背後にある場合z-バッファ）、そのフラグメントは破棄され、カラーバッファに書き込まれません。

多分this youtube-videoから（優秀）udacity-course on three.jsは、ここでの問題の説明に役立ちます。前面から背面に、まず不透明なオブジェクトがレンダリングされる

• ：

  Three.jsは、2回のパスでオブジェクトを描画します。この方法では、前面のオブジェクトの背後に隠れているオブジェクトはレンダリング*する必要はありません（深さテストのおかげで）

• 2番目のパスでは、すべての透明オブジェクトが、正面。これは、オブジェクトが前にあり、背面にあるに基づいて決定され、

今（正確に何をしたいです）深度テストによって破棄されないように透明なオブジェクトの背後にある透明なオブジェクトを可能にすることですobject.positionとcamera.positionの間の距離。これは、オブジェクトが交差し始めると少し厄介になります。これは、あなたの例ではそうであるようです。

現時点では、この問題の解決策はありませんが、すべての状況で問題なく動作します。

牛が人体の前にあるようにオブジェクトの位置を変更してみてください。この場合、レンダリングは正常に動作します。

depthTestとdepthWrite（hereを参照）というzバッファの動作を制御する3つのj.jsに2つのマテリアルプロパティがあります。だから、牛の奥行き書き込みを無効にするか、人体の深度テストを無効にすることができます。残念なことに、深度テストを無効にすると、シーン内のすべてのもの（その前の不透明なオブジェクトでも）の上に人体がレンダリングされ、深度の書き込みを無効にすると、彼らが前にいるかのように表現されている。