開啟攝像頭，2D插畫實時變動畫，中國程式媛出品，Demo線上可玩

什麼是向量動畫

魚羊 發自 凹非寺

量子位 報道 | 公眾號 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。

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

— 完 —

量子位 QbitAI · 頭條號簽約作者

關注我們，第一時間獲知前沿科技動態