在 2020 年 3月尾的時候，我向內部其他幫忙開發 ArOZ Online Beta 系統的工程師（Programmer / 程式員 / 開發者）宣布 ArOZ Online 系統將會停止支援 PHP 。你可能會問：為甚麼要終止支援 PHP？ 這系統的核心不是一向也是由 php 開發的嗎？ Apache + PHP 是一個好用而且適合大型系統開發的程式語言 開始開發 ArOZ Online Beta 版時，在選擇到底應該選擇使用 PHP 或是 Nodejs 開發 ArOZ Online 系統。當時在網上也找到不少意見是說如果要開發大型系統， php 的 project structure （項目結構）的確是會比較適合。再之後，我亦在網上找到了一篇講述為甚麼 Nodejs 不適合開發大型系統的文章，讓這個想法得以確實。然而，這問題仍然比我想像中的複雜，我直接跳到結論來看： PHP 是適合開發 靜態 大型系統 甚麼是靜態系統？一般常見的 CMS、BMS 如 warehouse management system （倉庫管理系統）， Learning management system （學習管理系統）等。這些系統不需要太大量的即時互動性，資料只需要在頁面載入的一刻提供就可以了，不必要即時對頁面更新。 PHP 的設計本來就是這個用途，而一開始 ArOZ Online 系統也是只提供這個簡單的用途： 在頁面載入的時候提供一個音樂 / 影片列表當用戶點擊媒體之後，JavaScript 把該媒體載入（用 Apache modXSendFile）播放 這個設計在 ArOZ Online Alpha 跟 Beta 初階段也沒甚麼問題，畢竟就只是一個簡單的影片網頁而已。 當 PHP 遇上網頁桌面系統 到了 ArOZ Online Beta 開發的中期，Virtual Desktop Mode （虛擬 / 網頁桌面模式）被開發出來了。由於桌面的互動性設計（例如使用者拉動桌面上的圖示之類的），客戶端對伺服器的請求數目多了很多，由原本只是使用者有按按鈕才會做一次 request 變成了每 5 秒做一次請求，看看有沒有桌面圖示或是檔案變動。如果你在 ArOZ Online Beta 的桌面模式打開 Developer Console，你將會看到以下一大堆的 Ajax Request。當然，這種 request 方法完全說不同是 best practice。 桌面模式下超多次的 AJAX Request 在 Windows 的工作管理員明顯能看到每次 AJAX Request 時的 CPU 負載尖端（Load Spike） 然而，桌面的難題還是透過不斷 request 來算是暫時解決了。可是真正讓我發現 PHP 真的不夠用的部分是 File Explorer （檔案管理員）的部分。 PHP 與 檔案管理員 — 一種語言的極限 對，就是因為要開發一個基於 PHP 的檔案管理員，就把 PHP 這個語言推到了它的能力極限。 ArOZ Online Beta 下使用 PHP 開發的檔案管理員 這個工作管理員一開始是使用 100% 純 PHP 開發而成。但是如果你對 PHP + Apache 有一點的開發經驗，你就會知道一個 PHP 在處理的時候是會把另一個 PHP request 卡住。即是說，伺服器每次只能處理一個 request。當你把這個 request 用作處理 file operation 如 檔案移動、複制等等，如果檔案是比較小的還好，但是如影片檔案（1 - 2GB）一個的話，你整個伺服器就卡住了。 就是在這個時候我發現了 Golang 就是這個時候，我學會了基本的 Golang。這個時候我為 ArOZ Online 的 File Explorer 開發了三大系統： fsexec / fszip / fsconv…

