Object with multiple transparent parts looks incorrectly

I am trying to make semi-transparent glasses
but when moving it around in threeJS Editor in some positions temples of that glasses seems to be in front of frames or lenses.
This is how it looks like:

When I have turned on Depth write on every part suddenly object was rendered properly.

unfortunately, I am not able to export GLB/GLTF with those settings :(.

Is there any way to make it work?
model : https://drive.google.com/file/d/1-imFL25voOai8TotyN8MxlukkC2j8p3B/view?usp=sharing


The model viewer of Babylon.js seems to be able to rendering the asset without these glitches: https://sandbox.babylonjs.com/

This is possibly one of the edge cases mentioned in:

/cc @donmccurdy

I think this is a modeling issue. Babylonjs has fewer problems with it (their sorting algorithm uses bboxes instead of center points, maybe?) but certainly still has issues. Even Blender has sorting trouble with this model:

1 Like

What exactly is an issue with that model? It’s just a few parts connected together with transparency, nothing extraordinary with that 3d model.
When we have tryied to combine all transparent parts to one. https://drive.google.com/file/d/1Te-22Ouyb2tHni7CAOIqNDMjOUb7pbz5/view?usp=sharing
Transparency started to work better for lenses but not for a frame.

Even a single transparent mesh can have these issues, depending on its shape and self-occlusion. Mostly this particular model is difficult because its entire frame is slightly transparent. Compare these two renders, where I change the frame’s material mode in Blender from “Alpha Blend” to “Alpha Hash”:

Alpha Blend

Alpha Hash

EDIT: Note that these were taken in Blender’s Eevee renderer, which is a better approximation of a realtime engine’s capabilities.

That works better, but unfortunately you can’t export “Alpha Hash” from Blender. There may be other workarounds possible by splitting up or combining meshes in certain ways, but I don’t know what they would be.

It might be worth filing a feature request on three.js for something like an “Alpha Hash” or “Alpha Dither” mode. We’ve discussed it a few times but I don’t think there is an open feature request.