[FIXED] Strange backface faces rendering with gltf export

Content creation (3dsMax, Maya, Blender, glTF)
1

Using default options for a gltf export of a 3D model (exported from a Unity project), i have strange rendering in Babylonjs.

2024-07-04_11-58-51 (1)

Activating or not “Backface culling” in material settings didn’t change anything.

Any idea ?

Thanks

2

Hello and welcome :slight_smile:

Here the meshes are front facing (not backfacing) but indeed there is a z order issue.
Can you share the file ? (You can share .zip in a post)

Also, I have seen the same problem with three.js in this topic and this topic in both case it came from the fact that GLTF had transparent shaders (blend alpha mode) but opaque apha textures. Maybe you have a look in that direction…

(A try would be :

meshes.forEach(function(mesh){
    if(mesh.material){
        mesh.material.transparencyMode = 0;
    }
})

)

Also, have a look at this topic
It might me a material side orientation issue :

meshes.forEach(function(mesh){
    if(mesh.material){
        mesh.material.sideOrientation = BABYLON.Material.ClockWiseSideOrientation;
    }
})

++
Tricotou

3

I’ve encountered similar issues when exporting and rendering 3D models, particularly when working with different software environments like Unity and Babylon.js. Here are a few steps and tips that might help resolve the rendering issues you’re experiencing:

  1. Ensure that the normals of your 3D model are correctly oriented. In some cases, exporting from Unity can lead to inverted or incorrect normals, causing strange rendering artifacts. You can check and fix normals in Blender or other 3D software before exporting to glTF.
  2. Sometimes, material settings and textures can cause rendering issues. Double-check that all textures are correctly mapped and that the material settings in Unity are compatible with Babylon.js. You might need to adjust the material settings manually in Babylon.js after importing the model.
  3. Review the export settings in Unity. Ensure that you’re using the appropriate settings for glTF export, such as including textures and animations if needed. Experimenting with different settings can sometimes resolve unexpected rendering issues.
  4. Use Babylon.js’s inspector and debugging tools to inspect the imported model. This can help you identify if there are any issues with the mesh, materials, or textures once the model is in Babylon.js.
SceneLoader.ImportMesh("", "/path_to_your_model/model.gltf", scene, function (newMeshes) {
    newMeshes.forEach(function (newMesh) {
        newMesh.position = new Vector3(0, 0, 0);
        newMesh.scaling = new Vector3(1, 1, 1);
        newMesh.material.backFaceCulling = false; // Toggle this to see if it affects your issue
    });
});

In my experience with 3D furniture modeling and rendering services, ensuring the compatibility of models and materials across different platforms is crucial. I hope these suggestions help you troubleshoot the problem.

4

Ok thanks, fixed by Why my GLTF doesn't respect the render depth order - #2 by donmccurdy - Questions - three.js forum

1 Like