Textures transparentes interférant les unes avec les autres dans trois.js

Question

J'ai créé une figure humaine simple. Les cils utilisent une texture avec transparence. Cependant, dès que j'active la transparence pour la texture du visage, la transparence est créée là où elle ne devrait pas l'être. Vous pouvez voir à travers la texture du visage dans la partie située sous les cils.

Voir l'effet de transparence face basculer avec cette ligne:

mesh.material.materials[3].transparent = false 
mesh.material.materials[3].transparent = true 

Je souhaite avoir la transparence sous tension pour la texture du visage, alors comment puis-je résoudre ce problème?

Démo: http://dev.udart.dk/transparencyProblemStackOverflow/ (attente pour le modèle à charger)

code: https://github.com/vibber/transparencyProblemStackOverflow/blob/gh-pages/index.html

Answer 1

géométrie transparente obtient manuellement triés profondeur, pour plus d'informations voir cette réponse canonique par Toji: Transparent textures behaviour in WebGL.

Si vous souhaitez que ce scénario fonctionne correctement, vous devez diviser votre modèle et rendre les cils sous la forme d'un maillage (secondaire) distinct. De cette façon, trois.js peuvent restituer le reste du visage en utilisant l'approche z-buffer normale, puis appliquer les cils séparément (à partir de la file d'attente des objets transaprent triés en profondeur).