打開攝像頭，2D插畫實時變動畫，中國程序媛出品，Demo在線可玩
本文經(jīng)AI新媒體量子位（公眾號ID:QbitAI）授權(quán)轉(zhuǎn)載，轉(zhuǎn)載請聯(lián)系出處。
畫一只貍（jian）克（shang），并讓它拍攝一個「催款」的特寫，需要幾步？
只需要給貍克安上骨架，再把導(dǎo)出的SVG文件拖進瀏覽器里，就齊活兒了。
就像這樣，你對著鏡頭怎么動，貍克就怎么動：
這個TensorFlow.js項目名叫Pose Animator，Demo一上線，網(wǎng)友們已經(jīng)玩嗨了。
比如Julia Jaskólska這位設(shè)計師小姐姐，就讓自己的舞蹈跟自己的插畫作品完美融合了起來：
既鍛煉了身體，又開發(fā)了新的創(chuàng)作可能性。
她歡快地評論道：
萬萬沒想到，讓我的插畫動起來竟然這么簡單！
實現(xiàn)細節(jié)
所以，插畫是如何動起來的呢？
作者介紹，Pose Animator是基于PoseNet和FaceMesh這兩個TensorFlow.js模型的識別結(jié)果，來對2D矢量圖及其骨架進行實時動畫處理的。
其中，借鑒了計算機圖形學(xué)中骨骼動畫的思想，并將其應(yīng)用于矢量字符。
在骨骼動畫中，一個角色由兩部分組成。
其一是用于繪制模型的蒙皮，其二是控制動作的關(guān)鍵——骨架。
在Pose Animator中，蒙皮由輸入SVG文件中的2D矢量路徑定義。
并且，Pose Animator提供了基于PoseNet和FaceMesh設(shè)計的、預(yù)設(shè)好的骨骼層次結(jié)構(gòu)表示。
骨架結(jié)構(gòu)的初始姿勢由用戶在輸入的SVG文件中指定。
而其后實時的骨骼位置，則根據(jù)機器學(xué)習(xí)模型的識別結(jié)果進行更新。
目前，作者已經(jīng)推出兩個網(wǎng)頁Demo。
一個能根據(jù)你鏡頭實時捕捉到的畫面，讓2D圖像動起來。
另一個則針對靜態(tài)圖像。
所以，如果你感興趣，就可以在電腦端的Chrome和iOS Safari這兩個瀏覽器里玩起來啦。
另外，在安卓手機上的Chrome上，量子位親測可用。
中國程序媛出品
Pose Animator的作者，是谷歌創(chuàng)意技術(shù)專家Shan Huang。
Shan Huang本科畢業(yè)于卡內(nèi)基梅隆大學(xué)，專業(yè)是計算機科學(xué)，輔修人機交互。2014年加入谷歌（上海）。
當(dāng)年火爆全網(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
