Loading GLTF models downloaded from SketchFab show up with messed up faces

Questions
1

Not sure what I am doing wrong. Try downloading GLTF file for following model - Kandace Dancing - Download Free 3D model by TrevAllCaps (@trevBeat) - Sketchfab

Load it into https://sandbox.babylonjs.com/ .

20%20AM
Screenshot 2019-09-16 at 11.02.20 AM.jpg1170×994 132 KB

The picture on right is how it should look, but the one on left shows how it actually looks in BabylonJS.

Also there are no reported errors or warnings. How do I fix this?

2

BABYLON.SceneLoaderFlags.CleanBoneMatrixWeights = true;

Maybe this helps, it really looks like inverted bone matrices.

3

In the sandbox I do not see that option. I tried this in my local but seems to have no effect. Below is my code in local.

window.addEventListener('DOMContentLoaded', function() {
    // get the canvas DOM element
    var canvas = document.getElementById('renderCanvas');

    // load the 3D engine
    var engine = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoaderFlags.CleanBoneMatrixWeights = true;
    var loader = BABYLON.SceneLoader.Load("/kandace_dancing/", "scene.gltf", engine, function (scene) { 

    	var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, 1.6, 20, new BABYLON.Vector3(0,0,0), scene);
	    camera.minZ = 0.01;
	    camera.allowUpsideDown = false;
	    camera.wheelPrecision = 150;
	    camera.attachControl(canvas, true);

        console.log(scene.meshes)
        camera.zoomOn(scene.meshes);

    	// run the render loop
        engine.runRenderLoop(function(){
            scene.render();
        });

        // the canvas/window resize event handler
        window.addEventListener('resize', function(){
            engine.resize();
        });
	});

});
4

The next thing I would check is the scale of the root mesh, __root nodes in gltf files sometimes have -1 scale. You can console.log(scene.meshes), and check for weird scales. Maybe importing to blender, applying Location, rotation and scale and re-exporting solves this problem.

5

Hi. This looks like a transparency issue.

image
image.png1351×547 128 KB

You have to set transparency to all the materials except body and hair to opaque, and enable depthprepass for body material. And unfortunatelly if I remember well you haveto do this manually from the code something like this:

var bodyMat = scene.getMaterialByName('Bodymat')
bodyMat.needDepthPrePass  = true
var topMat= scene.getMaterialByName('Topmat')
topMat.transparencyMode = 0

Cheers!

1 Like
6

Thank you this exactly what was needed. I added the following code.

scene.materials.forEach(m => {m.transparencyMode = 0});

var bodyMat = scene.getMaterialByName('Bodymat');
bodyMat.needDepthPrePass  = true;

I can understand transparency, but what is " Depth Pre Pass"?

7

I hope you’ll find the answer here:
https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered

8

Sorry if I was unclear.
As I said you have to change the transparency but not on all materials, if you change it for body material then you’ll see the eyelashes doesn;t look very good because they lost their transparency. So because to this material we do not change the transparency, so it is still an alpha blend material, here we need to enable the depth prepass, to reducing alpha blending sorting issues.Cheers!