Object with multiple transparent parts looks incorrectly

Questions
, ,
1

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:
glasses-transparency2

glasses-transparency1
glasses-transparency1749×449 66.2 KB

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

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

Thanks

2

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

3

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:

Screen Shot 2020-09-29 at 9.26.30 AM
Screen Shot 2020-09-29 at 9.26.30 AM1490×534 340 KB

1 Like
4

What exactly is an issue with that model? It’s just a few parts connected together with transparency, nothing extraordinary with that 3d model.
BTW
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.

problemWithTransparencyOneObject2
problemWithTransparencyOneObject2784×441 29.3 KB
problemWithTransparencyOneObject
problemWithTransparencyOneObject897×479 31.5 KB

5

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

Screen Shot 2020-10-09 at 9.23.13 AM
Screen Shot 2020-10-09 at 9.23.13 AM1460×685 135 KB

Alpha Hash

Screen Shot 2020-10-09 at 9.23.22 AM
Screen Shot 2020-10-09 at 9.23.22 AM1503×707 153 KB

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.