Three.js: Skinning animation model outputted from Blender glTF 2.0 Exporter is not displayed properly

[cx20]

Description of the problem

This Issue has been separated from https://github.com/KhronosGroup/glTF-Sample-Models/issues/83#issuecomment-311939203

I also tried Blender 2.78c and glTF 2.0 Explorter.
First I tried to display EmaSimpleSkin.dae on Blender.

Next, I tried to display the glTF 2.0 file exported from Blender in Three.js.
Three.js + glTF 2.0 model result:

I thought it was a problem with the exporter, but because it will be displayed in the Vulkan Renderer, there is a possibility of glTF 2.0 Loader problem in Three.js.

Three.js version

• [x] r86

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

ThinkPad X260 + Intel HD Graphics 520

[donmccurdy]

/cc @takahirox were there incoming changes on skinning implementation? Should we test this against dev, or another branch somewhere?

[takahirox]

We can test on dev.
What I'm working on are skinning serialization and shared skeleton, they don't affect skinning animation itself.

[takahirox]

Can you share the model file here?

[donmccurdy]

Here is the .gltf from the Blender exporter:

EmaSimpleSkin.zip

More info in this thread: https://github.com/KhronosGroup/glTF-Blender-Exporter/issues/22

[takahirox]

Even I set animation off, skinning seems weird.

So, bone graph, boneInverses, or bindMatrix handling would be wrong?

[takahirox]

Looks working fine if I bind skinnedMesh.matrixWorld with skinnedMesh.bindMatrix after scene graph building.

But it breaks existing skin models(Monster/CesiumMan in examples) ... Hm...

[takahirox]

Is there any ways to confirm this model is correct in addition to using Vulcan renderer?

[donmccurdy]

@takahirox here is a version of CesiumMan generated by the Blender exporter (the default came from COLLADA2GLTF). It still works with current GLTF2Loader; does it break with the binding change above?

CesiumMan.zip (textures didn't export right but that's my fault)

AFAIK babylon.js is rendering the animation like we are, so it's possible the model is incorrect, but i'm not sure how to confirm that.

[takahirox]

It doesn't break CesiumMan exported by Blender exporter but I speculate the reason is its matrixWorld is identity matrix.

What I've done for EmaSimpleSkin.gltf is

Adding the following line here

_scene.updateMatrixWorld( true );

And adding either one of the followings here

if ( child.isSkinnedMesh === true ) {
    child.bind( child.skeleton, child.matrixWorld );
}

if ( child.isSkinnedMesh === true ) {
    var boneInverses = child.skeleton.boneInverses;
    for ( var i = 0, il = boneInverses.length; i < il; i ++ ) {
        boneInverses[ i ].multiply( child.matrixWorld );
    }
}

I'm feeling like EmaSimpleSkin.gltf is missing premultiplied bindShapeMatrix in Inverse Bind Matrices or mesh.
(Refer to https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#skins)

But I'm not sure why Vulkan renderer displays correctly...

I'll ask about it in the exporter thread.

[takahirox]

Seems like this's exporter's bug.
See the blender exporter thread.

[cx20]

@takahirox Thank you for your research cooperation.
@donmccurdy Thank you for your support.