宣傳海報 自從 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 模組去到哪裡都能用真是有夠方便欸

這甚麼爛東西，為甚麼要把一般的檔名全部編碼起來？那我用 Samba 的時候怎樣知道這個檔案是甚麼檔案？某 Beta 測試用家 沒錯，這一篇文章就是用來介紹到底為甚麼 ArOZ Online 要使用一個這麼麻煩的編碼方法來儲存檔案名稱及資料夾名稱。先由結論說起：這一切都是 Windows 的錯！ 在這裡我先解釋一下甚麼是 UMFilename 跟 HexFoldername。這兩個是 ArOZ Online 用來給檔案及資料夾名稱編碼的方法，簡單來說就是把檔案名字使用 "inith" + bin2hex(原檔名) + "." + 原副檔名 和把資料夾使用 bin2hex(原資料夾名稱) 來編碼的一個神奇儲存方法。一般如果你在用 ArOZ Online 的檔案管理員你會看到有一些使用者自行上載的檔案會出現 綠色 或 藍色 底色的，那就是經編碼後的資料名稱。 HexFoldername 在 File Explorer 上顯示為綠色 UMFilename 在 File Explorer 上顯示為 藍色 故事起源： ArOZ Online Alpha ArOZ Online Alpha 是一套使用 PHP 5 編寫的影音串流系統，本來是用於 Windows + WAMP 的網頁伺服器架構上。而開發者我使用的 Windows 7 本身是 Big-5 編碼的，因此對中文的支援是完全 OK 的，但是我除了中文音樂之外也有聽日文的音樂，而問題就出在了這裡： PHP5 在讀取日文檔案名稱的時候出現亂碼。 ArOZ Online Alpha 的音樂播放界面 對於這個問題，基本上一般人想到的就只有這幾個解決方案： 把伺服器重灌，裝個 Unicode 版的 Windows 或者使用 Linux使用 Linux VM 並在 VM 裡面運行系統把檔案名稱全部放到 Database 裡，然後根據檔案路徑找到 Unicode 編碼的檔案名字。 然而，由於這套系統的無 DB 特性，第 3 點就不能用了；第 1, 2 點也太麻煩了完全不附合成本效益，所以最後的解決方法是：上載的時候使用 PHP 把檔名編碼成一個只使用 ASCII 的字串，然後以編碼字串來儲存，要讀取的時候從系統讀取檔名然後解碼出原本的檔名就好了。 可是，另一個問題就出現了。如果檔案名字本身就是以我編碼的方式儲存怎辦？例子： 音樂.mp3 -> abc.mp3 然後又剛好出現一個 abc.mp3？所以就乾脆直接在編碼後的檔案名字前加上 "inith" （Initiate with Hex Value），用以分辨是我方編碼的還是原本已經編碼的檔案，就是這樣，這種 UMFilename 的初型就出現了。 那為甚麼這種編碼方式叫做 UMFilename？ 在剛開發 ArOZ Online Beta 的時候，最基礎的模組只有 Audio，Video 跟 Photo。基本上就是用以代替 ArOZ Online Alpha 的基本功能。 然而，這三個模組都需要上載功能，而由於 ArOZ Online Beta 的模組化設計原則，一個新的模塊被設計了出來： Upload Manager。 ArOZ Online Beta Audio 模組裡的 Upload Manager 界面 由於這個 Upload Manager 同樣遇上跟之前 Alpha 版本時的系統編碼問題，於是就直接把 Alpha 版的檔案名編碼方式搬過來了。而本來並沒有特別名稱的這種編碼方式也跟著這個模塊的名字改了起來，變成了 Upload Manager special File Naming Method，簡稱 UMFilename（或有人稱為 inith 命名法 或 inith filename）。 那 Hex Foldername 又是哪裡出來的？ 在 ArOZ Online Beta 檔案管理員開發中的時候，一個 Bug 出現了。由於系統內的資料夾全部都是英文，直到桌面模組出現了之後才有機會因使用者新增資料夾的關系出現中文的資料夾名稱。到了中文的部分其實還是不大問題，因為中文還可以透過 PHP 的 mbstring 解決，然而日文的資料夾名稱就無法載入了。就結果而言，資料夾的命名需要另一個特別的編碼方法。 其實到發現這個問題的時候已經是滿後期的了，之前已經發生過不少因檔案名字過長而無法開啟的情況。（因為…

