Is it possible to load a GLTF animation without the corresponding meshes?
I have a talking head animation created in Blender and I’m able to export it as a GLTF model with mesh + animation and import it into Three JS.
However I have multiple models with the exact same mesh and I want to just load a single animation once and apply it to the other models.
The problem is that the GLTF animation with mesh is 8.9MB and I only need the shape key animations. Is it possible to export just the shape key animations as a JSON file or a GLTF without the mesh to reduce the animation file size?
Yes it’s possible
In fact three do not require bones duplicates to store animations. Only the raw tracks data
load a complete T-pose rig (mesh and bones)
retrieve the animation track array from bones-only file
However shape key may not work if your meshes are completely different. They are tied to vertices structures. I’m not sure you can optimize this, depends how your meshes are done.
The problem I have is if I export the animation model with the mesh, it balloons to 8.9MB in size. If I don’t export the mesh then the shape key animations don’t get exported from Blender.
I need a way to keep the shape key animations but without mesh if possible.
Unfortunately I’m quite new to Blender and I don’t quite understand the steps. Would you be able to take a look at this simple FBX file with the talking head and see if it’s possible with the method you mentioned?
I also don’t quite understand why when exporting this 3MB FBX file to GLB, the output file is 8.4MB.
Just checked the model.
If I understand well, the head never change. So imo you have two options.
1.create a single shape key animation track, including all animations after each other. This way you don’t need to duplicate it in multiple files. Then you split the animations using JS/three code instead.
2.Directly compose your animations using three internal shape key system.
Like this exemple : three.js examples
But this may be too tedious if you aim for complex expression.
I’m currently using the first method, but the problem I’m facing is when I export to GLTF via Blender, the final size is 8.4MB, which is pretty huge for just a half second animation.
I’m assuming it’s because the GLTF includes the mesh and everything else. I need the GLTF file size to be a few hundred KB at most, with just the animation. Is this possible?
You can use gltf compression tools (not sure you can reach such low size tho)
I know gltf packer support animations. Didn’t followed Draco updates, check just in case.
Alternatively is there some way I can manually extract the shape keys + animations and save it into a JSON file and import that into Three JS? This way I can bypass all the textures and meshes.
I just need the shape key + animations actually.
I also tried to disable every checkbox in Blender’s GLTF export settings apart from animations and shape keys and the final GLB file still contains the face mesh.
This other thread talks about how to do this using Three’s GLTFExporter:
So although this doesn’t answer how to do this with Blender, a possible workflow is you could load the GLTF file into a temporary Three.js scene you use after you’ve exported from Blender, then use GLTFExporter to create the final GLTF file with only animations and no mesh data.
Once you have that resulting glTF json in the temporary Three.js setup, you can save it as a file by making a new File or new Blob, and then using:
/**
* @param {File | Blob} file - The `File` or `Blob` to have the user save.
* @param {string} fileName - The file name to pre-fill in the save file dialog.
*/
export function saveFile(file, fileName) {
const url = URL.createObjectURL(file)
const a = document.createElement('a')
a.href = url
a.download = fileName
document.body.append(a)
a.click()
a.remove()
URL.revokeObjectURL(url)
}
If you’re familiar with Blender plugins, you could possibly write a python pugin that can open a browser with the Threejs code to do this automatically once you’ve got it going manually.