最近在幫伺服器由 php 7.0 升級到 php 7.4.4，然而在升級 wordpress 的時候出現了無法連接到資料庫的問題，於是簡單的從網上找到了一個測試資料庫的 php script，發現原來不是 wordpress 的問題，是 MySQL 的問題。 $DBServer = 'localhost'; $DBUser = 'username'; $DBPass = 'password'; $DBName = 'wordpress'; $link= new mysqli($DBServer, $DBUser, $DBPass); if(!$link) echo "失敗!"; else echo "成功!"; 錯誤 解決方法：在 localhost 後面加上 :3307 結果在網上找了一整天也找不到能處理的解決方法，於是在想會不會是 port 設定的問題呢？於是在 localhost 後加上了 :3307 $DBServer = 'localhost:3307'; 然後居然就 fix 好了！？ 不過話說，在 Fix 這個 bug 的時候整個網頁伺服器上的服務都不能用，除了其中一個完全不依賴 Database 的服務，我想我不用說你也已經猜到了： ArOZ Online 系統！這套系統在 PHP Extension 一個都沒開 + MySQL 完全 offline 的情況下也能繼續正常運作還真的是滿壯觀的。 升級途中居然對 ArOZ 系統一點影響都沒有，還能夠一邊聽音樂一邊升級 就是這樣，伺服器就有驚無險地升級上 PHP7.4.4 囉！ P.S. 有人問邊到睇到 MySQL 個 port你可以係 WAMP 個 menu 下面找 MySQL → Port used by MySQL: 3307

說到 ArOZ Online 系統，很多人看完 README 會覺得它又是一套普通的 NAS 作業系統。如果我要自己組 NAS 的話那我用 OwnCloud 或是 OpenMediaVault 就好，幹麼要用一套這麼新，沒幾個使用者的系統來放我重要的資料呢？ ArOZ Online 的網頁桌面環境 對，如果你要 NAS 作業系統你不應該選擇 ArOZ Online 系統 ArOZ Online 系統從來也沒向過檔案儲存的方向發展。這是一個顯然易見的答案。ArOZ Online 系統缺少了幾個 NAS 作業系統必須的東西：RAID 管理器跟磁碟管理工具。這兩項日後可能會被太有空的工程師給加進去，但是在目前階段我們是沒有打算向這方向發展的。 再者，市面上除了開源的 OwnCloud, OneCloud, OpenMediaVault 之類的方案外，也有需要購買特定硬件的 QNAP 跟 Synology DSM，而且更不用說大家熟悉的雲儲存方案了，Google Drive，Dropbox ，MediaFire 甚麼的要多少有多少。相比之下 ArOZ Online 系統只是一個非常普通，只是到達「能用」地步的儲存系統。 用 ArOZ Online 系統代替真正的作業系統？ 那如果不向 NAS OS 的方向發展，難道 ArOZ Online 系統要代替真正的作業系統？這也是不可能的。作業系統三大家庭：Windows Mac Linux，ArOZ Online 系統也只是建基於 Debian Linux 之上，不可能說取代他們其中一員。 Google 的 Chrome OS 也曾嘗試過做類似的東西，使用 Chrome 本身作為作業系統，提供各類型的 WebApp 服務；話雖如此，Chrome OS 到現在在一般使用者（consumer level）的市佔率還是比不上 Windows 跟 Mac，這很大程度上是跟系統兼容性有關了。然而，Chrome book 之類的作為 輔助設備 （ secondary device）的用者卻大有人在，證明 Chrome OS 雖然不及 Windows 或 Mac 那樣高兼容性和高市佔率，但仍然有它的優點和使用者群。而 ArOZ Online 系統要向的方向也是類似的：特定的使用者群，而外面並沒有類近能取代它的系統。 所以，ArOZ Online 的優點是甚麼？ ArOZ Online 說到最極端它只是一個由PHP，Js，HTML5 跟 Golang 組合出來的系統，就如你所想的，就是一套網頁系統。然而，你不覺得為甚麼明明都有 PHP 了，卻多了一個 Golang 出來？他們的功能不是重複了嗎？ 對，就是這個多出來的 Golang 讓這套系統變得超級神奇。無論是功能上還是效率上。 沒錯，這個 Golang 並不是用來作為網頁伺服器，而是用來處理後台大型運算用的。 我們先從功能說起。自從 2019 年的版本中，Golang 開發的部分開始取代 php 的部分工作，系統的功能開始變多了。由 Gcode 發送器，備份組建系統等等，都是因為 Golang 的加入讓這些原本不太可能用 php 來開發的部分變得有可能。再者，Golang 可以比 PHP 接觸更底層的系統資源，做出更多你想不到的功能。之後的分散式文件系統，集群通訊協議也將會使用 Golang 進行大重寫，讓用家可以在一個界面裡就控制到好幾台使用 ArOZ Online 的裝置。 在效率上，Golang 的加入也讓系統效率更快。原本 PHP 要 Copy & Paste 一個檔案能會把整個伺服器卡上好幾分鐘，現在使用 Golang 重寫後的 fsexec （檔案系統）架構，讓 Copy & Paste 功能變成非同步功能，並可以在背景同步運行多個檔案移動指令，讓系統效率更高。另外，在 ArOZ Cluster 裡面，Golang 寫的掃描器也讓 HDS 運作率更佳，掃描速度更快。 所以說了這麼多廢話，總結來說就是 ArOZ Online 的特點是： 物聯網 / 集群連接網頁桌面環境高後台處理能力完整的檔案管理系統支援中文在地化 所以？創作者用的雲系統！ 最後，我們選擇向創作者的方向發展！ 到底是哪類型創作者？我們的目標打算放在以下三大類： 移動 / 遠端創作者數碼生產類（Digital Manufacturing）創作者ArOZ Online 模組開發者 首先是移動或遠端創作者，這一個例子就是經常個人旅行的 Youtube 創作者之，讓他們可以不用隨身攜帶這麼多儲存裝置，只要在旅途跟旅途之間的一小段時間把檔案放到伺服器 / 電腦上，之後即使是再出發了也能夠在途中對之前的影片或音源檔案進行編輯、匯出。另一個例子就是產品設計，可以使用 ArOZ Online 上的建模軟件或…

