渲染一個透明的外殼

假設我正在渲染神奇女俠駕駛她的隱形噴氣機。噴氣式飛機由多個網格組成，並且大部分都是透明的。透明網格重疊的地方變得更加不透明。我希望沒有重疊部分，這樣透明部分仍然有陰影，但是材質會丟棄位於其他片段後面的透明片段，就好像神奇女俠坐在透明外殼內一樣。渲染一個透明的外殼

也許一個很好的方法來說明，我想渲染透明網格，如不透明網格，但仍然允許它們透明。

作爲一個例子，這裏是普通女子駕駛她的天色，可見汽車：http://jsfiddle.net/TheJim01/e6ccfo24/

我已經做了深度測試和寫作的不同排列，並嘗試了所有的各種深度測試功能。我也嘗試了不同的混合設置（我看到了THREE.NoBlending的一些建議，但那不是我想要的，因爲我失去了透明度）。如果我必須爲此編寫自定義着色器，我會走這條路線，但我不知道從哪裏開始。

HTML：

<script> 
// INITIALIZE 
var WIDTH = window.innerWidth, 
    HEIGHT = window.innerHeight, 
    FOV = 35, 
    NEAR = 1, 
    FAR = 1000; 

var renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize(WIDTH, HEIGHT); 
document.getElementById('host').appendChild(renderer.domElement); 

var stats= new Stats(); 
stats.domElement.style.position = 'absolute'; 
stats.domElement.style.top = '0'; 
document.body.appendChild(stats.domElement); 


var camera = new THREE.PerspectiveCamera(FOV, WIDTH/HEIGHT, NEAR, FAR); 
camera.position.z = 250; 

var trackballControl = new THREE.TrackballControls(camera, renderer.domElement); 
trackballControl.rotateSpeed = 5.0; // need to speed it up a little 

var scene = new THREE.Scene(); 

var light = new THREE.PointLight(0xffffff, 1, Infinity); 
light.position.copy(camera.position); 

scene.add(light); 

function draw(){ 
    light.position.copy(camera.position); 
    renderer.render(scene, camera); 
    stats.update(); 
} 
trackballControl.addEventListener('change', draw); 

function navStartHandler(e) { 
    renderer.domElement.addEventListener('mousemove', navMoveHandler); 
    renderer.domElement.addEventListener('mouseup', navEndHandler); 
} 
function navMoveHandler(e) { 
    trackballControl.update(); 
} 
function navEndHandler(e) { 
    renderer.domElement.removeEventListener('mousemove', navMoveHandler); 
    renderer.domElement.removeEventListener('mouseup', navEndHandler); 
} 

renderer.domElement.addEventListener('mousedown', navStartHandler); 
renderer.domElement.addEventListener('mousewheel', navMoveHandler); 
</script>

CSS：

html *{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    overflow: hidden; 
} 

#host { 
    width: 100%; 
    height: 100%; 
}

的JavaScript：

// NOTE: To run this demo, you MUST use the HTTP protocol, not HTTPS! 

var msh = new THREE.Mesh(new THREE.SphereGeometry(10, 20, 20), new THREE.MeshLambertMaterial({color: "red"})); 
msh.position.set(0, 10, 0); 
scene.add(msh); 

var mat = new THREE.MeshLambertMaterial({ 
    color: "silver", 
    transparent: true, 
    opacity: 0.5 
}); 

msh = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 75, 20), mat); 
msh.rotation.set(0, 0, Math.PI/2); 
msh.position.set(0,10,0); 
scene.add(msh); 

msh = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 50, 20), mat); 
msh.rotation.set(Math.PI/2, 0, 0); 
msh.position.set(-20,-10,0); 
scene.add(msh); 

msh = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 50, 20), mat); 
msh.rotation.set(Math.PI/2, 0, 0); 
msh.position.set(20,-10,0); 
scene.add(msh); 

draw();

來源

2016-04-29 TheJim01