要讓身體動起來一點都不簡單 身體姿態捕捉 說實話，身體姿態捕捉算是其中一個最麻煩的部分。外面的系統有不少的方法可用於捕捉身體姿勢，好像說 Vive 的 Sense SDK ，KinectToVR 之類的，然而大部分都需要特定的硬件如 HTC Vive，Kinect 或後繼型號如 RealSense 等等的。對於開源系統來說是能用，但是不夠完美，畢竟有一部分的東西還是有專利保護或屬於一家商業機構的（如 Kinect 的 API）。 所以在這系統中，我偏向使用 Webcam 來進行捕捉，在這篇文章裡，我主要會跟你分享使用單個 Webcam 對動作進行捕捉的想法。 為甚麼只用一個鏡頭？ 當然如果可以的話 3 個鏡頭一定會比較好（畢竟你要捕捉到完整的 3D 影像，兩個鏡頭是必須的，第三個是用於正面和表情捕捉），然而，如果一個都能做到 3D 捕捉的效果不會更便宜更方便嗎？ PoseNet https://github.com/tensorflow/tfjs-models/tree/master/posenet poseNet 是一個在 browser 上捕捉身體姿態的神經網絡，它能捕捉身體骨幹位置於攝影平面上的位置，並即時回傳到另一個 function 裡面。這東西的好處就是使用起來超級方便，而缺點就是會讓 GPU 著火（對 GPU 運算能力需求超級的高）。 使用 2D 影像預測手部 3D 動作的想法 如果以 Vtuber 這個例子來說，手部一般都只會出現在鏡頭正面，而甚少出現在後面。因此在理論上，只要我們取得上手臂跟下手臂的長度，我們就能透過計算球型路徑來取得手部的 3D 位置，並自動移除其負值的答案。 計算原理圖，先假設肩膀的位置是 0,0,0 點（origin） 手部對應的骨架位置（pt1, pt2 及 pt3） 這不行欸。為甚麼？不知道。 對，最後把上面的運算式掉進去測試了，就不知道為甚麼不能用。不是手在亂轉就是根本捕捉不到手的 3D位置。所以最後在打算放棄，換回去 3 鏡頭系統的時候想到了一個新的運算方式： 其實不用這麼複雜，我們只看手跟肩膀的距離就好 這裡的數學模型相信大家都學過，就是球體中心到球體表面任何一點的距離都是一樣的，但是如果你在正面看上去距離比較短，那就是代表有部分「長度」被轉換成「距離」，因此有錯覺看上去比較短而已。使用這原理，我們可以大約估算到手跟身體的距離差距。 結果？她動了。 最後手臂就能動了 最後手臂的部分就能動了。然而，這也有一個問題，那就是手臂的旋轉狀態我們仍然是不知道的。如果真的要量度到那個準確度的話，看來我們只能轉用加速度傳感器 + Arduino 來做了。但是在那個之前，我打算先處理好基本的動作再想辦法處理像旋轉角度，手指之類的微動作。

Open Vtuber Studio 先暫定在 2021 年始春公開好了。 由頭部開始 由於很多現時的 Vtuber 並不能像四大天王那樣投入這麼多錢到全身追蹤的 捕捉技術，所以很大部分現在的 Vtuber 都只是依賴臉部表情捕捉 + 手動更改臉部表情而成的半 3D Vtuber 系統。當然，這種東西要做的話很簡單，隨便買一個 Face Tracking 的 SDK 來用就好。然而，基於開源計劃的原則，這方法行不通。這個時候我們就要自已幹一套出來了。 Face-api.js https://github.com/justadudewhohacks/face-api.js/ FaceAPI.js 是一個使用 Neural Network （神經網絡）而編寫的臉部捕捉 API。話雖如此，它卻內置了很多不同的 Network Model （模型）來做同一件事情。而在這個開源計劃中我看上了這個功能：Face Landmark Detection 原圖：https://github.com/justadudewhohacks/face-api.js/ 動態捕捉及 VRM 模型動作 映射演算法 簡單來說，這功能把捕捉到的臉部一些重要的點找出來，之後我們便可以對這些點進行後處理。當然，這模型只會回傳平面的位置或（x, y）值，因此，我們需要把它轉成 3D 位置，這就需要一點演算法了。 首先，我們先看看 FaceLandmarks68 模型的回傳值 然後對比一下臉部移動的時候的捕捉位置，我們很容易會發現幾個特點 第 1點跟第 17點之間的距離除了前後移動之外基本上不會改變第 1點跟第 9點之間的垂直距離會跟據你頭部上下望而產生線性變化第在第 3跟 15點間畫一條直線，在頭部旋轉的時候第 31點會按比例的在這條直線上滑動 就是這樣，基本上我們就能確定怎樣判斷頭部移動和旋轉的方向了。我們在取得比較點在最高及最低值的位置之後把其 歸一化 (Normalize)，就能得出頭部的 變換/旋轉矩陣 (Transformation / Rotation Matrix)。 向上向下看的計算方式 向左向右看的計算方式 向左傾跟向右傾的計算方法 所牌結合上述多個計算方法，頭部的 3D移動及旋轉就被計算出來了。根據捕捉到的頭部動態，使 VRM 模型的頭部骨架也跟隨著移動，最後便形成以下的效果。 結合三軸演算法之後的頭部運動 自動眨眼 以 FaceAPI 的準確率來說要檢測到貶眼實在不太可能了。所以這裡就使用了自動眨眼功能。然而你可能想，這要寫應該不難吧？就這樣加個 setInterval() 就好了？不，你太少看 VRM 的麻煩程度了。我這裡給大家看一下只是控制一個 VRM 模型眨眼的部分 function createEyeBlinkBlendValueFromCycle(s){ //Eclipse time to sin function const scaleRatio = 2; const eyeCloseIntervalScale = 0.18; if (eyeBlinking){ if (eyeBlinkingTimer[0] == 0){ //Start to blink eyeBlinkingTimer[0] = s; return 0; }else{ //Blinking in progress eyeBlinkingTimer[1] += s - eyeBlinkingTimer[0] eyeBlinkingTimer[0] = s; } s = Math.sin( Math.PI * eyeBlinkingTimer[1] * scaleRatio); s = s * 3; var baseFormula = Math.min(s, 1); //console.log([baseFormula,s, eyeBlinkingTimer[1]]); if (baseFormula < 0){ eyeBlinking = false; eyeBlinkingTimer = [0,0]; }else if (s > 1){ //Eye closed. Give it a blink interval skip eyeBlinkingTimer[1] += eyeCloseIntervalScale; } return baseFormula; }else{ return 0; } } 然後人類一般眨眼時間間距為…

