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
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?