Models with alphaMap breaks when exported using GLTFExporter

Here is the model created within THREE.js vs the model exported (using GLTFExporter.js) and imported again in GLTF viewer (Three.js).

The model: avatar1.gltf - Google Drive

image

So, not only the alpha mapping is gone, there’s also render ordering problem. For the former, I take it’s because of GLTF limitation? I only found relevant topic on Babylon.js, not THREE.js.

GLTF Inspect:


The ones with BLEND are those with alphaMap. Setting it to OPAQUE (by setting .transparent = false) will fix the ordering problem, but ofc I’d lose the alpha.

I have very rough idea on what to do, but not so confident about it: Basically bake the alpha texture into the normal itself. But would this solution also create render ordering problem in other app?

If there’s any precedent on this solution, let me know!

Ok, I tried adding the alpha into the base color texture itself, and it works fine as a transparency in GLTF. Here, all body parts have OPAQUE alphaMode, as we will apply alpha mapping to each body part anyway.

But my worst fear is true: the render order is out of whack.

image

Anyone has been dealing with this? Or having partly transparent mesh is a problem that can’t really be solved on the model side?

Ok, more or less solved this on paper (still need to figure out how to bake alphaMap on runtime).
I managed to solve all render order problems by using alphaTest only (and .transparent = false).

It would lose the ability for smooth alpha or semi-transparent skin, but the app doesn’t those features anyway, so it’s perfect.

Hi, is there a programmatical way of fixing this issue. I am also facing the same issue. In three js, i have created a object with the alpha map. When exported in to GLTF Format and imported the same in the blender, the alpha map is missing. How one should fix this issue.

As stated above, I simply “bake alphaMap on runtime” using canvas and general image manipulation.