artefatti durante il rendering di entrambi i lati di un oggetto trasparente con three.js

Question

Provo a rendere entrambi i lati di un oggetto trasparente con three.js. Dovrebbero essere mostrati anche altri oggetti situati all'interno dell'oggetto trasparente. Purtroppo ho degli artefatti che non conosco troppo. Ecco una pagina di prova: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

Ecco un'immagine di detto artefatto. Sembrano derivare dalla geometria della sfera sottostante.

interessante i manufatti non sono visibili miscelazione THREE.SubtractiveBlending modalità = 2.

Qualsiasi aiuto apprezzato!

Alex

Answer 1

L'auto-trasparenza è particolarmente difficile in WebGL e three.js. Devi solo capire veramente i problemi e quindi adattare il tuo codice per ottenere l'effetto desiderato.

È possibile ottenere l'aspetto di una sfera a doppia faccia, trasparente Three.js, con un trucco: è necessario rendere due sfere trasparenti - uno con material.side = THREE.BackSide, e uno con material.side = THREE.FrontSide.

L'utilizzo di tali metodi è generalmente richiesto se si desidera l'auto-trasparenza senza artefatti, soprattutto se si consente alla fotocamera o all'oggetto di spostarsi.

Ecco un violino: http://jsfiddle.net/unkya/17/

EDIT: aggiornamento piano rispetto a Three.js r.71

Answer 2

Per rendere la scena correttamente con alpha blending, i triangoli dovrebbero essere resi da dietro in avanti ogni fotogramma. La tua scena è particolarmente impegnativa dal momento che hai un oggetto all'interno di un altro e il rendering di entrambi i lati, che richiede il rendering di parte della sfera, quindi il cubo, quindi il resto della sfera. Dubito che three.js (o qualsiasi altra libreria di grafici di scene) possa gestire questo caso.

La miscelazione additiva o sottrattiva funziona senza ordinamento, ma non sembra piacevole.

Answer 3

In genere per eseguire oggetti trasparenti è necessario ordinarli frontalmente (sto già pensando che three.js lo faccia già). Se il tuo oggetto è convesso (come lo sono entrambi), a volte puoi ottenere il rendering eseguendo il rendering di ogni oggetto due volte, una volta con gl.cullFace (gl.CCW) e nuovamente con gl.cullFace (gl.CW). Così, per esempio, se il cubo è all'interno della sfera che ci si effettivamente fare

gl.enable(gl.CULL_FACE); 
gl.cullFace(gl.CW); 
drawSphere(); // draws the back of the sphere 
drawCube(); // draws the back of the cube 
gl.cullFace(gl.CCW); 
drawCube(); // draws the front of the cube. 
drawSphere(); // draws the front of the sphere. 

non ho idea di come fare a Three.js

Questo gestisce solo gli oggetti che sono convessi e non si intersecano (uno l'oggetto è contenuto interamente nell'altro).

Answer 4

Fai un Clon della maglia originale e capovolgere le sue normali; quindi crea due identici materiali "unilaterali" per ognuno con un nome diverso. Non l'approccio più di classe ma ha funzionato bene. Ho lottato con lo stesso problema, questo è quello che ho fatto: P

Il file .json assomiglia a questo:

{ 
"materials":[ 
    { "name":"ext", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 }, 
    { "name":"int", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 } 
], 
"meshes":[ 
    { 
     "name":"Cylinder001", 
     "material":"ext", ... 

    { 
     "name":"Cylinder002", 
     "material":"int", ...