https://www.youtube.com/watch?v=REgILR5SThs 相信不少人已經知道甚麼是 Vtuber 或 Virtual Youtuber，這裡就不詳細介紹了。在這話題上應該有不少人對這新興的行業有不少的評論或見解，然而在這篇文章裡，我們先不要談到底這是不是一種好的文化或是對市場有甚麼影響，我要討論的主要是技術上的問題和系統構思。 Vtuber 跟 VR Gaming 有甚麼關系？ Vtuber 的運作原理一般都可以簡單分成三個部分 動作輸入（如 HTC Vive 的 3D 追蹤技術，使用 Webcam 的神經網絡身體姿勢捕捉等）動作處理（就是把輸入的數據轉成模型可讀取的姿態信息，一般會碰及到 3D Matrix Transformation / Quaternion rotation 等等複雜的數學；通常使用 Unity 3D 作為引擎配合 UniVRM 插件使用）動作輸出 （把捕捉到的動作顯示到 3D模型上，一般使用 VRM / MMD 模型） 然後你有留意到嗎？ 這根本就是跟 VR 遊戲所需要的裝備差不多啊。所以說，Vtuber 技術其實跟 VR 遊戲開發是沒甚麼差別的，就只是省卻了遊戲故事線開發的部分。 所以現在外面的 Vtuber 拍攝軟件有甚麼問題？ 先從要付錢的說起好了。問題就是：要付錢（這應該沒甚麼好爭議的吧？我舉一個例子，Live2D + Facerig 系統，你需要先購買 Live2D，設計好自己的人物再購買 Facerig 系統作臉部追蹤，如果你只是想試著玩玩看的話也要先花費好一筆前置資金。 再看看開源的方案，現在市場上的不是只有很低的完成度就是需要好幾套不同的系統 / SDK 使用膠水把它們黏起來做成的。在真正開到 Rendering UI 之前你就要先經過好幾十處的技術難關。再者更不用說 Live2D 或 Unity 商業用的收費跟限制之類的了。 https://www.youtube.com/watch?v=Xo774VpWASE 提及的開源 Vtuber 動作捕捉方案 https://github.com/kwea123/OpenVTuberProject 提及的 Open Vtuber Project 方案 所以，我想開發一套不依賴 Unity + VR Headset 的方案 Open Vtuber Studio 裡面有個技術上的關鍵點是我想測試看看的，包括有最新的人型 3D 模型格式 VRM ，臉部辨識 API 跟 poseNet 身體姿態捕捉用的 Neural Network。而系統的完成條件列出來大約這樣： 不使用 Unity 及 Live2D 等非開源 / 要付費的商用渲染方案完整整合，不需要同時開幾個程式然後中間用膠水語言連接起來無需安裝，盡量做到 Portable + Lightweight不需要特別設計或指定品牌之電腦硬體，就算需要硬體也必須是輕易能在市場上買到，而且價錢不貴的 結論 就這個條件之下，整個系統架構就明確起來了。首先我們需要使用 Webcam 輸入影像，使用 HTML5 的 canvas 把影像複制，給予 face-api.js 跟 poseNet （Tensorflow.js）處理，最後結合 Three.js + ThreeVRM 3D渲染 工具來做到類似 Vtuber 動作捕捉的技術。 大致系統原理圖 那既然系統設計出來了，那就可以開始進行實驗了。之後就請等待下一篇與編程相關的文章更新吧！