本文經(jīng)AI新媒體量子位（公眾號ID:QbitAI）授權(quán)轉(zhuǎn)載，轉(zhuǎn)載請聯(lián)系出處。

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

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

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

這個TensorFlow.js項目名叫Pose Animator，Demo一上線，網(wǎng)友們已經(jīng)玩嗨了。

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

既鍛煉了身體，又開發(fā)了新的創(chuàng)作可能性。

她歡快地評論道：

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

實現(xiàn)細節(jié)

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

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

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

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

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

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

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

骨架結(jié)構(gòu)的初始姿勢由用戶在輸入的SVG文件中指定。

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

目前，作者已經(jīng)推出兩個網(wǎng)頁Demo。

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

另一個則針對靜態(tài)圖像。

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

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

中國程序媛出品

Pose Animator的作者，是谷歌創(chuàng)意技術(shù)專家Shan Huang。

[[325571]]

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

當年火爆全網(wǎng)的猜畫小歌項目，就是她發(fā)起的項目。

傳送門

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