Texture UV coords ignored randomly + unexpected coloring

[Hanch]

Hello there!

I’m new to game development and very new to Babylon, but I’m having an issue when exporting models from blender in glb format regarding UV maps not applying correctly. I reproduced the issue in the playground here:

https://playground.babylonjs.com/#DNC4AE#1

As you can see, the cylinder and the cube in the center don’t seem to have their UVs applied correctly, despite looking fine in Blender before exporting:

Regarding export settings in Blender, I have checked “UVs” and “Normals” under “Mesh” and I’m choosing not to export materials. Exporting the materials makes it work correctly (comment lines 20-26 and uncomment line 29 in the playground to see it) but is not viable in the actual project because it includes a lot of models that share only a handful of textures, which would result in bloated file sizes from each model having to include duplicates of the textures (the textures are > 3MB each).

This leads me to another issue I’m facing when choosing not to export the materials from Blender, which I think could be related (?). The colors applied to the model are off in Babylon when compared to the texture. (see below)

You can see the ground and the tree foliage are different colors in Babylon. Also the bushes and tree trunks have no color applied at all, which is the first issue I mentioned. Both problems are reproduced as accurately as I could in the playground.

As a side note, both problems go away if I include the materials when exporting the model, but as I mentioned before it likely won’t be a viable solution. Nevertheless here’s a screenshot to verify it:

I searched the forums but failed to find this issue, I’m wondering if anyone can help shed some light here? Any direction will be very appreciated, and also thank you for your patience. I’m not a native english speaker and it’s hard for me to write in a warm tone, but I’m here to learn and I’m a big fan of Babylon and this community!!

[Hanch]

Update:

I confirmed that all vertices have valid UV data with the following instruction which returns no results, as expected:

mesh.getVerticesData(VertexBuffer.UVKind).filter(coord => !coord)

Also, I thought to link the .blend and texture files in case it is helpful:
blend+texture.zip (131.4 KB)

Yet another update:

I realized if I simply move the UV coords of the center cube from the bottom-left cell to the cell directly above, it suddenly works in Babylon (see below).

It also breaks when I move them to the top-right cell, however all four cells in the middle row work just fine. It’s breaking for the top and bottom rows of the texture only! I confirmed this by painting two new colors on the top and bottom rows of the texture and moving the UVs again.

Very strange indeed… Why could this be happening?

[Hanch]

I did it!

The solution was to set invertY to false when creating the texture, like so:

myMaterial.diffuseTexture = new Texture('/textures/Texture_01.png', this.scene, true, false);

https://doc.babylonjs.com/typedoc/classes/BABYLON.Texture

In addition to fixing the ignored UVs this also fixed the coloring problems, so it was indeed all related. My assumption is that the textures get inverted on the Y axis by default during import, which would explain why it worked OK on the middle but not the top or bottom parts of the texture. It’s curious that none of the resources I checked mentioned this. Still, if I’m missing or misunderstanding something your clarification is entirely welcome.