1

My scene contains a number of planes with PNG textures. First, my problem was the transparent parts of the texture hiding other objects behind it. Then I found the workaround by disabling depth testing and depth buffer writing, which however introduced another problem: at certain distances and angles, objects that are behind, render over those that are in front of them:

enter image description here

Now, I'm a relative newcomer to 3D programming, but through reading other SO answers, such as:

I think I understand that depth and transparency are a difficult issue in general. However, I am not sure what the right direction from here is. Should I manually calculate the distance of the objects from camera, then tell three.js to render them from farthest to closest? Would that fix the issue? Or is there another general solution?

gman
  • 100,619
  • 31
  • 269
  • 393
Tomáš M.
  • 752
  • 7
  • 24
  • 3
    Do you actually need alpha blending, or just 100% transparent pixels (like a mask)? You can keep depth testing on and use a fragment shader to determine whether each fragment is drawn or not based on the alpha value (`if (A == 0) discard;`). The fragments that are discarded will not contribute to the depth buffer. If you need blending, then drawing order can be very imporant; So drawing *just the transparent objects* back-to-front may be the only visibly correct solution. – Romen Jan 27 '20 at 21:44
  • Hmm! You're right, I probably don't need alpha blending per se. That might just solve my problem, thanks! I'll leave the question open for a bit longer though, in case there's possibly yet another solution (or if you want to claim the answer...) – Tomáš M. Jan 27 '20 at 21:59
  • 2
    @Romen is correct – because this texture has no semitransparency, you'll want to use `.transparent=false` and `.alphaTest=0.5` (roughly) on the material. The exact `alphaTest` value can be adjusted for your model, but should be greater than zero. – Don McCurdy Jan 28 '20 at 04:30
  • You might find [this article](https://threejsfundamentals.org/threejs/lessons/threejs-transparency.html) useful. – gman Jan 28 '20 at 16:05

0 Answers0