Material looks different after re-mapping same texture file

I’m using three-js editor to map texture to material.
I’m also using this glTF (2.3 MB) asset after converting the asset to glb with this tool.

The thing is if I’m attaching the same texture file to the same material with the same map the 3D model looks different.

Before:
before
After:
after

It looks like the texture is aligned differently or has some kind of an indentation.

When I’m exporting as glTF from the editor before and after the change it looks like it’s adding some fields to the materials array (due to the new texture) but nothing that indicates the change in the position of the texture.

I’ve also tried to use THREE.LinearFilter and THREE.NearestFilter when re-mapping the texture but it seems to have no effect on this issue.

I’ve noticed that on of the texture files originally looks like that:
Material%2047_metallicRoughness
but after the initial asset loading the image looks like that:
initial
at least on the editor’s Rough. Map preview:
rm_preview

This issue can be duplicated with other 3D models as well.

Thank you.

Try flipping the texture you are applying upside-down. Some tools will flip the texture upside-down when exporting.

texture

1 Like

Thank you @calrk.

I’m using the same image as the glTF loader is using.

Even if it was upside-down the behavior of the glTF loader should have been consistent with the re-mapping action.

It terns out that the current texture flipY was set to false but the default flipY texture value is true.

I still can’t find where on the glTF file it’s stated that the texture flipY should be false.

Maybe if it’s not written the default is false but when using THREE.TextureLoader the default is true.

Thank you @calrk, that was helpful.

@ranbuch So the problem was that the flipY value was not retained correctly when you applied the texture in the editor? Since it sounds like a bug in a three.js component, it would be good to further investigate the issue.

Sorry for the late replay, I didn’t get the ping.

I don’t know if it’s a bug and where it might be but there seems to be a consistency issue between loading a glTF and adding a texture after the loading dynamically.

GLTFLoader will set flipY=false on every texture it loads — that comes from the UV coordinate convention here. So if you were manually loading a texture with TextureLoader and applying it to the model, you’ll also need to set flipY=false.

I’m not sure why import/export from the editor wouldn’t work correctly, though… that does sound like a bug.

1 Like