為什么JavaScript也將征服VR世界
這篇文章本應(yīng)該在 2 個(gè)月前就出現(xiàn)了，但是一直都沒有足夠的動(dòng)力去寫。直到，我最近在玩知乎，也看到了一個(gè)類似的問題。加上這是一個(gè)無聊的小長(zhǎng)假，就把這篇文章寫出來。
這篇文章分成四部分：
- 基礎(chǔ)知識(shí)：3D 世界與四元數(shù)
- 一個(gè) Hello, World
- 應(yīng)用篇——高級(jí)示例
因?yàn)槲抑煌孢^公司的 Oculus DK2，所以這里是以 DK2 為內(nèi)容而展開的。
實(shí)際上，要用 JavaScript 來用 VR 程序是很簡(jiǎn)單的一件事：
- 使用 Node.js 來讀取 Oculus 上的傳感器的數(shù)據(jù)，將這些數(shù)據(jù)用 WebSocket 協(xié)議來提供一個(gè)服務(wù)。
- 尋找一個(gè) 3D 游戲引擎，如 Three.js 來創(chuàng)建一個(gè) 3D 世界。
- 讀取傳感器的值將其表示在 3D 世界中。
這點(diǎn)也可以用在混合應(yīng)用上，你只需要有一個(gè) CardBoard 即可。使用 Cordova 讀取手機(jī)傳感器的數(shù)據(jù)，再通過這些數(shù)據(jù)來改變 WebView 的狀態(tài)——除了發(fā)熱會(huì)比較嚴(yán)重，應(yīng)該沒有別的影響。
基礎(chǔ)知識(shí)：3D 世界與四元數(shù)
在我們所熟知的 3D 游戲里，點(diǎn)的位置由三個(gè)坐標(biāo)決定的（x，y，z），如下圖所示：
這三個(gè)坐標(biāo)只能表示我們?cè)谶@個(gè)世界的位置，而不能上下的看這個(gè)世界。
Oculus DK2 用的是 MPU (Motion Processing Unit)芯片是 MPU6500，是第二個(gè)整合性 6 軸運(yùn)動(dòng)處理組件（***個(gè)是 MPU6050）。它可以數(shù)字輸出 6 軸或 9 軸的旋轉(zhuǎn)矩陣、四元數(shù)(quaternion)、歐拉角格式(Euler Angle forma)的融合演算數(shù)據(jù)。
這時(shí)候，我們就需要?dú)W拉角以及四元數(shù)來表示物體在虛擬世界的狀態(tài)。（PS：原諒我只能簡(jiǎn)單地提一下）
歐拉角是一組用于描述剛體姿態(tài)的角度，歐拉提出，剛體在三維歐氏空間中的任意朝向可以由繞三個(gè)軸的轉(zhuǎn)動(dòng)復(fù)合生成。通常情況下，三個(gè)軸是相互正交的。
其對(duì)應(yīng)的三個(gè)角度又分別成為 roll（橫滾角），pitch（俯仰角）和 yaw（偏航角）。
而四元數(shù)則是：
四元數(shù)可以用于表示三維空間里的旋轉(zhuǎn)。它常用的另外兩種表示方式（三維正交矩陣和歐拉角）是等價(jià)的。人們用四元數(shù)來表示旋轉(zhuǎn)要解決兩個(gè)問題，一是如何用四元數(shù)表示三維空間里的點(diǎn)，二是如何用四元數(shù)表示三維空間的旋轉(zhuǎn)。
之前玩過的 6050 出來大概就是這樣子的，如果你玩四軸飛行器的話，你也應(yīng)該這樣玩過：
Copy/Paste 完上面的內(nèi)容后，你可能沒有啥概念，還是舉個(gè) hello，world 的例子。
例子: 一個(gè) hello,world
讓我們?cè)诨氐揭婚_始說的那三步，我們將需要做三件事：
- 尋找一個(gè) Node 的 Oculus 拓展——不過，這件事現(xiàn)在可以交給 WebVR。
- 尋找一個(gè) Web 的 3D 庫，及其對(duì)應(yīng)的 Oculus 展示插件。
- 讀取傳感器數(shù)據(jù)，顯示到虛擬世界中。
如下圖所示:
于是找至了對(duì)應(yīng)的 Node 庫有：Node-HMD，它可以讀取傳感器的數(shù)據(jù)。
還有 Three.js 和 Oculus Effect 插件，可以顯示出下面的視圖：
這樣，我們 DK2 Control 讀取傳感器的數(shù)據(jù)，就可以到這個(gè)虛擬世界玩了~~。
更詳細(xì)的介紹可以見： https://github.com/phodal/oculus-nodejs-threejs-example
高級(jí)應(yīng)用: 火星漫游者
上面的應(yīng)用示例還是太簡(jiǎn)單了，讓我們來看一個(gè)高級(jí)應(yīng)用——這是我們?cè)趦蓚€(gè)月前做的另外一個(gè) Hackday Idea，這是另外一個(gè)“火星漫游者”：
想象一下你想去看看火星，但是你又沒有錢去。而你可以租用這樣的一個(gè)機(jī)器人，然后你就可以在火星漫游了。
因此，首先我們需要一個(gè)實(shí)時(shí)視頻通訊，這里我們就用到了 WebRTC:
通過 WebRTC 我們就可以在計(jì)算機(jī)瀏覽器上實(shí)現(xiàn)實(shí)時(shí)通訊，再通過 Three.js 就可以將這個(gè)視頻轉(zhuǎn)為一個(gè)近似 3D 的視角。而捕獲這個(gè)視頻即可以通過手機(jī)上的瀏覽器，也可以在手機(jī)上編寫相應(yīng)的 Web 應(yīng)用。
這里有一個(gè)在線的 Demo：http://laht.info/WebGL/DK2Demo.html
架構(gòu)大致如下圖所示：
這樣我們就解決了實(shí)時(shí)視頻這個(gè)問題，然后我們還需要去控制硬件：
- 用 WebSocket 協(xié)議來提供 Oculus 的上、下、左、右運(yùn)動(dòng)的數(shù)據(jù)
- 在手機(jī)上讀取這個(gè)傳感器數(shù)據(jù)，并將這個(gè)數(shù)據(jù)通過 BLE 傳送到小車上。
- 小車以通過指令來做相應(yīng)的運(yùn)動(dòng)。
關(guān)于這部分內(nèi)容的可以看我之前的那篇文章《我是如何 Hack 一個(gè)機(jī)器人的？》
總結(jié): All in JavaScript
與C坑坑（C++）相比，JavaScript 更適合搭建原型——快速、直接、有效，畢竟 C++ 編譯需要時(shí)間的。運(yùn)行起來的效果也如預(yù)期的一樣，電腦風(fēng)扇各種轉(zhuǎn)，不知道是不是 Mac 專有的。不過，我想這個(gè)性能問題是一直都有的。
