Blender texture stretched

Hi everyone,
When i load the gltf, i have a stretched texture on the pole of my sphere,

but not on Blender:

Anyone have an idea why?

Do you mind sharing the Blend file with all related assets (textures)?

Sure, here is the GLTF and the texture :

earth.bin (719.7 KB)
earth.gltf (2.8 KB)

Thx for the help

I don’t see any differences between three.js and Babylon.js. You can compare both engines via:

So this problem is unrelated to three.js. You might want to file an issue at the repository of the Blender exporter plugin.

You can see the difference on the north pole (or on the Greenland), on the three.js version the texture is like stretched, but not in the Babylon version.

On the GLTF viewer:

And in the Babylon.js version :



Sorry, but except for different lighting I see no difference.

I get similar behaviour as @Alex456 . On the texture seems to have some kind of blur (or stretched outwards). On top of that some of the details are not visible

Well, i don’t understand why i have a difference when i load the GLTF file in both engines.
I will keep trying to find why.

Anyway, thank you for the help

I started to believe that only me saw this difference :sweat_smile:

Can you please load the asset with the following debugging texture instead and make screenshots again for both engines?

Sure, here on three.js

And here with Babylon.js

We can see the “blur” effect on the firt one, but on the line 0.6 with this texture.

Looks like anisotropic filtering if you’d ask me. Not sure though, just basing that assumption from looking at the images.

1 Like

Do you see a difference with this texture?

I’m still trying to find a solution, but i’m totally lost on this one.

TBH, I consider this as a minor issue and focusing on other topics right now. I still see no obvious visual glitch on my end.

Its probably the anistropy like @Harold suggested.

See my working example. I don’t load a pre built glb but create a SphereGeometry and texture it using a 5400x2700 jpg in the code.
You can view the source from the <> button in working demo.
It uses Three r130

Three.js TypeScript Tutorials by Sean Bradley :

Change the anistropy slider

With anistropy 16

With anistropy 1

You may be able to traverse your glb, find the texture and set it.
texture.anisotropy = renderer.capabilities.getMaxAnisotropy()


Indeed, by crossing the GLTF I was able to adjust the anisotropy, which entirely solves the problem with the texture.

Thank you so much to you and Harold :pray:

1 Like