Filtering out static keyframes - Exporting Animation Data to FBX File

Questions
1

Problem: Blender bakes animations creating keyframes on each frame for each bone. This generates a huge animation file with a lot of static keyframes.
(Not animated bones get unecessary a lot of keyframes.)

In order to delete all static keyframes of character animation imported with the FBXLoader, I use the code:

// BEGIN Remove the keyframes that don’t change
object.animations.forEach(function(clip) {
for(var t = clip.tracks.length - 1; t >= 0; t–) {
var track = clip.tracks[t];
var static = true;
var inc = track.name.split(".")[1] == “quaternion” ? 4 : 3;

			for(var i = 0; i < track.values.length - inc; i += inc) {
				for(var j = 0; j < inc; j++) {
					if(Math.abs(track.values[i + j] - track.values[i + j + inc]) > 0.000001) {
						static = false;
						//console.log("found change: " + clip.name + " -> " + track.name);
						break;
					}
				}

				if(!static)
					break;
			}

			if(static) {
				clip.tracks.splice(t, 1);
			}
		}
	});

// END Remove remove the keyframes that don’t change

Goal is to load the baked animation file in three.js, filter out the static keyframes and export the animation as a smaller FBX-File in order to reuse it in three.js.

How can this be done?

2

Does this help? https://www.cgtrader.com/tutorials/237-export-a-fbx-with-animations-in-blender-with-reduced-keyframes

1 Like
3

Thanks Nik!
This solution reduces keyframes but doesn´t solve the core of the problem!

If several bones are not at all animated or partly animated through the whole animation Blender gives them automatically keyframes in the baking process. This makes the file huge!

Is there a way to convert the heavy baked blender FBX animation into a much more compressed FBX file to be used in three.js, filtering out all static keyframes?

5

Final goal is to import several character animations in three.js

6

I would say try converting it to glTF format using this tool:

If your end goal is to use the model on the web, glTF is a better format than FBX.

I’m not sure if the tool will do any optimisation on animations, but its worth testing.

7

Thanks! If my character has many actions (subanimations) can I import them into three.js with gltf like I do with fbx?

8

Yes, it should work.

If you use the latest version of blender (2.80) then you can export directly to glTF binary (.glb).

9

Thanks Lewy! Using Blender 2.80 I exported my character animation as .glb and it works on the online viewers.

Now, in order to integrate the .glb animation in a website using three.js which of the following scripts are necessary and where do I download their latest versions?

<script src="/three/three.js"></script>					
<script type="text/javascript" src="/three/dat.gui.js"></script>
<script type="text/javascript" src="/three/glTFLoaderUtils.js"></script>
<script type="text/javascript" src="/three/glTFAnimation.js"></script>
<script type="text/javascript" src="/three/glTFLoader.js"></script>
<script type="text/javascript" src="/three/glTF-parser.js"></script>
<script src="/three/stats.min.js"></script>
<script src="/three/OrbitControls.js"></script>
<script src="/three/Detector.js"></script>
<script src="/three/inflate.min.js"></script>
10

You can download the latest release here:

https://github.com/mrdoob/three.js/archive/master.zip

And check out this example for a the files needed:

https://threejs.org/examples/webgl_loader_gltf.html