Transparency issue with GLTF

[madjin]

When a transparent texture is overlapping another texture, user can see straight through the model instead of the layers you're supposed to. In this screenshot you can see the skybox / room_plane behind the model: https://i.imgur.com/WuigCP0.png Test site: https://vesta.janusvr.com/bepis/boombox-gltf

[jbaicoianu]

Spent a couple hours on this one, it's a hard one. The model has things broken up into separate objects for the speaker grills, etc. but they all share one texture which has transparent parts. This causes all parts of the object to be marked as transparent, and then because the parts all have their origin at the same location, three.js' internal depth sorting can't properly resolve which objects are in front of others.

The two possible solutions to evaluate would be either tighter bounding spheres around each sub-part (eg, centering the geometry and offsetting it), or to implement depth peeling