Merging fbx animations into glb, node rotation

[iiLearner]

Hi, I have an animation exported from mixamo into fbx format, is it possible for me to merge the animation with my glb/tf file?

so basically with AR-Core for augmentated reality, you need an animation within the glb/tf file for it to play, you cannot link an external animation. do I'd have to somehow import the animation into the glb file to have it played in AR.

Secondly, is the node rotation not precise? I've imported the same model in blender and gltf transform document and while setting a node's rotation values in blender works fine however copying those set values from blender to gltf transform rotate method it works completely different, is there something I'm missing?

[donmccurdy]

is it possible for me to merge the [FBX] animation with my glb/tf file?

Everything is possible with enough work, however glTF Transform does not read FBX files. In general I would expect this to be complex. The biggest hurdle probably is that FBX and glTF are different formats with different representations of the skeletal and animation data, and different coordinate and scale conventions. You'll need all of those to match exactly between the glTF armature and the FBX animation data. In practice I think the best way to do this is to load both the glTF and FBX files into Blender, set up the armature, make sure it works there, and then export it to glTF. The FBX animation file will need to be built around the same armature as the glTF file uses.

Secondly, is the node rotation not precise?

It is lossless. glTF Transform's node.setRotation requires a Quaternion in XYZW order. Blender allows specifying rotations as Quaternions WXYZ, but uses Euler XYZ by default:

node.setRotation([x, y, z, w]);

[iiLearner]

I could definitely convert the animation to gltf and yes the animation and the model data match exactly. in fact in threejs I'm currently loading the model and the fbx animation and then playing the animation on the model with threejs and it works perfectly, I just don't see how even importing the animation as gltf into gltf transform would allow me to add into animation list for the model.

as for the rotation, it's correct I have set the rotation to be WXYZ on blender and I'm passing the data to gltf transform as XYZW but it still does not work as intended.

[donmccurdy]

I just don't see how even importing the animation as gltf into gltf transform would allow me to add into animation list for the model.

I have to make some assumptions about what your files contain, but I expect the process would look something like this:

1. merge the glTF files containing the skinned mesh and the animation(s) e.g. with gltf-transform merge
2. find the primary Skin, the only one attached to a mesh, and gather a list of its joints (skin.listJoints())
3. for each AnimationChannel, replace its target node (currently from the animation-only glTF) with the target node of the same name from the primary Skin
4. dispose all unused Skins, Scenes, and Nodes

as for the rotation, it's correct I have set the rotation to be WXYZ on blender and I'm passing the data to gltf transform as XYZW but it still does not work as intended.

I cannot guess on this, you'll need to report a bug and share complete steps to reproduce the problem. It's possible that something else (a parent Node, or a Skin) is affecting the final rotation of the Node.

[echtme]

I'm looking into the same issue and these are my attempts so far: https://stackoverflow.com/questions/73175454/merge-a-gltf-model-with-gltf-animation-mixamo-into-one.

I tried to merge a model GLTF file with an animation GLTF (exported and converted from Mixamo), but unfortunately the created output isn't animated.

`import { Document, NodeIO } from '@gltf-transform/core';

const io = new NodeIO();
const inputDocument1 = await io.read('./models/model.gltf');
const inputDocument2 = await io.read('./models/animation.gltf');
const outputDocument = new Document().merge(inputDocument1).merge(inputDocument2);

const buffer = outputDocument.getRoot().listBuffers()[0];
outputDocument.getRoot().listAccessors().forEach((a) => a.setBuffer(buffer));
outputDocument.getRoot().listBuffers().forEach((b, index) => index > 0 ? b.dispose() : null);
io.write('./models/generated/outputs.gltf', outputDocument);`

[donmccurdy]

It's hard to say exactly without knowing what's in these files, but I think you'll need to do something like the suggestion above about replacing animations' target nodes. The animations in animation.gltf are targeting nodes in animation.gltf. Presumably you want to change them to target nodes with the same names in model.gltf after merging the files.

[iiLearner]

it took me a while to understand what dom meant but I finally figured it out and had it working.
Code below:

// find the skin
  const skin = root.listSkins()[0]
    
  // get animation channels
  const animationChannels = root.listAnimations()[0].listChannels()

  animationChannels.forEach((channel) => {
    const curTargetNode = channel.getTargetNode().getName()
    const newTargetNode = skin.listJoints().find((node) => node.getName() === curTargetNode)
    if (newTargetNode) channel.setTargetNode(newTargetNode)
  })

[krazyjakee]

How could I use this solution to merge 20+ of these files?

[echtme]

@iiLearner This was the missing piece, now it works. Awesome, thanks!!!