Transparency issues with a single texture set

[jclarkk]

Hello,

We're having issues with a 3D asset that has been exported from Substance Paints using a single texture set.
When uploading the asset into Facebook/BabylonJS/ThreeJS all have transparency issues but in different areas. There doesn't seem to be a consistent behavior which seems very odd.

When we separate the material that needs to be transparent into an additional texture set then everything works fine in all the web viewer's.

Is it possible to use a single texture set while combining transparent areas?

Attaching the GLTF files.

kettle_gltf_001.zip

[donmccurdy]

There is no perfect way for realtime 3D engines to handle transparency — different engines take different approaches for various reasons, but none are entirely correct. Typically the artist will need to make some tradeoffs like separating textures as you've done here. You could also use a separate material reusing the same texture, I think, but how that is done in Substance I'm not sure. See this thread for some more discussion... the format used will not make much difference on this issue.

[ranbuch]

I think the solution here is either to fix the z-buffer issue on the GPU's level by enabling triangles sorting (not gonna happen any time soon) or to deliberately lower the standard on GLTF and other formats by demanding separated textures, mash and materials.

That why software like Substance will render scenes same as real-time viewers are.

Using my sorting solution does fix the issue on three-js current sorting method but will not solve every issue that Substance and other editors would and won't solve BabylonJS's one.

If we want consistency across Platforms and Frameworks we need to lower the standard.

[donmccurdy]

I'm not sure how we could alter the glTF standard to prevent transparency footguns. Some issues cannot be worked around with separate textures, like having one transparent object enveloping another. It's primarily a modeling issue in my opinion, but implementation notes, modeling best practices, or workflow suggestions could all be helpful for users.

[ranbuch]

It's primarily a modeling issue in my opinion, but implementation notes, modeling best practices, or workflow suggestions could all be helpful for users.

Agreed.

having one transparent object enveloping another.

I agree, but what if there was a standard for sorting logic?
That's of-course not related to glTF . . .

[Ben-Mack]

@ranbuch Do you mind to share the code (or pseudo) for your solution to fix Three.js sorting problem? Really appreciated that.

[ranbuch]

@Ben-Mack I'll be happy to share it.

The thing it's not a part of three-js official repository so I'll need to find the best why to share it - it is possible thought!

Can you maybe check first if the solution is working for your 3D asset?

You can use the load parameter to load your model to the viewer:

https://vqa.hexa3d.io/index.html?autorotate=true&load=https://[your.domain.com/path]

After testing it with my solution you can add &tsl=1 to the URL to see your model render with three-js current solution.

Just make sure your 3D file has Access-Control-Allow-Origin header so my viewer could load it.

[donmccurdy]

No action here for glTF specifically (although artist/workflow best practices are still welcome). See #1442 for some discussion of possible future transparency specs.