Rendering multiple overlapping faces with transparent textures

1
votes

The season is almost upon us, so it is perfect time to render some conifers in 3D. As you can see from this blurry JPG picture, I got a problem rendering faces with transparent textures in latest three.js (revision 73 at the time of writing):

badly rendered fir

Model was exported from Blender, material has following options (and more) set:

"transparent": true, "depthWrite": true, "depthTest": true Texture is PNG file with alpha channel.

I tried using different alphaTest values on material, but it still leaves white corners. enter image description here How to solve this issue? Or should I just go with very low-poly, stylized trees?

1
three.js

1 Answers

1
votes

I have struggled with the same issue myself, Three.js doesn't support order independent transparency. How ever there are some workarounds.

You can read about the why: https://github.com/mrdoob/three.js/issues/4724

I think your best bet is to:

  • Disable alpha blending - This way you won't have the white corners.
  • Use alpha testing - This way with high resolution alpha maps, you should get good results as long as you don't go close to the trees. But there will be some random "pixel errors" where alpha value is close to the test value.
  • Use blur - Blurring will help to hide the errors caused by alpha testing, and give you an "anti-aliasing" effect on the edges of the leaves.