Three.js / WebGL - plans transparents cachant d'autres plans derrière eux
Lorsque vous avez deux avions dans Three.js /WebGL et un ou deux d'entre eux sont transparentes, parfois, l'avion derrière sera caché par le plan transparent ci-dessus. Pourquoi est-ce?
source d'informationauteur MaiaVictor
Vous devez vous connecter pour publier un commentaire.
Ce n'est pas un bug, c'est juste la façon dont OpenGL (et, par conséquent, WebGL). Surfaces transparentes ne joue pas bien avec le z-buffer, et, comme telle, doit être triés manuellement et le rendu de l'arrière vers l'avant. Trois JS est de tenter de le faire pour vous (c'est pourquoi le problème disparaît lorsque vous définissez la valeur de X > 0) mais ne peut pas robuste traiter le cas de l'intersection de la géométrie comme vous êtes à l'affiche.
J'ai expliqué le problème plus en profondeur dans un différentes DONC, la questionde sorte que vous pouvez de référence.
Disons que vous utilisez des transparents *.image png. Alors ce serait aider:
Essayez d'ajouter
alphaTest: 0.5
à la matière.Réglage de la
depthWrite
propriétéfalse
résolu mon problème.fwiw, si vous avez beaucoup de plans parallèles (ne peuvent pas voir votre exemple, google ne peut pas résoudre votre domaine), il est facile de garder les ordonnées le long de l'axe perpendiculaire. Pour une liste des avions [A B C D] l'ordre de tirage au sort sera soit [A B C D] ou [D C B A] et rien d'autre! Donc, il n'a pas besoin d'être une performances de tri. Il suffit de garder dans l'ordre que vous allez.