Interpolation warning when using GLTF anim exported from Blender

Hello, Three.js newbie here. I’m trying to export a skinned character animation from Blender, and display it in my web page.

I have a skinned character in Blender, and if I export it with GLTF, I can load the model into my app and display it just fine.

So then I add an animation in Blender. I put in place two keyframes (at frame 1 and frame 20), rotations only. When I play the animation in Blender, my character flaps its arms up and down. I export this, and now my GLTF has one animation. But I also get a whole bunch of warnings like this, one for each bone:

THREE.KeyframeTrack: unsupported interpolation for quaternion keyframe track named [various bone names].quaternion

Looking into the gltf animation file, I see each bone has a QuaternionKeyframeTrack, which has a:

createInterpolant: ƒ InterpolantFactoryMethodGLTFCubicSpline( result )

in it. The three.js source code implies that CubicSpline isn’t supported for Quaternion animation. So I go into Blender, select each of my two keyframes in the Dope sheet, and set the Key’s Interpolation Mode to Linear. Now when I play back my animation in blender, the arm flapping is at constant speed instead of accelerating in the middle. So not Cubic Spline any more right? Just linear, which is supported.

I re-export as a GLTF from Blender with this new Linear animation… and get exactly the same error message when I load my file with three.js. The factory is still GLTFCubicSpline.

When I try to play back this animation with the AnimationMixer and clipAction calls, I don’t get any error message, but nothing moves! I’m assuming that’s cause of the earlier interpolation warning message, although I don’t know for sure.

Any thoughts as to how to get my animation to play? Thanks in advance.

I’ve just tracked the issue partly down to this bit of code in my skinned mesh loading:

	var lam_mat = new THREE.MeshLambertMaterial({ map: the_tex });
	gltf_mesh.traverse( function ( object ) {
		if (object.material != undefined)
			object.material = lam_mat;
	} );

Looks like I’m not allowed to change the material to Lambert. There’s probably a skinned Lambert material I need to use somewhere. Looks like the CubicSpline warnings are not relevant to the lack of animation. I’m still interested in how to get rid of them though, if anyone has an idea. My character is now stuck in the first frame of the animation (but at least is no longer in T pose).

The warnings shouldn’t be hurting anything here, although I do want to look at fixing those.

If you’re swapping in another material you probably need to set .skinning=true on it.

Good tip, ‘.skinning = true’ sounds like what I need. I can get rid of the cubic interpolation warning by just commenting that warning out in my local copy of three.js now I know it’s harmless.

It would be good to get rid of it permanently so it doesn’t cause people to think their animation problems are due to it, like I did, even though the real problem was elsewhere. Thanks for having helped.

As a further thought, perhaps a warning message could be printed if someone assigns a material that does not have .skinning set to true to a SkinnedMesh? And a warning suppression function could also be added in case the user really does want to do this without being warned for some reason.

For more about the warning see https://github.com/mrdoob/three.js/issues/15416, it should be fixed before long.

3 Likes