GLTF蒙皮模型动画播放时扭曲问题的技术问询

你的核心问题是动画变换的空间应用错误：GLTF动画定义的是关节局部空间下的姿态增量，但你直接将动画矩阵animMatrix乘到全局变换global_TRS上，相当于在全局空间叠加动画，破坏了节点树的层级依赖关系，导致整体偏移、关节关联异常。

修复步骤 #

1. 分离静息态与动画态的局部变换 #

首先为每个关节保存静息姿态下的原始局部矩阵local_rest_TRS（从GLTF节点的TRS直接导出），动画播放时，先基于这个静息局部矩阵叠加动画增量，再重新计算全局变换：

// 初始化时保存静息局部变换
joint.local_rest_TRS = glMatrix.mat4.create();
applyTRS(joint.local_rest_TRS, joint.translation, joint.rotation, joint.scale);

// 动画更新时的正确逻辑
function updateJointAnimation(joint, animMatrix) {
  // 重置为静息局部变换
  glMatrix.mat4.copy(joint.local_TRS, joint.local_rest_TRS);
  // 叠加动画的局部变换增量（列主序下：静息局部 * 动画增量）
  glMatrix.mat4.multiply(joint.local_TRS, joint.local_TRS, animMatrix);
}

2. 重新通过节点树计算全局变换 #

动画更新后，必须从根节点开始，按层级重新计算每个关节的global_TRS，确保父关节的变换正确传递给子关节：

function updateGlobalTransforms(rootNode) {
  // 根节点全局变换等于自身局部变换
  glMatrix.mat4.copy(rootNode.global_TRS, rootNode.local_TRS);
  
  // 递归更新所有子节点
  function traverse(node) {
    node.children.forEach(child => {
      // 子节点全局变换 = 父节点全局变换 * 子节点局部变换
      glMatrix.mat4.multiply(child.global_TRS, node.global_TRS, child.local_TRS);
      traverse(child);
    });
  }
  traverse(rootNode);
}

3. 正确生成关节矩阵 #

保持Khronos的公式不变，但确保使用的是动画更新后的全局变换：

function makeJointMatrix(joint) {
  const jointMatrix = glMatrix.mat4.create();
  // jointMatrix = 动画后的全局变换 * 绑定逆矩阵
  glMatrix.mat4.multiply(jointMatrix, joint.global_TRS, joint.inverseBindMatrix);
  return jointMatrix;
}

4. 排查常见细节错误 #

• 确认animMatrix是局部空间的变换：GLTF动画通道针对的是节点的TRS属性，插值结果必然是局部空间的增量，若你的动画逻辑输出的是全局变换，需转换为局部空间（用父节点全局变换的逆矩阵乘动画全局变换）。
• 矩阵乘法顺序：glMatrix是列主序库，mat4.multiply(result, a, b)等价于result = a * b，变换应用顺序是从右到左，务必和空间逻辑匹配。
• 绑定逆矩阵inverseBindMatrix：确保导入时没有转置或取逆错误，GLTF文件中该矩阵已经是绑定姿态的全局变换的逆，无需额外处理。

顶点着色器验证 #

确保蒙皮计算逻辑正确，关节矩阵按预期传入：

attribute vec3 aPosition;
attribute vec4 aJointIndices;
attribute vec4 aJointWeights;

uniform mat4 uMVP;
uniform mat4 uJointMatrices[64];

void main() {
    mat4 skinMatrix = mat4(0.0);
    for (int i = 0; i < 4; i++) {
        int idx = int(aJointIndices[i]);
        skinMatrix += aJointWeights[i] * uJointMatrices[idx];
    }
    gl_Position = uMVP * skinMatrix * vec4(aPosition, 1.0);
}

内容的提问来源于stack exchange，提问作者Lovro