為什麼JavaScript也將征服VR世界

phodal發表於2016-04-08
JavaScriptVR

這篇文章本應該在 2 個月前就出現了，但是一直都沒有足夠的動力去寫。直到，我最近在玩知乎，也看到了一個類似的問題。加上這是一個無聊的小長假，就把這篇文章寫出來。

這篇文章分成四部分：

  • 基礎知識：3D 世界與四元數
  • 一個 Hello, World
  • 應用篇——高階示例

因為我只玩過公司的 Oculus DK2，所以這裡是以 DK2 為內容而展開的。

實際上，要用 JavaScript 來用 VR 程式是很簡單的一件事：

  1. 使用 Node.js 來讀取 Oculus 上的感測器的資料，將這些資料用 WebSocket 協議來提供一個服務。
  2. 尋找一個 3D 遊戲引擎，如 Three.js 來建立一個 3D 世界。
  3. 讀取感測器的值將其表示在 3D 世界中。

這點也可以用在混合應用上，你只需要有一個 CardBoard 即可。使用 Cordova 讀取手機感測器的資料，再通過這些資料來改變 WebView 的狀態——除了發熱會比較嚴重，應該沒有別的影響。

基礎知識：3D 世界與四元數

在我們所熟知的 3D 遊戲裡，點的位置由三個座標決定的（x，y，z），如下圖所示：

這三個座標只能表示我們在這個世界的位置，而不能上下的看這個世界。

Oculus DK2 用的是 MPU (Motion Processing Unit)晶片是 MPU6500，是第二個整合性 6 軸運動處理元件（第一個是 MPU6050）。它可以數字輸出 6 軸或 9 軸的旋轉矩陣、四元數(quaternion)、尤拉角格式(Euler Angle forma)的融合演算資料。

這時候，我們就需要尤拉角以及四元數來表示物體在虛擬世界的狀態。（PS：原諒我只能簡單地提一下）

尤拉角是一組用於描述剛體姿態的角度，尤拉提出，剛體在三維歐氏空間中的任意朝向可以由繞三個軸的轉動複合生成。通常情況下，三個軸是相互正交的。

其對應的三個角度又分別成為 roll（橫滾角），pitch（俯仰角）和 yaw（偏航角）。

而四元數則是：

四元數可以用於表示三維空間裡的旋轉。它常用的另外兩種表示方式（三維正交矩陣和尤拉角）是等價的。人們用四元數來表示旋轉要解決兩個問題，一是如何用四元數表示三維空間裡的點，二是如何用四元數表示三維空間的旋轉。

之前玩過的 6050 出來大概就是這樣子的，如果你玩四軸飛行器的話，你也應該這樣玩過：

Copy/Paste 完上面的內容後，你可能沒有啥概念，還是舉個 hello，world 的例子。

例子: 一個 hello,world

讓我們在回到一開始說的那三步，我們將需要做三件事：

  1. 尋找一個 Node 的 Oculus 擴充——不過，這件事現在可以交給 WebVR。
  2. 尋找一個 Web 的 3D 庫，及其對應的 Oculus 展示外掛。
  3. 讀取感測器資料，顯示到虛擬世界中。

如下圖所示:

於是找至了對應的 Node 庫有：Node-HMD，它可以讀取感測器的資料。

還有 Three.js 和 Oculus Effect 外掛，可以顯示出下面的檢視：

這樣，我們 DK2 Control 讀取感測器的資料，就可以到這個虛擬世界玩了~~。

更詳細的介紹可以見： https://github.com/phodal/oculus-nodejs-threejs-example

高階應用: 火星漫遊者

上面的應用示例還是太簡單了，讓我們來看一個高階應用——這是我們在兩個月前做的另外一個 Hackday Idea，這是另外一個“火星漫遊者”：

想象一下你想去看看火星，但是你又沒有錢去。而你可以租用這樣的一個機器人，然後你就可以在火星漫遊了。

因此，首先我們需要一個實時視訊通訊，這裡我們就用到了 WebRTC:

通過 WebRTC 我們就可以在計算機瀏覽器上實現實時通訊，再通過 Three.js 就可以將這個視訊轉為一個近似 3D 的視角。而捕獲這個視訊即可以通過手機上的瀏覽器，也可以在手機上編寫相應的 Web 應用。

這裡有一個線上的 Demo：http://laht.info/WebGL/DK2Demo.html

架構大致如下圖所示：

這樣我們就解決了實時視訊這個問題，然後我們還需要去控制硬體：

  1. 用 WebSocket 協議來提供 Oculus 的上、下、左、右運動的資料
  2. 在手機上讀取這個感測器資料，並將這個資料通過 BLE 傳送到小車上。
  3. 小車以通過指令來做相應的運動。

關於這部分內容的可以看我之前的那篇文章《我是如何 Hack 一個機器人的？》

總結: All in JavaScript

與C坑坑（C++）相比，JavaScript 更適合搭建原型——快速、直接、有效，畢竟 C++ 編譯需要時間的。執行起來的效果也如預期的一樣，電腦風扇各種轉，不知道是不是 Mac 專有的。不過，我想這個效能問題是一直都有的。

相關文章