1

I'm using three.js for a small game which utilizes textures with transparency. Things were going great until I noticed some errors due to depth testing:

Good from one angle

Good from one angle

Bad from another

Bad from another

Some research has brought me to these posts, but I am still trying to figure out how to apply their suggestions in a three.js environment:

Rendering glitch with GL_DEPTH_TEST and transparent textures

Blending transparent textures with depth

As far as I know, {transparent: true} in a THREE.Material already separates transparent materials from opaque ones for proper rendering. However, I cannot get away with disabling depth writes because I don't have control over the rendering order of the transparent geometry (as far as I know). Am I missing something obvious that will help me out of this mess?

Community
  • 1
  • 1
aeron005
  • 33
  • 4
  • In typical fashion, I have found a solution just minutes after posting :P All I had to do was add `alphaTest: 0.5` to the material and it sorted everything out nicely. Hopefully I haven't introduced more gotchas with this fix... _(knock on wood)_ – aeron005 Dec 17 '13 at 22:40

0 Answers0