說到要在 WebApp 上讓使用者選擇檔案你會怎樣設計？ 不少開發者都直接在 WebApp 裡面創建一個可以點選的列表就算數，能用但是不完美；所以在 ArOZ Online Base 系統架構裡面，我們在設計 File System 的時候就設計了一個可以輕易讓開發者使用的 檔案選擇器 ( File Selector ) 了。 ArOZ Online 系統下的 File Selector 所以，為啥我要用 FIle Selector？我自己幹一個就好了啊？ 對，你也可以自己幹一個檔案選擇器，可是系統內建的 File Selector 有幾點用起來真的滿方便的。 預設支援 UM-FILENAME 及 HEX-FOLDERNAME 由於內建的檔案選擇器內建了 UM-Filename 跟 Hex-Foldername 的轉換程式，所以寫起來不必要特別自行處理這些特別的檔案命名方式。 Hex-foldername 顯示方法 UM-Filename 顯示方法 支援新增文件或資料夾 如果你需要新增一個文件或資料夾的時候，你可能要在 WebApp 裡面多加一個 <form> 元素，之後又需要增加一個處理的 php 甚麼的不是很麻煩嗎？用系統內置的 File Selector 就能直接省略這些問題，使用 Javascript callback 來取得使用者新建的文件名或資料夾名稱及位置。 新建文件的 File Selector 界面 使用方法 一般來說我們會建議使用者使用 Float Window 模式啟用 File Selector。然而，在一般網頁模式下啟動 File Selector 也是可以的，只不過使用體驗上會感覺到有點奇怪。首先，我們先從由 Float Window Mode 啟動 File Selector 的教學開始： 在 Float Window 模式下啟動檔案選擇器 先假設我們有這麼一個 function 來接收使用者選擇的檔案 function addFileFromSelector(fileData){ result = JSON.parse(fileData); for (var i=0; i < result.length; i++){ var filename = result[i].filename; var filepath = result[i].filepath; //DO SOMETHING HERE } } 以下是功能的啟動參數 ao_module_openFileSelector(uid,callBackFunctionName, windowWidth = 1080, windowHeight = 645, allowMultiple = false, selectMode = "file", newfname = "newfile.txt", umf = true) allowMultiple : 充許選擇多個檔案selectMode : (file / folder / mix / new)，其意思為：只選擇檔案 / 只選擇資料夾 / 可選擇資料夾或檔案 / 新增文件或資料夾newfname : 新增檔案的預設名字（只在 selectMode = new 時有效）umf : 使用 UM-Filename 編碼檔案名字（只在 selectMode = new 時有效） //最基本的例子 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",undefined,undefined,true); //自定義選擇器大小 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",720,480,true); 你也可以透過 File Selector 為建立新的檔案名命，例子如下： var uid…

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

ArOZ Online 一向也被人吐槽說沒有 Database 只能用 PHP 怎樣做即時通訊的 Web APP 呢？對，這真是一個好問題。 現在處理即時資料的方法 現在的 Web Desktop 模式即時更新方式 沒錯，這可能比你想像中的還要簡單，現在在 ArOZ Online 上處理即時資料的方法就是每隔一段時間做一次 AJAX Request 問伺服器的 php script 要一次資料。簡單來說就是每一個需要即時資料的模塊裡都會出現一段類似這樣的代碼： setInterval(function(){ $.ajax({url: url, success: function(data){ doSomething(data); }}); },1000); 這有甚麼不好嗎？ 不好，這十分不好。首先， ArOZ Online 系統並沒有標準的 Database，所以 SQL 甚麼的都不能用。而且大部分模組開發者也不會這麼有空把 SQLite 塞進去，不少模塊也是直接拿 JSON 或 CSV 檔來儲存資料，就結果而言這種存取方法只會讓系統被 IO 速度卡住，想快也快不了。 所以 AOBWS 就出現了 甚麼是 aobws? aobws 就是 ArOZ Online 基礎系統的 WebSocket 伺服器。這系統有以下幾個特點： 支援 ArOZ Cluster 的 JWT 登入模式類 Minecraft 式指令模式以 Channel 分隔的 Broadcast 模式支援單用家多視窗登入 要用它的話跟一般 WebSocket 的使用方法很接近，簡單來說就是使用 ao_module 的 ws 模塊進行 init() 即可。以下是一個簡單的例子 aobws 網頁端啟動 function 例子 完整例子： https://github.com/aroz-online/aobws_demo/blob/master/index.php 那作為開發者 JWT 的部分我要怎樣處理？ 這系統的好處就是你可以不用處理，只要填入 token = "" 即可自動彈出視窗讓使用者輸入 JWT token 值，是不是滿方便呢？ JWT 請求授權界面 就是這樣，你的模組就能很方便的使用 aobws 作即時通訊了。 備注：如果我想用 aobws 作其他用途怎辦？ 可以喔，你也可以在同一個 aob 主系統下使用多個 aobws 作其他用途。你可以在 SystemAOB/system/aobws 下找到啟動檔然後自行更改啟動設定。（主要是更改啟動的 port 跟 登入授權檢查的 URL）。以下為 aobws 的啟動參數： Usage of aobws.exe: -cert string Certification for TLS encription (default "server.crt") -endpt string ShadowJWT Validation Endpoint (default "http://localhost/AOB/SystemAOB/system/jwt/validate.php") -key string Server key for TLS encription (default "server.key") -port string HTTP service address (default "8000") -tls Enable TLS support on websocket (aka wss:// instead of ws://). Reqire -cert and -key

在做 FYP 時難得一次預上連在 StackOverflow 也找不到問題，結果被我試出來了。 問：如何在 Debian Linux 上用 www-data 權限運行屬於 pi 使用者的 miniconda 環境並運行 Tensorflow 答：shell_exec 以下指令： "echo raspberry | /bin/su -s /bin/bash -c './runmodel.sh {其他需要傳進去的參數} ' pi" （解釋： 第一個 echo raspberry 是帳戶密碼，後面的 pi 是帳戶名稱。） 然後在你要執行的 bash 檔裡面加上： cd /home/pi/miniconda3/bin/ source activate {環境名稱} （我想找不到的原因應該是沒有人拿 Raspberry Pi 跑神經網絡吧？🤔🤔🤔）

最近因為準備開發 Home Dynamic 家居自動化系統，所以入手了一塊 ESP8266 的 NodeMCU 0.9。實際上就是中國的山寨版而已。 http://arduino.esp8266.com/stable/package_esp8266com_index.json 首先把上面的連接加進去 Board Manager，然在再選擇 Install ESP8266。之後就跟一般的新模塊 / 開發版設定沒甚麼分別，但是得留意的是在這塊中國制的 Node MCU 上面，其上傳設定是這樣的： 因為網上面並沒有甚麼教學，只好自己全部試一次好了。 這篇東西先留著，遲點有需要再用作參考吧。   更新： NodeMCU 版本應該是 1.0 才對（如圖），不然在 9600 bandwidth 的時候會讀取出亂碼

這東西其實真的超爛，不知道是誰想出來的。 部分充電器可能因為廠商不想用家使用別家的充電器來充電，所以想出了在充電器裡面加入辨識裝置，如果不是自家的產品就減少輸出的電流量。也是因為這個原因，這粒 IC 就出現了。 這粒 IC 只要接上 USB 對應的 D+ 和 D- 就可以運作了。簡單來說就是「破解」所有品牌充電器的辦識機制，讓每個充電器都以為這是自家品牌的手機，於是全力輸出最高的電流量。可真是一山還有一山高啊。