梅寧航 發自 凹非寺
量子位 報導 | 公眾號 QbitAI
姿勢動畫師,自己做動作就可以生成矢量角色動畫。
打開攝像頭,你的姿態隨之搖擺,一道道線、一個個點,刻畫你的面部輪廓和完美身材。
△效果圖1
是不是很有趣?!
當然這個有點恐怖,把多餘的配置都去掉看看效果。
△效果圖2
姿勢動畫師項目,雖然不是TensorFlow.js官方產品,但效果依舊夠slay。
並且可直接嵌入網頁,一鍵配置開發,簡潔優雅,值得上手。
操作步驟
作者提供了兩種方式去製作姿勢動畫,一種是打開攝像頭實時生成,還有一種是上傳靜態圖像。
以攝像頭製作為例,步驟如下:
1、打開網址(見文末連結),隨後打開攝像頭,動作捕捉,進行參數配置。
△參數配置項
2、搖擺起來,男女皆可喲~
△動作捕捉實時生成
3、站起來效果更佳,站起來可以捕捉身體動作。
△身體動作姿態識別
有沒有很神奇的感覺。
作者在GitHub上發布短短一個多月,已經4.8k星。
並且上手簡易,所以大神是怎麼實現的?
技術原理
姿勢動畫師項目,作者主要使用TensorFlow.js製作。
作者主要使用兩個模型,由PoseNet和FaceMesh組合而來,前者負責姿態識別,後者負責人臉3D建模。
1、 FaceMesh面部建模
FaceMesh可以識別486個人臉標記點,從而擬合出人臉的幾何形狀,用於識別人臉實時姿態。
2、PoseNet識別身體姿勢
PoseNet可以用來估計一個身體姿態,也可以用來估計多個身體姿態。
這意味著算法可以檢測到一個圖像/視頻中的一個人,另外一個版本可以檢測到多個人的身體姿態。
在這個項目中,作者使用PoseNet來擬合人的身體姿態。
動手試試
還是以攝像頭實時生成為例,靜態圖流程大同小異
克隆項目GitHub文件夾至本地,打開項目中的skeleton文件。
並對其進行編輯,控制骨架移動參數。
你可以自行控制參數變化,編輯完成後存入工作文件夾中。
但是請注意。不要在這個組中添加、刪除或重命名circle部分,。
△依靠這些此部分來讀取控制身體姿態的初始位置
但是你可以進行移動操作,並將它們嵌入到你的插圖中,以製作不同的效果。
2、創建一個新文件,並將其命名為 「illustration」,在 「skeleton」文件的旁邊。
拉平所有子文件,使 「illustration」文件只包含路徑元素。
如果完成上述步驟,你的文件結構應該是這樣的。
3、通過控制skeleton文件中的參數,來移動關節的具體變化。
4、此時,完成製作自己的矢量姿勢圖,將其上傳到示例網站,借用網站伺服器算力製作自定義的姿勢動畫師。
作者簡介
作者Shan Huang,畢業於CMU,居住於上海,現任職於谷歌。
簡介為程式設計師和藝術家,也是很有意思了。
工程師、藝術家,有創造力的技術工程師,多重身份當得起。
因為她的代碼,證明了工程師的資格。
下面是她的藝術作品。
文理交融,遊刃有餘,獻上膝蓋。
一起來觀摩小姐姐的硬核作品吧
自己動手試試看~