javascript - Renderizando un caparazón transparente

three.js

Question

Digamos que estoy haciendo que Wonder Woman pilotee su Invisible Jet. El chorro está formado por múltiples mallas y es principalmente transparente. Cuando las mallas transparentes se superponen, se vuelve más opaca. Me gustaría no tener esa superposición, de modo que las partes transparentes todavía estén sombreadas, pero el material descarta fragmentos transparentes que están detrás de otros fragmentos, como si Wonder Woman estuviera sentada dentro de un caparazón transparente.

Quizás una buena manera de decirlo es que quiero renderizar mallas transparentes como mallas opacas, pero aún así permitir que sean transparentes.

Como ejemplo, aquí está la mujer promedio que conduce su automóvil mayormente visible: http://jsfiddle.net/TheJim01/e6ccfo24/

Hice diferentes permutaciones de pruebas de profundidad y escritura, y probé todas las funciones de prueba de profundidad. También probé diferentes configuraciones de fusión (vi varias sugerencias para THREE.NoBlending , pero eso no es lo que quiero porque pierdo transparencia). Si tengo que escribir un sombreador personalizado para esto, iré por esa ruta, pero no estoy seguro de por dónde empezar.

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

Si desea renderizar caras transparentes superpuestas, pero no desea que las regiones superpuestas sean más oscuras, puede implementar un truco: primero renderice las caras

material.colorWrite = false;

y luego renderizarlos por segunda vez con

material.colorWrite = true;

violín: http://jsfiddle.net/yrfuy4j8/

su violín: http://jsfiddle.net/5eku8k37/

three.js r.76