JSON模型的透明材質在Three.js場景中看起來很奇怪

當我改變JSON模型的不透明度時，發現材質看起來很奇怪。JSON模型的透明材質在Three.js場景中看起來很奇怪

這裏是我的代碼

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

我看不到人的牛內的部分，不管我用不透明的不同的數字。

我不明白髮生了什麼事。

來源

2016-07-29 Kevin Hsiao

您看到的問題可能與z-buffer和transparency有關。在實時渲染中，正確的透明度比起初看起來要困難得多，我會試着解釋原因。

發生了什麼事情：首先渲染透明牛。在渲染時，深度值（=相機距離）被寫入到牛的每個片段（像素）的z緩衝區中。像素顏色與顏色緩衝區中的值混合（在這種情況下，您的情況爲黑色）。

之後渲染人體，但是對於每個渲染片段，首先執行深度測試：如果人體的渲染片段位於已渲染的片段後面（基於發現的值z緩衝區），該片段將被丟棄，並且不會寫入顏色緩衝區。

也許this youtube-video來自（優秀）udacity-course on three.js有助於說明這裏的問題。

three.js所呈現的物體在兩次通過：

首先不透明對象被渲染，從前到後。這樣，後面隱藏在前面物體後面的物體不需要渲染*（感謝深度測試）
在第二遍中，所有透明物體都被渲染，從後面到前方。這是爲了允許透明對象後面的透明對象不被深度測試（這正是你想要的）所拋棄

現在，哪個對象在前面，哪個在後面是基於object.position和camera.position之間的距離。一旦對象開始相交，這會有點棘手，因爲在你的例子中可能就是這種情況。

不幸的是，目前還沒有解決方案可以在所有情況下都能正常工作。

您可以嘗試修改對象的位置，使牛肯定在人體前面，在這種情況下，渲染應該可以正常工作。

three.js中還有兩個控制z緩衝區行爲的材質屬性，名爲depthTest和depthWrite（請參閱here）。因此，您可以禁用牛的深度寫入或禁用人體的深度測試。不幸的是，兩者都不是真正的解決方案，因爲禁用深度測試將導致人體在場景中的所有內容（甚至是前面的不透明對象）上渲染，並且禁用深度寫入導致背後的對象牛被渲染，就好像它們在前面一樣。

來源

2016-07-30 21:45:40

謝謝您的解釋！你解釋的很清楚，所以我想我明白你的意思。我是Three.js和WebGL的初學者。最近我讀了這本書<< WebGL Programming Guide >>，因爲我需要了解更多關於WebGL的知識。非常感謝！ –

JSON模型的透明材質在Three.js場景中看起來很奇怪

回答

相關問題