Devs can't use my GLB model with textures

Hi there!

I’m a Designer working for a tech company. We are currently working to a small minigame for our app and they are using threejs as a game engine.

I am providing them with all the GLB files, including textures with proper UV and such. All assets are displayed alright on their end, except for one, which it is a character with an animation created from Mixamo.

I don’t understand why, but they are not able to use the textures with the UV layout that I create for them. It’s actually a low-poly character that we bought, then I created a suitable UV layout for our usage. The same model needs to have many texture variations. They always tell me that they have to “debug” my model, but I hardly really understand what their blocker is…if about the animation that creates problems, or what else. On top of these, they are from a non-english speaking department, so this makes things a bit harder.

I’m not familiar with threejs as a game engine, so I thought it could be a good idea to ask here because I am really going blindly on this issue and they seem not to be able to figure things out.

This is the workflow I’m using:

Bought a 3D low-poly model > Edited the UV (but we also tried with the default UVs and they have the same issue) > Created the animation with Mixamo > Converted from FBX to GLB

I have to say that on my software (Cinema 4D), as well as the three.js editor all look fine to me. But they say that they have to debug it and they can’t use the UVs properly.

Are the textures embedded in the GLTF (or .glb) file?

If they are loading them separate.. they might need to have .flipY = false set on them, since GL uses flipped textures for historical reasons.

yes they are, but for some reasons (maybe because of the conversion from FBX to GLB) sometimes they are not embedded. But even when they successfully get embedded, they say that they have a problem with it.

I can see that what they say they are “debugging” it’s quite similar to a “flip vertical” kind of thing. Do you think that’s all I have to do? :grin:

The .flipY is a common problem people have especially if they are loading textures separately then applying to a gltf model.

If their issue is happening with embedded textures, then it might be a different problem.. because embedded textures should have that flag set by default.. or deal with it by flipping the V of the uvs.. but when I hear “problem + textures + gltf”, flipY is the first thing i think of.

we have 48 different textures for the model (basically just different clothes). So I think I have to flip Y all of them?

if it works on the three.js editor, then it is not something you should be solving from the design! It is much easier for the programmer to loop through the textures and set flipY. That is what three.js editor does!

Pretty much this ^ .. they should be able to set texture.flipY = false if they are loading the textures manually.. or you can embed the textures in the file with the mesh.. and export it as .glb (binary gltf with the textures as embedded resources with their proper flags set (flipY=false) or whatever the exporter decides.) You can use tools like gltf-transform to do this automatically.. or use blender or similar to re-export if you need to.