javascript - 如何计算骨骼动画中的最终骨骼矩阵?

标签 javascript matrix webgl skeletal-animation gl-matrix

我无法找到我的骨骼的最终骨骼矩阵。

我知道我的绑定(bind)姿势矩阵有效,我知道我的变换矩阵有效,但我想将它们相乘(我称之为复合矩阵),然后将它们乘以它的父级复合矩阵(然后乘以它的父级父级,等等) .) 会给我正确的矩阵。

值得注意的是,我使用 gl-matrix.js 作为我的向量/矩阵数学库,它的矩阵数学是相反的,获得世界矩阵需要, PositionMatrix * RotationMatrix * ScaleMatrix,而不是相反。所以我可能会混淆订单,

我尝试过更改绑定(bind)姿势矩阵和骨骼变换矩阵的乘法顺序,以及最终矩阵和父矩阵的顺序,但我现在感到困惑。

无论如何,用一个鞠躬来解决这个问题, 给定一个网格,其中每个顶点都预先变换到其相对骨骼空间,每个骨骼绑定(bind)姿势矩阵和每帧变换矩阵的每个骨骼,我如何找到最终的骨骼矩阵?

编辑:

仍然有问题,但它可能有助于说明我现在在哪里,以下伪代码使模型完美地进入其绑定(bind)姿势

finalBones = []
foreach bone in bones
    mat = bone.poseMatrix
    parent = bone
    while (parent.parent != null)
        parent = parent.parent
        mat *= parent.poseMatrix
    finalBones.push(mat)

上面的片段正是正在发生的事情,无需解释矩阵函数(它的 JavaScript,因此它是通过 mat4.copy 和 mat4.mul 等函数完成的)

我想如果我做了类似的事情

finalBones = []
foreach bone in bones
    mat = bone.poseMatrix
    mat *= bone.transformMatrix
    parent = bone
    while (parent.parent != null)
        parent = parent.parent
        mat *= parent.poseMatrix
        mat *= parent.transformMatrix
    finalBones.push(mat)

我会得到最终的矩阵(并且我已经尝试在poseMatrices之前使用transformMatrices),但我得到的只是一个脊柱断裂且腿内翻的模型

编辑2:

进一步检查后,空闲帧上的骨骼变换矩阵的中间两行是倒置的吗?奇怪,但我正在研究如果我现在将它们交换回来会发生什么

最佳答案

事实证明,矩阵的奇怪之处是整个问题,进一步的检查引导我了解四元数旋转以及它们如何从 blender 导出(我自己的文件类型,所以我的不好)我没有注意到 blender 的四元数已格式化(W, X, Y, Z),其中 gl-matrix.js (我正在使用的数学库)被格式化为 (X, Y, Z, W),稍后对加载进行一些调整,模型动画完美!为了记录这个问题,这是我发现有效的循环

finalBones = []
foreach bone in bones
    parent = bone
    mat = identityMatrix
    while (parent.parent != null)
        mat *= parent.transformMatrix
        mat *= parent.poseMatrix
        parent = parent.parent
    finalBones.push(mat)

关于javascript - 如何计算骨骼动画中的最终骨骼矩阵?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28650815/

相关文章:

python - Numpy - 在 Python 中创建一个输入为两个矩阵、输出为二进制矩阵的函数

javascript - 将 WebGL 非连续线渲染为单个对象

javascript - 如何在 Threejs 中使用外部和内部网格对象渲染带有剪裁平面和模板的帽子

javascript - 如何导出 Reflect.defineProperty()?

javascript - React useEffect无限循环

arrays - Matlab:创建行为相同向量的矩阵。使用 repmat() 或乘以 ones()

c++ - opencv错误乘以2 Mat的

colors - WebGL 中的混合如何与 GLSL ES 片段着色器一起工作?

javascript - 使用 JavaScript 动态更改背景颜色

javascript - 如何使用 D3.js 按照自然方式在下拉列表中排列日期