發佈 Pose Animator：通過動作捕捉讓 SVG 角色在瀏覽器中栩栩如生

文 / Google 合作伙伴創新計劃創意技術專家 Shan Huang

Pose Animator

https://pose-animator-demo.firebaseapp.com/camera.html

PoseNet

https://github.com/tensorflow/tfjs-models/tree/master/posenet

Facemesh
https://github.com/tensorflow/tfjs-models/tree/master/facemesh

Mediapipe

https://mediapipe.dev/

背景

TensorFlow.js 中的 PoseNet 和 Facemesh（來自 Mediapipe）模型通過簡單的網絡攝像頭在瀏覽器中實現了實時的人類感知。作爲一名想要掌握角色動畫中複雜技巧的動畫發燒友，我看到了希望，同時也感到非常興奮，迫不及待地想要嘗試將這些模型應用於可由身體控制的交互式動畫中。

最終我製作了 Pose Animator，一種開源網絡動畫工具，可通過網絡攝像頭捕捉的身體檢測結果，讓 SVG 角色呈現出栩栩如生的效果。本文將介紹 Pose Animator 的技術設計，以及設計師如何基於自身需求創建角色並以動畫方式呈現角色的步驟。

開源
https://github.com/yemount/pose-animator

以動畫方式呈現全身角色

Pose Animator 的總體思路是採用 2D 矢量圖並根據 PoseNet 和 FaceMesh 的識別結果實時更新其矢量曲線。爲此，Pose Animator 借鑑了計算機圖形技術中骨骼動畫的思路，並將其應用於矢量角色。

在骨骼動畫中，角色的呈現分爲兩個部分：

用於勾勒角色的表皮，以及
用於對錶皮進行動畫處理的一組互連骨骼層級結構。

在 Pose Animator 中，表皮由輸入 SVG 文件中的 2D 矢量路徑定義。對於骨骼結構，Pose Animator 基於 PoseNet 和 FaceMesh 的關鍵點提供了預定義的（骨骼層級）綁定表示 (Rig Representation)。在輸入 SVG 文件中以及字符插圖中指定了此骨骼結構的初始姿態，同時通過機器學習模型的識別結果來實時更新骨骼位置。

來自 PoseNet（藍色）和 FaceMesh（紅色）的關鍵監測點

查看這些步驟，嘗試使用 Pose Animator 創建自己的 SVG 角色。

這些步驟
https://github.com/yemount/pose-animator#animate-your-own-design

由 PoseNet 和 FaceMesh 輸出控制的動畫方式的貝塞爾曲線

綁定流程概覽

完整的綁定（骨架綁定）流程需要以下步驟：

解析輸入的 SVG 文件以獲取矢量圖和預定義的骨架，兩者均爲 T 姿態（初始姿態）。
遍歷矢量路徑中的每個分段，使用線性混合蒙皮（Linear Blend Skinning，本文中稍後會作出解釋）計算每根骨骼的權重影響和變換矩陣 (Transformation)。
在每個輸入幀上實時運行 FaceMesh 和 PoseNet，並使用結果關鍵點更新骨骼位置。
根據更新後骨骼的位置、骨骼的權重和變換矩陣，計算矢量分段的新位置。

還有其他工具也可提供類似的木偶操作功能，但是，大多數工具僅改變人物圖像的位置，而不會通過識別關鍵點改變角色的實際幾何形狀。此外，很少有工具能提供全身識別和動畫呈現。Pose Animator 能讓單條曲線變形，因此十分擅長捕捉面部和全身運動的細微之處，並有望帶來更具表現力的動畫效果。

綁定定義

綁定結構依照 PoseNet 和 FaceMesh 的輸出關鍵點設計。PoseNet 將返回 17 個全身關鍵點，非常簡單，可以直接包含在綁定中。但是，FaceMesh 將提供 486 個關鍵點，所以我需要謹慎選擇將包括哪些關鍵點。最後，我從 FaceMesh 輸出中選擇了 73 個關鍵點，這樣我們就擁有了一個由 90 個關鍵點和 78 根骨骼組成的全身綁定，如下所示：

90 個關鍵點，78 根骨骼的全身綁定

每個輸入 SVG 文件都應該在默認位置包含這個骨架。更具體地說，Pose Animator 將尋找一個名爲“骨骼”的組，其中包含以它們所代表的各個關節命名的錨點元素。可在此處查看綁定 SVG 示例。設計師可以在設計文件中自由地移動關節，讓骨骼最理想地嵌入到角色中。Pose Animator 將根據 SVG 文件中的默認位置來計算蒙皮，但有時綁定算法可能無法很好地支持一些極端情況（例如，腿/手臂骨骼非常短），並有可能讓呈現的效果不自然。

