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