Quando si hanno due piani in Three.js/WebGL e uno o entrambi sono trasparenti, a volte l'aereo dietro sarà nascosto dal piano trasparente sopra. Perchè è questo?Three.js/WebGL - piani trasparenti nascondono altri piani dietro
Questo non è un bug, è solo il modo (e quindi, WebGL e,) lavora OpenGL. Le superfici trasparenti non giocano bene con il buffer z, e come tale devono essere ordinate manualmente e sottoposte a rendering a ritroso. Three JS sta tentando di fare questo per te (che è il motivo per cui il problema scompare quando si imposta il valore X> 0) ma non si può gestire il caso della geometria intersecante come si sta mostrando.
ho spiegato il problema più in profondità in un different SO question, quindi si consiglia di fare riferimento a questo.
Prova ad aggiungere alphaTest: 0.5 al materiale.
L'ho provato, non ha funzionato:/Immagino sia un problema di webgl quindi devo ridisegnare il modo in cui il mio gioco mostra gli aerei. Comunque sembrerà un po 'violato. – MaiaVictor
Ho un piano con una trama basata su tela mappata ad esso che visualizza il testo. In certi angoli/posizioni avevo problemi con la trasparenza del materiale della trama e questo l'ha risolto, quindi grazie! – plyawn
Nota: 'alphaTest' è una sottostruttura che renderà le aree semitrasparenti nelle trame sia completamente opache (quando opacità pixel> treshold) o completamente trasparenti (quando opacità pixel
fwow, se hai molti piani paralleli (non riesci a vedere il tuo esempio, google non può risolvere il tuo dominio), è facile tenerli ordinati lungo l'asse perpendicolare. Per un elenco di piani [A B C D] l'ordine di partenza sarà [A B C D] o [D C B A] e nient'altro! Quindi non c'è bisogno di un successo nelle prestazioni dall'ordinamento. Basta tenerli in ordine mentre vai.
il problema è che ho alcuni piani che dovrebbero essere resi incrociati con gli altri. Come se fossero 3d spade piatte. Potrei chiederti, come hai trovato quella domanda così a lungo dopo che è stata fatta e come sono arrivati 4 upvoters? – MaiaVictor
Le vostre domande intestano il comportamento delle persone che non possono rispondere :) Tuttavia, se si dispone di poligoni che si incrociano l'un l'altro, non v'è alcuna facile soluzione corretta diverso da quelli per-frammento come K-buffer o l'algoritmo originale A-Buffer, a meno che specificamente polizia le intersezioni del triangolo e le tesselano al volo. – bjorke
Diciamo che si sta utilizzando qualche immagine trasparente * .png. Allora questo aiuterebbe:
new THREE.MeshBasicMaterial({ side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
Per qualche motivo la parte 'side: THREE.BackSide' ha impedito alle mie immagini di renderizzare tutto insieme. Ma a parte questo, il resto ha funzionato alla grande! –
Probabilmente si desidera utilizzare THREE.DoubleSide in modo che sia visibile da entrambi i lati. – Blaise
In realtà funziona davvero bene! – polyclick
L'impostazione della proprietà depthWrite al false risolto il mio problema.
new THREE.MeshBasicMaterial({
opacity: 0.25,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false
});
GRAZIE. Niente più "problemi alla scatola nera trasparente"! – Andy
Grazie per la risposta, ma così mi stai dicendo che è meglio riprogettare il mio gioco o è una soluzione di hacking perseguibile Three.JS? – MaiaVictor
@Toji la domanda a cui fai riferimento non ha esattamente lo stesso problema. Nell'altra domanda è solo una parte dell'oggetto/trama che è trasparente dove in questa domanda l'intero piano è trasparente e questo è facilmente risolvibile semplicemente disattivando il 'depthWrite' totalmente per il piano trasparente. – Wilt