I'm building a "paper cutout" world in three.js. All my models are simple "planes," and I texture them with PNGs that have alpha channels to trim the plane to a more pleasing shape.

The strange thing: the transparency appears and disappears unpredictably, based on the position of the plane and the position of the camera.

Symptom 1: if the plane is partially below the ground plane, transparency works, but if I move it above the ground plane the transparent area fills with white.

Symptom 2: building on symptom 1: if I now move the camera around so that the look vector is almost parallel to the plane, the transparency starts working again.

Any thoughts? Looks a bit like an optimization gone wrong or possible a z-write problem? is the texture writing to z regardless of alpha value? Were that the case, I wouldn't think it would be sensitive to position or camera angle.

okay, revision: my current theory is that the object draw order is changing based on camera & object position. so my real question becomes: does three.js have a facility for sorting objects with transparency in painter's algorithm order?
–
mmaclaurinJun 1 '12 at 21:10