glTF: Transparent materials render incorrectly when part of multi-material node

[jeyashankher]

Description of the problem

Setup: Two planes combined into a single mesh, each plane has a transparent (alphaMode=BLEND) material. One view renders correctly, but rotating the object leads to an incorrect render where one plane occludes the other.

One view with correct render:

Rotated view with incorrect render:

Example attached:

2plane_group_trans_test_gltf.zip

Three.js version

• Dev
• r102
• [x ] r101

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[donmccurdy]

In r101 (which my viewer uses) this glTF model is constructed as:

threejs sorts transparent objects at the mesh level – based on the mesh position – and can't performantly look through the vertices of the mesh on each frame to sort the geometry groups. So from the engine's perspective, both of these planes are located at the mesh position, 0,0,0, and sorting is arbitrary.

In r103 (coming soon) we've removed the logic that loads primitives (e.g. parts of a multi-material model) into a groups in single Mesh (#15889), and instead you'd get two Meshes in this case. They still won't sort properly (because the centers of both are 0,0,0). But I think we've discussed using a bounding box for sorting, which would solve this case and may be worth considering?

[Mugen87]

But I think we've discussed using a bounding box for sorting, which would solve this case and may be worth considering?

Interesting. Can you please link the respective discussion? AFAIK, this would mitigate the issue but not solve many edge cases. Something like out-of-order transparency seems more promising ,see #9977. However, definitely more complicated to implement.

[donmccurdy]

See #13889 (comment). I guess the suggestion there was just to use the size of the bounding box, but sorting by distance from the camera to the nearest point in the bounding box might also be cheap enough.

[makc]

Can you please link the respective discussion?

this was discussed as early as in #6011, if not before, as well. it was common problem in the age of flash 3D, but somehow 3js never considered proper sorting important, and just declared that this bug is a feature.

[donmccurdy]

... but somehow 3js never considered proper sorting important, and just declared that this bug is a feature.

To be fair here, there is no general solution. Using bounding boxes will fix this specific issue, and will break some cases that work today. I expect it fixes more than it breaks, but I can't prove that.

[makc]

Another way to cheat this is screen-door transparency (example in #10600)

[donmccurdy]

Is that what Unreal's "Dither Temporal AA" feature does? That would be a nice addition, I'd been thinking of implementing it as a masking node type for NodeMaterial.

[donmccurdy]

Let's merge this thread into #9977. There is currently no general solution for perfect and performant sorting of transparent triangles, so I think we should consider this a feature request for better or additional options like OIT or sort-by-bounding box.