0

I have created a simple human figure. The eyelashes use a texture with transparency. However as soon as I turn on transparency for the face texture there is created transparency where it shouldn't be. You can look through the face texture in the part that lies below the eye lashes.

See the effect by toggling face transparency with this line:

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

I wish to have transparency turned on for the face texture, so how can I solve this problem?

Demo: http://dev.udart.dk/transparencyProblemStackOverflow/ (wait for model to load)

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

Vibber
  • 127
  • 1
  • 7

1 Answers1

1

Transparent geometry gets manually depth-sorted, for more information see this canonical answer by Toji: Transparent textures behaviour in WebGL.

If you want this scenario to work properly, you'll have to split up your model, and render the eyelashes as a separate (sub)mesh. This way three.js can render the rest of the face using the normal z-buffer approach, then apply the eyelashes separately (from the depth-sorted transaprent objects queue).

Community
  • 1
  • 1
Paul-Jan
  • 16,746
  • 1
  • 63
  • 95