宣傳海報 自從 2016 年開發 ArOZ Online 系統之後就不斷有人跟我說這系統的價值和用途，當然這也是各有各的說法，從商業管理系統，多媒體創作平台，個人醫療管理到網絡硬碟等都有人提出過。當然，這對我來說是很榮幸的事情，畢竟這麼多人提出這麼多個用途，即是說這系統已經具有多周途的特點，可以隨個人需要而更改上面安裝的模塊以配合自己的需求。 現有的 ArOZ Online 版本 自這篇文章開始寫的今天開始計算，之前發佈的版本主要有以下幾個： 版本號代號發佈類型< dev-1.1.4Aloplex內部測試版< dev-1.2.8 Sempervivum Tectorum 內部測試版 1.0aCloud穩定版1.1aCloud - Oryza Sativa 內部測試版 1.2aCloud - Bombax Ceiba內部測試版 所以，如果要開源的話有兩個方向是可行的 使用獨立發行版本開源 使用獨立版本發行，即是說之後的 ArOZ Online 會分為兩個版本：1. ArOZ Online LTS (Long Term Support)2. Open ArOZ Online 這裡的好處就是我們可以透過 Long Term Support 的版本確保資金來源，再者確保開發進度和方向，然而不好的部分當然就是要分開兩個版本發行，由於系統組建不一樣，就結論來說組建的時候也會有很多問題，而且由 Open Source Community 提出的更改也很難直接進到主要的源碼庫，最後導致難以創造一個新的開源社群。 使用模組化方式開源 使用模組化開源的方式就比較特別，而且也應該比較少 Open Source Project 會使用這做法，畢竟這很容易導致版本不兼容的問題，但是我還是在這裡說一下這種開源方式的原理 模組開源方案 這種設計比較像 RedHat 之類的商業用 Linux 方案，然而要維護一點都不容易，再者，要實現這種開源的模組化設計還需要以下幾個系統功能： 模組安裝器（使用 Git 倉庫的 URL 來安裝）自動更新模組，用作更新 Open ArOZ Online 的基層架構開源模組的安裝需求及版本控制器（有點像 npm 的東西？） 所以，就現在的開發進度來說這種開源方式還是未能實現的。 結論 就開原模式來說的確使用模組化開源方案是比較合適的。然而，這會需要加入新的系統架構來作支援。看來在整個開源生態圈成熟之前還是只能用第一種方案：分成兩個組建的方式來開源會比較方便和符合成本效益了。

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 動作捕捉的技術。 大致系統原理圖 那既然系統設計出來了，那就可以開始進行實驗了。之後就請等待下一篇與編程相關的文章更新吧！