Pose Animator 让矢量图捕捉你的动作，然后动起来。（翻译学习）

Pose Animator——一个开源工具，使用动作捕捉技术让SVG角色活过来

背景

PoseNet和Facemesh这两个TensorFlow.js模型可以让使用者通过一个简单的摄像头在浏览器中实现实时人体动作感应。利用这个技术，作者开发出了Pose Animator，一个开源的web动画工具，可以用摄像头让SVG角色动起来。这篇博客将介绍Pose Animator的技术，以及设计师用为自己的角色创建动画的过程

通过TensorFlow.js，利用FaceMesh和PoseNet给全身角色装配动画

Pose Animator的整体思想是take一个2D矢量插画，根据从PoseNet呵FaceMesh中得到的结果实时更新插图的曲面。为此，Pose Animator结合计算机图形学的骨骼动画，将其应用于矢量角色。
在骨骼动画中，角色由两部分表示：1、一个用于绘制角色的表面2、骨骼结构。在Pose Animator中，这个表面由输入的SVG文件定义。而针对骨骼结构，Pose Animator提供了一个预先定义好的骨骼结构，这个结构基于从PoseNet和FaceMesh中提取的关键点。这个骨骼结构的初始姿态由输入的SVG文件定义，而它的实时姿态由机器学习识别后进行更新。下图展示了从PoseNet和FaceMesh中提取关键点。

绑定流程

完整的骨骼绑定流程如下：
1、解析输入的SVG文件，包括矢量图形和预设的骨骼，两者都是T-Pose。
2、使用线性混合蒙皮迭代矢量路径中的每一段，以计算每个骨骼的权重影响和变换。
3、在每一帧中实时运行FaceMesh和PoseNet，并使用得到的结果关键点来更新骨骼的新位置
4、根据更新的骨骼位置、骨骼权重，计算新的向量段。

也存在其他的工具可以提供功能，但是他们中的大部分只更新约束框，并不会根据识别到的关键点，改变角色的实际几何图形。同样，很少有工具提供人体全是试别和动画的功能。通过改变单个曲线，Pose Animator很善于捕捉面部的细微变化和全身动作，并且比较容易提供表达意味丰富的动画。

骨骼定义

骨骼结构是根据从PoseNet和FaceMesh中输出的关键点定义的。
PoseNet返回包含全身的17个关键点。FaceMesh返回486个关键点，这对于骨骼绑定来说有点太多了，所以要进一步选择包含哪些关键点。最后从FaceMesh中选择了73个关键点。合起来，我们总共有90个关键点，78个骨骼，如下图所示：

每个输入的SVG文件都包含这个骨骼结构的默认姿势。具体地，PoseAnimator会寻找一个叫作“skeleton”的组，包含各个关节的锚点元素。设计者可以移动骨骼中的关节，以便让骨骼最好地适应于角色。 PoseAnimator将根据默认的位置计算蒙皮权重。极端情况下（比如非常短的腿或者手臂）
可能无法支持骨骼绑定算法。

针对矢量路径的线性混合蒙皮

PoseAnimator使用的是最常用的骨骼绑定算法（这些算法根据骨骼结构让物体的表面产生形变）之一——线性混合蒙皮算法（Linear Blend Skinning LBS），根据每个顶点所属的骨骼的影响权重，决定其位置。在本研究中，一个顶点代表一个向量路径的锚点。两个连接的关键点定义一个骨骼（比如关键点‘leftWrist’和‘leftElbow’关键点定义了骨骼‘leftWrist-leftElbow’）。
表达成数学公式，vi‘的世界坐标位置可以这样计算：

在这里，

wi是骨骼i对顶点i的影响因子
vi描述了顶点的初始位置
Tj描述了骨骼j当前位姿的空间位置。
对骨骼的影响可以自动生成，或者用权重刷手动指定。Pose Animator目前只支持自动生成权重。一个骨骼j对一个顶点i原始的影响可以计算为：

在这里，d是vi到骨头j最近一个点的距离。最后，我们将所有骨头对一个点的影响归一化。即让影响之和为1

现在，为了将LBS算法应用到2D矢量路径（vector path）path是由直线和贝塞尔曲线构成的。（贝塞尔曲线是一种参数曲线，通过一组离散的控制点，和一系列公式定义的一条平滑、连续的曲线。详情：https://en.wikipedia.org/wiki/B%C3%A9zier_curve）我们需要对有输入和输出的贝塞尔曲线进行一些特殊的处理。我们需要对曲线的点分别计算权重，包括in control point，out control point。这样曲线的控制点能被更精确地捕捉，这会让结果看起来更好，
这里有一个例外情况。当in control point、curve point、out control point是共线的时候，我们会使用所有三个点的曲线权重以保证他们在动画化的时候是共线的。这可以让曲线更加平滑。

动作稳定

LBS算法已经让我们可以产生动画帧了，但是还有一个问题，那就是从FaceMesh和PoseNet产生的输出动画会有比较剧烈的抖动。为了减少这种抖动，使得生成的动画更加平滑，我们可以采用预测结果的置信度分数来不均匀地加权每个输入帧，减少对低置信度帧的影响。
按照这个思路，Pose Animator计算了在第t帧中，量关节i的平滑位置：

这里，

Jit−1J^{t-1}_iJit−1是关节i在第i-1帧的位置
Ji′tJ'^{t}_iJi′t是第i帧中，FaceMesh或PoseNet的输出
scoreit−1score^{t-1}_iscoreit−1是第i-1帧的平滑置信度
scorei′tscore'^t_iscorei′t是FaceMesh或PoseNet原始的输出帧的置信度。

第i帧的平滑置信度的计算方式如下：

考虑极端情况的话，当两个连续的帧的置信度值都为1，将以50%的速度逼近最新位置，当最新帧的置信度值为0，其影响将被完全忽略，以防止抖动。

基于置信度得分的剪裁

除了使用是新都分数对关节位置进行插值，PoseAnimator还引入了一个最小阈值来决定是否渲染该路径。
路径的置信度分数是其分割点的置信度得分的平均值，而这又是骨骼影响因子得分的加权平均值。当在某个帧，此路径的置信度低于某个阈值，此路径将被隐藏。
这样的方法可以使得动画在低置信度的区域隐藏一些path，通常这是在摄像机之外的一些身体部分。想象一个上半身的例子：即便置信度分数很低，PoseNet也会返回腿部和臀部的关键点预测。用以上的方法，我们可以让没有出现在摄像机中的下半身隐藏起来。

展望

To mesh or not to mesh？
当前的绑定算法主要集中在2D曲线上，这是因为PoseNet和FaceMesh构建的骨骼结构有大量的移动和可以变化的骨骼长度，而不像大部分游戏中的动画，骨骼长度通常是不变的。根据实验，相比使用三角形网格，bezier曲线形变的结果更加平滑，因为bezier曲线可以更好地保留输入弦断的曲率等信息。
适用于mesh的算法还在探索，另外，线性混合绑定算法也可以改进，现在的算法在处理弯曲位置时，相关部位会变得很薄。
更多的编辑功能
PoseAnimator将图片的编辑委托给了Illustrator等设计软件，这些软件在编辑矢量图片方面功能强大，但不适于动画/蒙皮要求。可以使用浏览器的UI支持更多的动画功能，包括：
1、蒙皮权重绘制工具，可以手动调整关键点上的单个权重。这将提供比自动分配权重更高的精度。
2、支持输入SVG文件，直接编辑图像内容。
项目：
https://github.com/yemount/pose-animator