https://www.youtube.com/watch?v=eCKVFfYGJfs&feature=youtu.be 之前的 ArOZ Online 系統一直都不支援 Drag & Drop，在使用起來雖然說沒甚麼大不了，就是有一點點的不方便，好像說選擇 File 要在 File Selector 裡面做，要移動 File 不是需要使用 Menu 就是需要使用 Hotkey 如 Ctrl C + Ctrl V 之類的。 AOB 大更新，支援 Drag Drop File Object 的 File Explorer 最新版本（v 20-3-2020）之後的 AOB 將會全面支援 File Drag Drop 。這到底是甚麼意思呢？簡單來說，這就是容許 File Explorer 對其他模組或另一個 File Explorer 視窗進行基於 Drag drop 的檔案移動。例如說你要把檔案由 A File Explorer 移動到 B File Explorer，這個時候你只需要把檔案由 A 拉到 B 即可，就像 Windows 一樣完全不用煩惱設定的問題，使用起來非常的直觀。 詳細的例子你可以看上面的 Youtube 影片了解更多。

ArOZ Online 雖然表面看上去是一個 NAS 作業系統，然而它並不是。說它是 NAS 作業系統倒不如說它是一個真正能用的 Web 桌面系統還比較好？ 說實話 ArOZ Online 上面有很多不知為甚麼會出現的功能，由踩地雷到小畫家，跟 XP 的距離就只欠一個 3D彈珠台而已。而這次終於到了硬碟 SMART 檢測器了。這個是由 @alanyeung 開發的一個 ArOZ Online 系統組件，這是使用 smartctl 的多平台版本寫出來的，查詢結果在 json 化之後再經過 kernel 傳到 PHP 作顯示，雖然說上去滿簡單的東西，卻讓系統馬上變得更像 NAS 作業系統了。 SMART 檢測界面及硬碟的詳細數據 每一塊硬碟都能夠看到由 smartctl 回報的仔細的數據 這功能可以在 系統設定 > 檔案與儲存器 > 硬碟 SMART 裡面找到 就是這樣，ArOZ Online 又多了幾十 MB 的源碼了，整個系統現在包含著各種各樣的 binary 檔案現在差不多要到 780MB 了。之後在加入 Clustering 相關的代碼之後應該會更大吧？

對於想當 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 來做了。但是在那個之前，我打算先處理好基本的動作再想辦法處理像旋轉角度，手指之類的微動作。

宣傳海報 自從 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; } } 然後人類一般眨眼時間間距為…

話說有一天我發現了你可以在側欄加入自定義的 HTML 代碼，試著試著，想不到連 Javascript 也能放進去 自定義的 HTML 欄位 於是我試了一下，果然真的能執行起來。 所以之後簡單的寫了一個轉接器把 ArOZ Online 上面的雲模組轉接過來 Wordpress 界面上使用，想不到居然真的能用。 NotepadA 模組在 Wordpress 上面啟動了 AirMusic 模組同樣也能在 Wordpress 界面上播放 果然 ArOZ Online 模組去到哪裡都能用真是有夠方便欸