谷歌小姐姐開源姿勢動畫師項目,只需一張SVG圖片便可配置

2020-12-24 騰訊網

梅寧航 發自 凹非寺

量子位 報導 | 公眾號 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,居住於上海,現任職於谷歌。

簡介為程式設計師和藝術家,也是很有意思了。

工程師、藝術家,有創造力的技術工程師,多重身份當得起。

因為她的代碼,證明了工程師的資格。

下面是她的藝術作品。

文理交融,遊刃有餘,獻上膝蓋。

一起來觀摩小姐姐的硬核作品吧

自己動手試試看~

相關焦點

  • 自適應寬度SVG圖文伸長動畫教程
    <img>標籤這種替換元素的一個重要特性是:當我們只設置圖片的寬度,瀏覽器會根據圖片原始寬高比自動計算出圖片的高度來顯示;同樣,當我們只設置圖片的高度,圖片的寬度會等比例縮放顯示。我們來做一個實驗,將一張1000×1080的圖片的寬度設置為200%,看看他的高度會發生什麼變化。
  • [視頻]谷歌推出趣味十足的Move Mirror項目 根據姿勢反向搜圖
    谷歌最近推出了一個趣味的機器學習實驗項目,它就是可以根據用戶的姿勢,來反向搜圖的 Move Mirror 。
  • SVG動畫、CSS3動畫常用知識點全解析
    svg動畫介紹1.svg的animate標籤<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=
  • SVG之旅:SVG簡介
    柵格圖形系統中,圖像被表示為圖片元素或者像素的長方形數組。而柵格圖像的像素部分都分配有特定的位置和顏色值。每個像素的顏色信息由RGB組合或者灰度值表示。根據位深度,可將柵格圖形分為1、4、8、16、24和32位圖像等。每個像素使用的信息位數越多,可用的顏色就越多,顏色表現就越逼真,相應的數據量就越大。
  • 谷歌發布新網站:可查自家所有免費開源項目
    據科技媒體softpedia北京時間3月30日報導,谷歌發布了一個新網站,在這個網站當中,用戶可以查到谷歌多年以來研發的所有免費開源項目。谷歌公司與開源這一概念有著密切的聯繫,而谷歌也從未忘記其發展的根源。
  • Svg那些事(一):Svg格式及主流用法
    打開阿里矢量圖標庫官網http://www.iconfont.cn/,選擇項目中可能用到的所有圖標添加到購物車,統一添加至項目,然後在圖標管理中,我的項目中,點到具體的項目,就會看到我們添加的所有圖標,這樣方便我們以後對圖標進行刪除,增加和對項目的圖標進行管理。最後點擊「下載到本地」。
  • 谷歌開源 Scorecards,為開源項目安全性「打分」
    然而大部分開發者或組織在使用新的開源項目依賴時,沒有評估過對生產環境安全性的影響,當然也可能是無法評估,因為沒有任何能反映該項目安全性的數據和信息。諸如谷歌這類大型公司會為此制定相關規範,他們要求工程師在引入新的開源依賴時必須遵循相應的系統規定和流程,但這一過程往往會很繁瑣、需要手動操作且容易導致出錯。
  • 《靈籠》動畫中讓我印象深刻的8位小姐姐
    二、屍體小姐姐預告片中,軍醫小姐姐抱著的屍體,應該是軍醫小姐姐所在乎的人,年輕的臉龐,姣好的容顏,都成了過去。雖然只是背景,雖然少了一隻眼睛,但腦補一下可以看出,這顏值明顯是其他3d動畫重要角色都水平,死的不可惜嗎?
  • 宅男自製「2B小姐姐」娃娃 黑色長腿太誘惑
    「2B小姐姐」的身體多關節可以被擺放成各種姿勢,在當時娃娃展出後,受到無數的粉絲的追捧和喜歡。但可惜的是,這款娃娃並沒有公開發售,定製的也只有一個。相關新聞:尼爾2推出聯動咖啡廳活動 2B小姐姐陪你用餐不過,這可攔不住粉絲對「2B小姐姐」的追求。
  • 值得注意的開源項目:從比特幣到存儲
    支持的作業系統:Linux相關連結:https://apertus.org/axiom-beta三、容器化3.cAdvisorcAdvisor的全稱是「容器顧問」,谷歌的這個項目負責監控容器性能和資源使用情況。它可用來與Docker結合使用。
  • 一篇文章帶你了解SVG 動畫元素
    SVG <Animation> 動畫元素用於為SVG圖形製作動畫。動畫元素最初是在同步多媒體集成語言(SMIL)中定義的。在動畫中,必須指定屬性,運動,顏色,動畫的開始時間和動畫的持續時間的開始和結束值。
  • 2015 十大新興熱門開源項目盤點
    近日開源軟體平臺Black Duck公司根據Open Hub網站上的開源項目統計數據給出了近年來誕生的十大熱門開源項目TOP10榜單。Black Duck評選中使用的權重評分系統參考了開源項目的活躍度、進度等指標。通過2015年熱門開源項目排行榜,我們能了解全球開源社區的想法並預測未來趨勢。我們一起來看下:一、DebOps
  • 五大可識別圖片的人工智慧技術分析
    一大批能看懂圖片的人工智慧技術已經來到人間,下面不妨來看看機器之心的盤點:  谷歌 TensorFlow  5月份谷歌推出 Google Photos時,媒體關注的焦點是:人工智慧和圖片搜索結合後所產生的強大功能。谷歌聲稱(並且用戶也很快確認),搜尋特定某人,你會找到對方從現在到嬰兒時期的照片。搜索品種名,你就能找到相應品種狗的照片。
  • 谷歌開源 Python Fire;一張圖讀懂 Python、R 的大數據應用等 | AI...
    Python Fire 已開源,用戶可通過`pip install fire`在 PyPI 進行下載,也可以去 GitHub 查看它的原始碼。到今天,這已成為美國史上最大規模的公立機構軟體開源項目。昨晚,NASA 正式宣布了新一批對外開放的軟體目錄,包含大量 app、代碼庫和工具。當然,大部分 AI 從業者可能對其中大部分的氣象、系統測試、航空動力裝置、太空探索等領域的科研軟體不感興趣。
  • 一篇文章帶你了解SVG Javascript腳本
    通過腳本編寫,可以修改SVG元素,為其設置動畫或偵聽形狀上的滑鼠事件。當SVG嵌入HTML頁面中時,可以在JavaScript中使用SVG元素,可以使用JavaScript編寫SVG腳本。通過編寫腳本,可以修改SVG元素,設置它們的動畫,或者監聽形狀上的滑鼠事件。當SVG嵌入到HTML頁面中時,可以在JavaScript中使用SVG元素,就像它們是HTML元素一樣。
  • 好萊塢與Linux基金會合作打造開源項目之家
    至頂網軟體頻道消息: 好萊塢正在加入開源運動。近日,奧斯卡的組織方——美國電影藝術與科學學院宣布已經與Linux Foundation合作,為娛樂業的開源項目打造一個家。研究發現,業內有超過80%的人在使用開源軟體製作動畫和視覺效果,此外開發人員還通過開發自定義版本已經構建了一些項目。雙方通過營造開放的協作環境,希望鼓勵企業與更廣泛的行業共享他們的軟體,基金會將依靠資金雄厚的支持者為這類項目提供資源。
  • 谷歌神器專挖爆款,快來收下這份谷歌小姐姐的冬季剁手攻略
    尤其在秋冬更迭之際,面對海量的商品信息,賣家要想找到潛在的電商爆款,付出的往往不止是時間成本…… 可誰說,擁有潛在爆款的市場洞察力就一定如此艱辛? 雨果菌對一般人可不輕易透露,谷歌 TF Girls,兩位來自谷歌的時尚圈新晉 KOL 大T和小F,利用 Trends Finder (中文譯名:爆款發現器)這個省時省力的利器,早已幫你把這個冬天安排得明明白白。
  • 【教程】SVG入門基礎筆記1.0
    SVG 意為可縮放矢量圖形(Scalable Vector Graphics),是使用 XML 來描述二維圖形和繪圖程序的語言。SVG代碼以 <svg>元素開始,包括開啟標籤<svg>和關閉標籤</svg>,這是根元素。
  • 韓國小姐姐COS《冰雪奇緣2》,一人分飾兩角,網友:真人比動畫美
    尤其是艾莎的新服裝太有仙氣範了,本來喵娘還以為要想看到冰雪奇緣2的COS可能要等上一段時間,但是沒想到動畫剛上映沒多久一位韓國的小姐姐就為我們帶來了非常完美的COS作品。最厲害的這位韓國小姐姐還一人分飾兩角,不僅COS了艾莎,就連安娜也一起COS了,說實話當喵娘看到這位韓國小姐姐的COS作品之後真的是被她的造型驚豔到了。
  • 法官小姐姐全程英文說法
    法官小姐姐全程英文說法 2019-11-20 12:11 來源:澎湃新聞·澎湃號·政務