作者：Shan Huang，Google 合作伙伴创新创意技术专家

背景

The PoseNet and Facemesh (from Mediapipe) TensorFlow.js models made real time human perception in the browser possible through a simple webcam. As an animation enthusiast who struggles to master the complex art of character animation, I saw hope and was really excited to experiment using these models for interactive, body-controlled animation.

最终的结果是 姿态动画师，一个 开源 的网络动画工具，它可以通过网络摄像头中的身体检测结果，为 SVG 角色注入活力。这篇文章涵盖了姿态动画师的技术设计，以及设计师创建和动画化他们自己角色的步骤。

使用 FaceMesh 和 PoseNet 与 TensorFlow.js 来动画化全身角色

姿态动画师的总体思路是，使用 PoseNet 和 FaceMesh 的识别结果，对一个 2D 矢量图中的包含曲线进行实时更新。为了实现这一点，姿态动画师借鉴了计算机图形学中基于骨骼的动画理念，并将它应用于矢量角色。
在骨骼动画中，角色由两个部分组成

• 用于绘制角色的表面，以及
  
• 一个用于动画化表面的分层互连骨骼集合。
  

在姿态动画师中，表面由输入 SVG 文件中的 2D 矢量路径定义。对于骨骼结构，姿态动画师提供了一个预定义的骨骼（骨骼层次结构）表示，它基于 PoseNet 和 FaceMesh 的关键点。此骨骼结构的初始姿态在输入 SVG 文件中指定，以及角色图示，而实时骨骼位置则由 ML 模型的识别结果更新。

来自 PoseNet（蓝色）和 FaceMesh（红色）的检测关键点

查看 这些步骤，以创建你自己的用于姿态动画师的 SVG 角色。

受 PoseNet 和 FaceMesh 输出控制的动画贝塞尔曲线/td>

骨骼绑定流程概述

完整的骨骼绑定（骨骼绑定）流程需要以下步骤

• 解析输入 SVG 文件以获取矢量图示和预定义的骨骼，两者都处于 T 姿势（初始姿势）。
  
• 遍历矢量路径中的每个段，使用线性混合蒙皮 (LBS) 计算每个骨骼的权重影响和变换（将在本文稍后解释）。
  
• 实时运行每个输入帧上的 FaceMesh 和 PoseNet，并使用结果关键点更新骨骼位置。
  
• 根据更新的骨骼位置、骨骼权重和变换，计算矢量段的新位置。
  

还有其他工具提供类似的操控功能，但它们大多数只更新资产边界框，不使用识别关键点变形角色的实际几何形状。此外，很少有工具提供全身识别和动画。通过变形单个曲线，姿态动画师非常适合捕捉面部和全身运动的细微差别，希望能够提供更具表现力的动画。

骨骼定义

骨骼结构是根据 PoseNet 和 FaceMesh 的输出关键点设计的。PoseNet 返回全身的 17 个关键点，这很简单，可以直接包含在骨骼中。然而，FaceMesh 提供了 486 个关键点，因此我需要更加谨慎地选择要包含的那些关键点。最终我从 FaceMesh 输出中选择了 73 个关键点，并将它们组合在一起，得到了一个包含 90 个关键点和 78 根骨骼的全身骨骼，如下所示

90 个关键点，78 根骨骼全身骨骼

预期每个输入 SVG 文件都包含默认位置的骨骼。更具体地说，姿态动画师将查找一个名为“skeleton”的组，该组包含以其所代表的关节命名的锚点元素。可以在 这里找到示例骨骼 SVG。设计师可以随意在他们的设计文件中移动关节，以最佳地将骨骼嵌入角色中。姿态动画师将根据 SVG 文件中的默认位置计算蒙皮，尽管极端情况（例如，非常短的腿/臂骨）可能不受蒙皮算法的良好支持，可能会产生不自然的结果。

在设计软件（Adobe Illustrator）中嵌入骨骼的图示

用于矢量路径的线性混合蒙皮

姿态动画师使用最常见的蒙皮算法之一，用于使用骨骼结构变形表面 - 线性混合蒙皮 (LBS)，它通过混合每个骨骼单独控制的变换来变换表面上的顶点，并根据每个骨骼的影响进行加权。在我们的例子中，顶点指的是矢量路径上的锚点，骨骼由上面骨骼中的两个连接的关键点定义（例如，“leftWrist”和“leftElbow”关键点定义了骨骼“leftWrist-leftElbow”）。

为了用数学公式表示，顶点 vi 的世界空间位置计算为其中
- w_i 是骨骼 i 对顶点 i 的影响，
- v_i 描述了顶点 i 的初始位置，
- T_j 描述了将骨骼 j 的初始姿态与其当前姿态对齐的空间变换。

