Normals reversed imported glTF

Questions
1

Hi,
I’ve created a glTF model with Cinema 4D.
But the normals are reversed when I import it into BabylonJS.
Is there an easy way to invert the normals in Babylon?
thanks

2

Can you share the model? or even better a repro in the PG?

3

Did you try to load your model into Sandbox?

As for normals, you may try this (for specific material or all materials)
material.invertNormalMapX = true; material.invertNormalMapY = true;

Maybe there is another problem - reversed textures; in this case you may use texture.uScale = -1;

Would be easier if you recreate your problem in the Playground or at least share the model to have a look a it.

4

Thank you for your reply.

test model

This is the gltf. If I open it in sandbox it looks good (aside from the metallic look. But materials have to be adjusted.)

Here is the file when I import it and display like I Always do with babylon models.
http://flomotion.nl/tmp/

Your solution for reversing the normals will be good enough. But would be nice if I can somehow import it differently.

5

Well, as for me, I never had any problems when exporting from C4D, usually everything seems correct.
There is the option in exporter - “Flip Z” - you may check how it works for you…

image
image.jpg1131×780 135 KB

Here is Playground example with your model, seems OK…
https://playground.babylonjs.com/#U5SSCN#37
(on photo with some roughness texture applied)
image
image.jpg700×674 31 KB

6

You also may notice that at your example in the file http://flomotion.nl/tmp/EB.js you are loading some textures which don’t exist (error 404).
pbrCardboad.albedoTexture = new BABYLON.Texture("assets/image.jpg", scene); and more.

7

thank you for your answers. Since the PG and sandbox work good it must be something different. And I found it!
I used:
https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js
as loader plugin. And that is inverting the model normals.
When I used:
https://cdn.babylonjs.com/loaders/babylon.glTFFileLoader.min.js

it works as expected.

2 Likes
8

I’ve also faced some weird problems with babylonjs.loaders.min.js. UVs of my models looks Y-axis flipped but it looks fine in sandbox. Don’t know what’s wrong with the loader file but nothing works in my case.
So annoying.

UPD:
It looks fine only when I do manually: texture.vScale = -1;. Why does it work fine with that model in sandbox idk.

Why does it work like this?
Blender 3.2.0beta, glb (UV included, materials not included), babylon 5.8.2, loaders.min.js (downloaded today: https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js )

Looks the same issue as: UV Map flipped for Imported Mesh from Blender file.glb - #36 by ecoin

UPD2
Solved with:
const texture = new BABYLON.Texture( "texture.png", this._scene, undefined, false ); // <-- last param