對於想當 Vtuber 的人來說，不一定每個人都會設計自己的人物。 Open Vtuber Studio 裡面使用的是 VRM 模型，而 VRM 本身就是一種開源的 3D人物模型格式，所以創作工具也有不少。而在這篇文章裡我會界紹兩個比較簡單的人物生成器。 VRoid Studio https://vroid.com/en/studio/ VRoid Studio 是由著名網站 Pixiv 推出的 3D人物產生器，也是 OVS 系統內使用的測試模型的產生器。使用方法簡單，直接，即使像編者這樣不會繪畫的軟件工程師來說也能用它輕易的設計屬於自己的人物。 VRoid Studio 界面 而設計完成之後可以把模型匯出成 VRM 模型，並透過一些開源軟件如 VRM Viewer 來檢查模型的完整度。 模型在 VRM Viewer 下的預覽 CHARAT https://charat.me/ 而如果你是在用基於 Live2D 的系統，你需要的或許是一個 2D 的模型（應該說是 向量圖型，Vector Graphic 吧？）這個時候 CHART 就能幫上忙了。然而，它只能匯出 png，要匯出 svg 就需要一點技術。 人物設計界面 首先，你要先設計好你的人物，然後不要點選匯出（Finish），而是按 F12進入 Developer Mode，找到 id=" chaSvgSave " 的一個 div 可以使用瀏覽器的 Search 功能找到該 div 之後右鍵 --> 選擇編輯 HTML 全選裡面的 svg 內容，複制並貼上到一個空白的文件，並把它另存為 {filename}.svg 由於這部分缺少 svg 所需的檔頭，所以你要先把檔案拉進 Adobe Illustrator，讓它修複好檔案再進行另存新檔。 如果有需要的話也可進行續層匯出 就是這樣，你的 2D 人物設計就完成了。 2D 的角色跟 3D 的角色，如果你要成為 Vtuber 你又會選擇哪一個呢？

要讓身體動起來一點都不簡單 身體姿態捕捉 說實話，身體姿態捕捉算是其中一個最麻煩的部分。外面的系統有不少的方法可用於捕捉身體姿勢，好像說 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 動作捕捉的技術。 大致系統原理圖 那既然系統設計出來了，那就可以開始進行實驗了。之後就請等待下一篇與編程相關的文章更新吧！