骨骼的影响可以自动生成，也可以通过权重绘制手动分配。姿态动画师目前只支持自动权重分配。骨骼 j 对顶点 i 的原始影响计算为其中 d 是 vi 到骨骼 j 上最近点的距离。最后，我们将顶点所有骨骼的权重归一化，使其总和为 1。现在，要将 LBS 应用于 2D 矢量路径（由直线和 贝塞尔曲线组成），我们需要对带有进出控制柄的贝塞尔曲线段进行一些特殊处理。我们需要分别计算曲线点、进控制点和出控制点的权重。这将产生更好的效果，因为对控制点的骨骼影响会更加准确地捕捉到。

有一个例外情况。当进控制点、曲线点和出控制点共线时，我们对所有三个点使用曲线点权重，以确保它们在动画化时保持共线。这有助于保持曲线的平滑度。

共线曲线控制柄共享相同的权重，以保持共线

运动稳定

虽然 LBS 已经为我们提供了动画帧，但 FaceMesh 和 PoseNet 原始输出会引入明显的抖动。为了减少抖动并获得更平滑的动画，我们可以使用预测结果中的置信度得分，以不均匀的权重对每个输入帧进行加权，使低置信度帧的影响更小。

遵循这个思路，姿态动画师计算了帧 t 时关节 i 的平滑位置，公式如下其中
帧 i 的平滑置信度得分计算为考虑极端情况。当两个连续帧的置信度得分都为 1 时，位置以 50% 的速度接近最新位置，这看起来响应速度快且相当平滑。（为了进一步调节响应速度，可以通过更改最新帧的权重来调整接近速度。）当最新帧的置信度得分为 0 时，其影响将被完全忽略，从而防止低置信度结果引入突发的抖动。

基于置信度得分的裁剪

除了使用置信度得分对关节位置进行插值之外，我们还引入了最小阈值来决定是否应该渲染路径。

路径的置信度得分是其各个段点的置信度得分的平均值，而各个段点的置信度得分又是其影响骨骼得分的加权平均值。当路径的置信度得分低于某个阈值时，整个路径将在特定帧中隐藏。

这对于隐藏低置信度区域的路径很有用，这些区域通常是位于摄像机视野外的身体部位。想象一下上半身拍摄：PoseNet 始终会返回腿部和臀部的关键点预测，尽管它们的置信度得分很低。通过这种钳位机制，我们可以确保下半身部位被适当地隐藏，而不是以奇怪的扭曲路径的形式出现。

展望未来

是否要进行网格化

当前的蒙皮算法主要围绕 2D 曲线展开。这是因为从 PoseNet 和 FaceMesh 构建的 2D 骨骼具有很大的运动范围和不同的骨骼长度 - 与游戏中动画中的骨骼长度相对固定不同。我目前从变形贝塞尔曲线中获得了比变形来自输入路径的三角形网格更平滑的结果，因为贝塞尔曲线更好地保留了输入线的曲率/直线度。

我渴望改进用于网格的蒙皮算法。此外，我还想探索比线性混合蒙皮更高级的蒙皮算法，线性混合蒙皮有一些局限性，例如弯曲区域周围的体积变薄。

新的编辑功能

姿态动画师将图示编辑委托给诸如 Illustrator 等设计软件，这些软件功能强大，可以用于编辑矢量图形，但没有针对动画/蒙皮要求进行定制。我希望通过浏览器内 UI 支持更多动画功能，包括

• 蒙皮权重绘制工具，允许手动调整关键点上的各个权重。这将比自动权重分配提供更高的精度。
  
• 支持输入 SVG 文件中的光栅图像，以便艺术家可以在他们的设计中使用照片/图画。图像边界框可以很容易地表示为矢量路径，因此使用当前的蒙皮算法计算其变形很简单。
  

亲身体验！

尝试 实时演示，你可以使用现有的角色进行玩耍，或者添加你自己的 SVG 角色，看看它们会如何栩栩如生。

我最期待看到创意社区会创作出什么样的交互式动画。虽然演示中的人物是人类角色，但姿态动画师适用于任何 2D 矢量设计，因此你可以尽可能地抽象/前卫，以挑战它的极限。

要创建您自己的可动画插图，请查看此指南！别忘了在社交媒体上使用#PoseAnimator与我们分享您的作品。如果您有任何问题，请随时在 Twitter 上联系我 @yemount。

或者，如果您想直接查看源代码，它可以在github 上分叉。快乐编程！