Three.js: Some areas of meshes does not move with corresponding bones when using GLTF

[skalexey]

Description of the problem

I have a 3D model exported from Blender to Collada and then converted to GLTF using collada2gltf converter. I have already fully described the problem here:
https://github.com/KhronosGroup/COLLADA2GLTF/issues/13
Please, read this at first.
As figured out this is a problem somewhere in Three.js. May be in GLTF Loader, may be in GLTF Shader or somewhere else.
The problem is that vertices of some areas on mesh are not properly bound to corresponding
bones.

Three.js version

• [x] r76

Browser

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

OS

• [x] All of them
• [ ] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

[takahirox]

Does this problem still occur on the latest revision r84 dev?

[skalexey]

Yes. The problem is still occur in revision 84dev.
gltf_three_js_84dev_bugreport.mov.zip
You can see how it works in the attached zipped .mov file. The textures are not rendered, but you can see how mesh behaves differ than in the corresponding .dae file.

[donmccurdy]

There could be more going on, but most of the problem is #10366. Several KeyframeTrack instances are failing to validate because of '.' characters in the node names. Example track name: ICE.010.position. More discussion in that bug.

---

EDIT:

📦 Shooter glTF.zip

If I hack a fix to that, and rename the texture (the glTF file specifies Untitled.001.png for some reason), I get this. So, better, but definitely still broken.

[takahirox]

Hm, it looks that the gun position should correspond to the guy's right hand's/back's(before he grabs it) but it doesn't... Gun't rotation looks fine maybe tho.

[takahirox]

Does this glTF model work on other libraries?

I doubt if the conversion from Collada to glTF has done correctly
because Armature_GUN_pose_matrix-output-array parameter in glTF looks weird...

On .dae the translation value of that parameter fluctuates in the animation
while the value won't change on .gltf
(Compare Armature_GUN_pose_matrix-output-array in .dae with animation_animation_10 in .gltf)

[skalexey]

I have not tried to use another libraries, but collada2gltf team have:
https://github.com/KhronosGroup/COLLADA2GLTF/issues/13
Now it looks more like in JglTF and Cesium in the related issue.
Thanks a lot to donmccurdy for the explanation of the problem. I have replaced dots by slashes in names of all bones in blender project of the model and got the result maximally close to expectations:
gltf_shooter_in_three_js_r84dev.mov.zip
Something new with ice, but the gun bone seated in right position. In .dae file everything is fine as usual.

[takahirox]

Well, you mean replacing dots with slashes in the original project has fixed the gun transformation issue?
I (and probably @donmccurdy) edited them directly in .gltf but the gun transformation issue wasn't fixed.

So, it means the transformation issue was caused by converter, not Three.js?

[donmccurdy]

Cool. I think the converter got something wrong in the texture as well, at least when I ran it.

We'll be fixing #10366 in any case, that issue keeps coming up. I worked around this by trying one (of several) fixes for that issue rather than editing the file, but finding the right fix for that is a bit harder.

[skalexey]

Underscores. Sorry). Yes. It looks like the problem of the gun is caused by collada2gltf. What about texture - it is composed of two problems: firstly Blender put old texture to .dae file after exportation which is already removed from the project and secondly - collada2gltf set that old texture as a texture by default.

[donmccurdy]

I believe this is now fixed. Importing your COLLADA file into Blender and exporting with the glTF-Blender-Exporter, I get a correctly-animated result:

Note that the materials may take some tuning in Blender... there are particular material settings that the exporter needs.