UV Map flipped for Imported Mesh from Blender file.glb

Not sure if this is a bug, or it’s me not being able to find info in the docs.

When importing mesh.glb from Blender, all UV Maps gets flipped when applying PBR/StandardMaterial with texture.

Examples:
PG of Flipped UV
PG of incorrect rotation for imported file.glb

How do I fix this without using scene.useRightHandedSystem = true?

Also all imported glb meshes have wrong rotation, they are rotated by one `Math.PI.

Rationale:
Our app uses right handed system with z-up. However, Babylon’s default left handed system is chosen with an internal converter for all transform vectors, instead of using scene.useRightHandedSystem = true flag, because according to @Deltakosh:

Blockquote
babylon.js is by default left handed and thus mostly tested in that mode.

thus didn’t want to risk having to deal with unknown bugs related to the scene.useRightHandedSystem.

Here are extensive instructions - Using External Assets In the Playground | Babylon.js Documentation

When exporting form Blender there is +Y Up parameter. Check or uncheck it and see what will happen :slight_smile:

Or you can do the same in Babylon - Texture | Babylon.js Documentation

the texture .invertedY argument set to true did not work

The +Y up is already ticked in Blender (in our app, z is up from end user’s perspective, even though internally it’s Babylon’s Y).

I know someone may recommend changing Blender settings to suit Babylon, but that would not be an option for us, because the app is designed to be newbie friendly, and uses conventions most familiar to people. You cannot ask users to fiddle with Blender settings to make it work, it must work with default Blender settings from user’s perspective.

Could make a repro in PG?
texture.invertedY will not work, it should be texture.invertY

Here is PG (yes, I had typo in the previous reply, you cannot set to existing texture, only as argument to constructor):

Here is the chair with incorrect rotation (in Blender the seat is facing Camera front, in Babylon - Camera back):

PG

Here is what I’ve got with exporting a cube from C4D with default settings - https://playground.babylonjs.com/#9AF7JS#1


Left cube is C4D cube.
Seems everything is correct.
I not a blenderist so cannot give a deep insight here but I believe that something may be incorrect with your Blender settings.
Maybe this thread will be also helpful for you - Exporting from Blender: Y and Z axes are flipped · Issue #31 · BabylonJS/Babylon.js · GitHub

1 Like

In your PG, the UV maps incorrectly for Babylon Box, because you inverted texture .vScale = -1 .

I need the Texture to map correctly on both Babylon (left-handed system) and imported Meshes (right-handed-system).

I think the bug lies within Mesh.MergeMeshes() function, it probably did not compute VertexBuffer.UVKind correctly.

This is not the case. Blender’s z axis turned into y axis in Babylon is the expected behavior.

Like I explained above, the app internally uses Babylon left-handed system with y up, it only labels that y axis as z for the User, so that when they import Meshes from right-handed system, visually it will look exactly the same as they see in other apps (Blender is one example, but it could be files from SketchFab, etc.).

This is an app where Users can import meshes from different systems, and combine them to create their designs. Only planning to support .glb file for the same reason - it provides certain standard for the web.

Manually flipping Texture on imported Meshes is also not an option, because Textures can be shared among imported and Babylon’s native meshes. (Like in the real world, you’d not flip a fabric print to make a skirt, and flip it again to make a jacket - it’s the UV map that you flip, not the texture)

2 Likes

Sorry I’m not sure if I’m absolutely correct, but I think the reason is the uv is diffrent in bjs and blender.
In blender, uv starts from the left top of image while left bottom in bjs. When you creating a texture in bjs, It’s impossible to realize that you will use it on a right-hand object, so it’s suitable that you need to provide the info by setting invertY or vScale or something else.
Hope this helps.

1 Like

@tanpopo , I think you are correct that UV map is reversed somehow. However, I did some research, and all of my findings show that Blender’s UV (0,0) starts at the bottom left like Babylon.

P.S. my blender has vanilla settings (fresh install on new machine).

I think in your case you need to perform some orientation and model corrections with the help of transform nodes, similar to Sketchfab approach. Below there is screenshot from gltf Sketchfab model.

1 Like

Transform node only helps with correcting rotation. I remember having to remap UV for Babylon’s Sphere and Cylinder, because it maps UV in clockwise order, and ends up with flipped Texture.

This is definitely either a bug in gltf's plugin, or the core of Babylon’s vertex buffer calculation.

Reading the full thread, I am still entirely sure to get the issue fully (probably the time to ramp up after the break :slight_smile: ) @ecoin could you share the PG best highlighting the issue ?

And also the .blend with your cube. By default all works fine when exporting to glTF from Blender, so maybe the issue comes from your Blender scene hierarchy or something like that?

1 Like

Hi @sebavan, here are two issues in one PG:
UV flipped for Blender Box + Incorrect Rotation for Blender Chair

I don’t think so, I’m not a CG artist, never used Blender before, have fresh brew install blender. Just open blender and immediately export the cube as GLTF 2.0.

For example, the chair.glb has correct rotation when uploading to Babylon sandbox, but not the playground.

About the rotation it is all expected and here is the code we use in the sandbox:

Regarding the UVs, the merged mesh and the original are both rendering as the data are defined in the glb file https://playground.babylonjs.com/#YIU90M#566

Your glb is actually rendered the same in any gltf viewer

2 Likes

I guess I wasn’t cleared enough in my description. For the PG, I did not setup proper UV map for the Blender cube to wrap like Babylon cube (that is expected).

The bug is that if you try to read the word Guaranteed, you’ll see that the letter N turns into И - seems likes V coordinates in the UV was reverted.

can you export the glb with a texture ? so that it will be easier to validate ?

If you get the UVs how you want in Blender’s UV editor and then in JS invert the vScale like below does it work for you?

Edit: it seems to fix the issue when using Blender’s default UV mapping as well, with your original cube.glb (the letters are no longer backwards):