javascript - 基本二维人形火柴人的逆运动学原理

Question

作为业余爱好，我做一些动画极客，主要是在 Javascript（基于 DOM 和画布）中，以及在 C# 和其他技术方面做过一些事情。然而，其中大部分都是基于精灵、边界框、简单的像素移动等——现在我对使用矢量图形和实现一个由物理力驱动的具有逼真的移动关节的角色感兴趣。我想在画布元素或 SVG 中进行一些操作。

这里有很多与逆运动学有关的问题，但大多数问题都比较低级，并且需要先了解矢量、力和工程术语。我真正欣赏的是一些关于如何使具有髋关节、膝关节、踝关节等的基本火柴人能够半真实地移动的基本原则的一些指示。

我经常使用 Knockout.js，并且一直想知道是否可以通过 Knockout 的计算函数来实现每个关节的定位，例如膝关节的位置是根据髋关节和踝关节的位置以及作用于它们的力来计算的. 但我很难找到一个起点：我一直在我的房子周围慢动作走，就像一个疯子试图隔离人体的哪些部位实际上首先移动，以及每个部位如何对身体的运动做出反应其他。是否有一种通用的方法来说明人形图形在游戏和动画中的运动方式？

请记住，我习惯于使用像素坐标而不是矢量和力，我是否天真地试图孤立地解决这个问题？我会发现我还需要立即了解重心、动量和所有其他知识吗？

任何帮助表示赞赏，包括新手教程的链接！

Answer 1

将近 3 年过去了，我可以为自己的问题提供各种各样的答案。我发现了 JavaScript 库 Physics.js 和 p2.js，并深入研究了它们的演示和源代码，以尝试学习“物理思维方式”。简而言之，仍然作为物理新手说话 - 您通常不会明确移动对象，而是建模一个简化的物理世界，其中物体具有基本的物理属性，例如质量，它们服从与其他物体的约束，并对作用在它们上的力，例如重力或明确的方向力，例如脚踢球时。这使它们达到速度和角速度。该库根据物体所包含的形状处理物体的质心分辨率（例如，复杂的多边形加上矩形加上圆形可能形成单个物理物体）。发挥作用的各种力和约束将处于各种冲突中，图书馆负责解决在物理世界的给定“时间步长”之后应在何处以及如何定位所有内容的工作。这是通过各种“求解器函数”实现来完成的，这些实现在计算允许所需的精度时执行尽可能多的迭代。

Both of those libraries separate their physics modeling core from the visual rendering aspect, and allow for different rendering implementations. When I started using p2.js I saw that it was using Pixi.js for rendering in its demos so I ended up building my own simple JavaScript framework which built upon that integration: https://github.com/TomWHall/p2Pixi I haven't constructed a walking humanoid as such, but I have created a "circus unicycle" demo with a humanoid figure which for simplicity is constrained to its unicycle: http://booleanoperations.com/experiments/p2/unicycle/ When the rider is moved left and right (arrow keys or mouse click on either side of the canvas) negative or positive speed is applied to a motorized revolute constraint between the wheel and the shaft, and correctional forces are also applied to various parts of the unicycle and the rider to simulate some form of balancing. Rotational constraints are in place to fix the rider's feet to the pedals of the unicycle and his leg segments together, with rotational limits for the joints. Gravity keeps pulling the wheel down onto the ground, and the movement of the wheel causes the attached leg segments to move with it. This is obviously the reverse of how a unicycle and its rider work together - in reality, the leg segments move as a result of piston-like action of the tendons upon bones, and that leads ultimately to the rotation of the wheel. But that was an unnecessarily complex model of my circus world :-)

Answer 2

如果您正在做一种更实用的游戏，通常您不会使用动态引擎编写角色平衡中心之类的代码。这将是极其困难的，特别是如果您要结合柔软的身体和肌肉动力学，并且可能会将机器的大部分资源用于平衡两足动物，例如

相反，游戏通常主要采用硬编码类型的角色动画，当角色行走、奔跑、跳跃等时，艺术家为骨架提供图形和动画帧。角色的平衡感和运动感是由一个精心制作的艺术家的触觉，而不是大量物理计算的结果。

骨架基本上是一个简单的变形器。它像磁铁一样工作，通过软变形影响周围的顶点/像素。确定骨骼对其周围角色的影响区域的过程称为蒙皮。没有什么非常现实的：它看起来很现实，而不是表现得现实。它类似于 3D 网格：一个空心表面。它不是在原子和分子水平上建模事物：它看起来很逼真，而不是现实。

前向运动学然后旋转这些骨骼，使部分角色跟随。反向运动学是一种以 IK 链上具有 IK 目标/效应器的方式操纵这些骨骼的方法。通常你把角色摆成一个僵硬的人体模型——如果你想让一个人体模型伸手去拿东西，你必须分别旋转他的肩膀、肘部和手腕。IK 让您可以将整个手臂变成一条链，只需指定手腕的位置，让解算器自动旋转肘部和肩部。这使您可以摆出更像人类的姿势，我可以抓住某人的手腕并拉扯它，然后他们的手臂的其余部分也随之而来。

以艺术家驱动的传统方法作为坚实的基础，当一个角色抓住一根动态绳索时，它的运动不是固定的，例如，需要紧紧抓住。那是艺术家动画停止并开始计算角色动作的时候。

在这种情况下，您将使用角色抓住绳索的手作为 IK 目标，以使他的整个身体跟随，并在每个关节/骨骼上相应地设置旋转约束，以防止他向后弯曲手臂并折断它或像驱魔人一样旋转他的头 180 度。一个不受约束的 IK 解算器可能会做这些事情，因此旋转约束会阻止解算器做人体无法做的事情，而您的高级游戏逻辑只是专注于使用 IK 移动角色的手（以绳子为父级）求解器使身体跟随。

例如，当角色被霰弹枪击中时会应用类似的情况，并且您需要他使用布娃娃物理学在空中飞行——同样的想法。

尝试让角色完全由反向运动学目标和物理控制的游戏是非常不寻常的。我见过一些愚蠢的尝试，比如一个有趣的游戏，你的角色是个酒鬼，你的全部目标只是试图让他走回家，而不是摔倒而死。

因此，除非您的全部目标和抱负是尝试模拟像人体这样复杂的事物的动态，否则我建议从传统的艺术家驱动方法开始，并谨慎地在角色上使用这些动态。这也是 3D 包的做法，其中大部分角色由艺术家设定关键帧，但有时某些部分可能部分由动态计算，如头发的移动。

也许您可以逐步提高计算的自动化程度，而让艺术家的手动操作越来越少。但是，我不会从尝试将其全部自动化的方法开始，尤其是除非您精通动力学和逆运动学概念。

Answer 3

请记住，我习惯于使用像素坐标而不是矢量和力，我是否天真地试图孤立地解决这个问题？我会发现我还需要立即了解重心、动量和所有其他知识吗？

简而言之，是的。我并不是要气馁，但是如果您至少不了解 IK 背后的一些数学知识，那么即使是相应库的 API 也会让您感到困惑。如果你先做一些学习，你会减少挫折感。到那时，您应该对模型的结束位置和模型的渲染开始位置有一定的了解。