Rendern einer transparenten Hülle

Question

Nehmen wir an, ich render Wonder Woman, die ihren Invisible Jet steuert. Der Jet besteht aus mehreren Maschen und ist größtenteils transparent. Überlappen sich die transparenten Netze, wird es undurchsichtiger. Ich möchte diese Überlappung nicht haben, so dass die transparenten Teile immer noch schattiert sind, aber das Material verwirft transparente Fragmente, die hinter anderen Fragmenten liegen, als ob Wonder Woman in einer transparenten Hülle sitzt.

Vielleicht ein guter Weg, um es zu setzen ist, dass ich transparente Netze wie undurchsichtige Netze, aber immer noch transparent machen wollen.

Als Beispiel hier ist Durchschnitt Frau, die ihre Meist-Visible Auto fahren: http://jsfiddle.net/TheJim01/e6ccfo24/

ich verschiedene Permutationen der Tiefenprüfung und Schreiben getan haben, und versucht, alle verschiedenen Tiefentestfunktionen. Ich habe auch verschiedene Mischeinstellungen ausprobiert (ich habe mehrere Vorschläge für THREE.NoBlending gesehen, aber das ist nicht das, was ich will, weil ich die Transparenz verliere). Wenn ich dafür einen benutzerdefinierten Shader schreiben muss, gehe ich diese Route, aber ich bin mir nicht sicher, wo ich anfangen soll.

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(); 

Answer 1

Wenn Sie transparent Gesichter machen überlappende wollen, wollen aber nicht die überlappenden Bereiche dunkler sein, können Sie einen Trick implementieren: die Gesichter zuerst mit

material.colorWrite = false; 

machen und sie dann ein zweites Mal mit

machen

material.colorWrite = true; 

Geige: http://jsfiddle.net/yrfuy4j8/

Ihre Geige: http://jsfiddle.net/5eku8k37/

drei. js r.76