Multiple transparent Materials rendering issue

If two objects have a transparent material the one behind seems to disappear. In my tests one of the material didn’t get rendered on some camera angles.

Here is a fiddle demo: https://jsfiddle.net/3foLr7sn/36/

If you rotate the camera in the fiddle the sphere inside the qube appears/disappears.

Did I do something wrong with my material settings?

No, this is a typical transparency issue. When you google this topic, you will find many similar threads (e.g. Cannot see glass transparency on GLTF 3D model · Issue #13889 · mrdoob/three.js · GitHub). There are different approaches to deal with this problem. Changing the renderOrder property in order to influence which items are rendered first can sometimes improve the visual output: https://jsfiddle.net/zp86nw7o/. Playing around with depthWrite is also an option.

Advanced transparency algorithms like Order-independent transparency are not available in three.js so far.

BTW: Not even big games engines like Unity can handle transparency rendering without visual glitches.

2 Likes