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

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

Ecco un’immagine di detto artefatto. Sembrano derivare dalla geometria della sfera sottostante. artefatti con la modalità di fusione: THREE.AdditiveBlending = 1

È interessante notare che gli artefatti non sono visibili per la modalità di fusione THREE.SubtractiveBlending = 2. inserisci la descrizione dell'immagine qui

Qualsiasi aiuto apprezzato!

alex

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.

È ansible ottenere l’aspetto di una sfera a doppia faccia e trasparente in three.js, con un trucco: è necessario eseguire il rendering di due sfere trasparenti, una con material.side = THREE.BackSide e una con material.side = THREE.FrontSide .

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

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

EDIT: fiddle aggiornato a three.js r.71

Generalmente per fare oggetti trasparenti è necessario ordinarli frontalmente (credo che three.js lo faccia già). Se il tuo object è convesso (come lo sono entrambi), a volte puoi ottenere il rendering eseguendo il rendering di ogni object due volte, una volta con gl.cullFace (gl.CCW) e nuovamente con gl.cullFace (gl.CW). Ad esempio, se il cubo si trova all’interno della sfera, lo farebbe in modo efficace

 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 farlo in three.js

Questo gestisce solo oggetti convessi e non intersecanti (un object è contenuto interamente nell’altro).

Per rendere correttamente quella scena con l’alpha blending, i triangoli dovrebbero essere resi da dietro a fronte per ogni fotogramma. La tua scena è particolarmente impegnativa dal momento che hai un object 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 fusione additiva o sottrtriggers funzionerà senza ordinamento, ma non sembra così bella.

Crea un clone della mesh originale e capovolgi le sue normali; quindi crea due identici materiali “unilaterali” per ognuno con un nome diverso. Non l’approccio più elegante 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", ...