此處
https://firebasestorage.googleapis.com/v0/b/pose-animator-demo.appspot.com/o/skeleton.svg?alt=media

在設計軟件 (Adobe Illustrator) 中嵌入綁定的插圖

用於矢量路徑的線性混合蒙皮

Pose Animator 通過一種最常用的綁定算法，使用骨骼結構讓表皮變形，這種算法稱爲線性混合蒙皮 (Linear Blend Skinning，LBS)，該算法通過將每根骨骼單獨控制的變換相混合，再由每根骨骼的影響因子加權，來變換表皮的頂點。在我們的例子中，頂點是指矢量路徑上的錨點，骨骼由上述綁定中的兩個相連關鍵點定義（例如，“leftWrist”和“leftElbow”關鍵點定義了骨骼“leftWrist-leftElbow”）。

要代入數學公式，那麼頂點 vi’ 的實際空間位置計算爲：

其中

wi 是骨骼 i 在頂點 i 上的影響因子，
v -i 描述了頂點 i 的初始位置，
Tj 描述了讓骨骼 j 的初始姿態與其當前姿態相一致的空間變換。

骨骼的影響因子可自動生成，也可以通過權重繪製來手動分配。Pose Animator 當前僅支持自動權重分配。頂點 i 上骨骼 j 的原始影響因子計算方式如下：

其中 d 是從 vi 到骨骼 j 上最近點的距離。最後，我們將一個頂點上所有骨骼的權重標準化，使其總和爲 1。

現在，要將 LBS 應用於由直線和貝塞爾曲線組成的 2D 矢量路徑，我們需要通過進出圖柄對貝塞爾曲線分段進行一些特殊處理。我們需要分別計算曲線點、進控制點和出控制點的權重。由於這樣可以更精準地捕獲控制點的骨骼影響因子，因此會產生更好的外觀效果。

這是一個特殊的例子。當進控制點、曲線點和出控制點共線時，我們對這三個點同時使用曲線點權重，以確保在以動畫方式呈現時它們仍保持共線。這有助於保持曲線的平滑。

共線曲線手柄共享相同的權重以保持共線

動作穩定性

LBS 已經爲我們提供了動畫幀，但是 FaceMesh 和 PoseNet 原始輸出引入了明顯的抖動。爲減少抖動，獲得更流暢的動畫，我們可以使用預測結果中的信任值分數對每個輸入幀進行不均勻加權，讓信任值較低的幀所帶來的影響也較小。

遵循這一思路，Pose Animator 會按如下算式計算關節 i 在第 t 幀的平滑位置

其中

第 i 幀的平滑可信度計算方式如下

考慮極端情況。當兩個連續幀的可信度均爲 1 時，位置將以 50% 的速度靠近最新位置，這看起來很靈敏且相當平滑。（要進一步提高響應速度，可以通過更改最新幀的權重來調整靠近速度。）當最新幀的置信度爲 0 時，其影響將被完全忽略，因此可防止低信任值結果造成的突然抖動。

基於可信度的剪裁

除了使用可信度對關節位置進行插值外，我們還引入了最小閾值來確定是否應該繪製路徑。

路徑的可信度是其分段點的平均可信度得分，而反過來它又是影響骨骼分數的加權平均值。當特定幀的分數低於特定閾值時，整個路徑將被隱藏。

這對於隱藏低信任值區域的路徑十分有用，這些區域中往往是鏡頭範圍之外的身體部位。想象一下有一張上半身照：儘管腿部和臀部的關鍵點預測的可信度很低，但 PoseNet 始終會返回這些關鍵點預測。通過這種限制機制，我們可以確保下半身被恰當隱藏，而不顯示爲異常扭曲的路徑。

展望未來

是否要網格化

目前的綁定算法主要圍繞 2D 曲線。這是因爲由 PoseNet 和 FaceMesh 構造的 2D 綁定運動範圍較大，且骨骼長度可變，不像遊戲中的動畫一樣，骨骼長度相對固定。目前，讓貝塞爾曲線變形所得出的結果比讓輸入路徑中的三角網格變形得出的結果更加平滑，因爲貝塞爾曲線可以更好地保持輸入線條的曲率/直度。

我很想改進網格的綁定算法。此外，我想探索一種比線性混合蒙皮更先進的綁定算法，因爲線性混合蒙皮存在一定限制，如彎曲區域周圍的體積減小。

新的編輯功能

Pose Animator 授權設計軟件（如 Illustrator）進行插圖編輯，這些軟件功能強大，可編輯矢量圖形，但不適用於動畫/蒙皮要求。我想通過瀏覽器內的界面支持更多動畫功能，包括：