本文經AI新媒體量子位（公眾號ID:QbitAI）授權轉載，轉載請聯系出處。

畫一只貍（jian）克（shang），并讓它拍攝一個「催款」的特寫，需要幾步？

只需要給貍克安上骨架，再把導出的SVG文件拖進瀏覽器里，就齊活兒了。

就像這樣，你對著鏡頭怎么動，貍克就怎么動：

這個TensorFlow.js項目名叫Pose Animator，Demo一上線，網友們已經玩嗨了。

比如Julia Jaskólska這位設計師小姐姐，就讓自己的舞蹈跟自己的插畫作品完美融合了起來：

既鍛煉了身體，又開發了新的創作可能性。

她歡快地評論道：

萬萬沒想到，讓我的插畫動起來竟然這么簡單！

實現細節

所以，插畫是如何動起來的呢？

作者介紹，Pose Animator是基于PoseNet和FaceMesh這兩個TensorFlow.js模型的識別結果，來對2D矢量圖及其骨架進行實時動畫處理的。

其中，借鑒了計算機圖形學中骨骼動畫的思想，并將其應用于矢量字符。

在骨骼動畫中，一個角色由兩部分組成。

其一是用于繪制模型的蒙皮，其二是控制動作的關鍵——骨架。

在Pose Animator中，蒙皮由輸入SVG文件中的2D矢量路徑定義。

并且，Pose Animator提供了基于PoseNet和FaceMesh設計的、預設好的骨骼層次結構表示。

骨架結構的初始姿勢由用戶在輸入的SVG文件中指定。

而其后實時的骨骼位置，則根據機器學習模型的識別結果進行更新。

目前，作者已經推出兩個網頁Demo。

一個能根據你鏡頭實時捕捉到的畫面，讓2D圖像動起來。

另一個則針對靜態圖像。

所以，如果你感興趣，就可以在電腦端的Chrome和iOS Safari這兩個瀏覽器里玩起來啦。

另外，在安卓手機上的Chrome上，量子位親測可用。

中國程序媛出品

Pose Animator的作者，是谷歌創意技術專家Shan Huang。

[[325571]]

Shan Huang本科畢業于卡內基梅隆大學，專業是計算機科學，輔修人機交互。2014年加入谷歌（上海）。

當年火爆全網的猜畫小歌項目，就是她發起的項目。

傳送門

GitHub項目：https://github.com/yemount/pose-animator

鏡頭捕捉版Demo：https://pose-animator-demo.firebaseapp.com/camera.html

圖片版Demo：https://pose-animator-demo.firebaseapp.com/static_image.html