為什么JavaScript也將征服VR世界

    因為我只玩過公司的 Oculus DK2，所以這里是以 DK2 為內(nèi)容而展開的。

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

    使用 Node.js 來讀取 Oculus 上的傳感器的數(shù)據(jù)，將這些數(shù)據(jù)用 WebSocket 協(xié)議來提供一個服務(wù)。

    尋找一個 3D 游戲引擎，如 Three.js 來創(chuàng)建一個 3D 世界。

    讀取傳感器的值將其表示在 3D 世界中。

    這點也可以用在混合應(yīng)用上，你只需要有一個 CardBoard 即可。使用 Cordova 讀取手機傳感器的數(shù)據(jù)，再通過這些數(shù)據(jù)來改變 WebView 的狀態(tài)——除了發(fā)熱會比較嚴(yán)重，應(yīng)該沒有別的影響。

    基礎(chǔ)知識：3D 世界與四元數(shù)

    在我們所熟知的 3D 游戲里，點的位置由三個坐標(biāo)決定的（x，y，z），如下圖所示：

    這三個坐標(biāo)只能表示我們在這個世界的位置，而不能上下的看這個世界。

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

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

    歐拉角是一組用于描述剛體姿態(tài)的角度，歐拉提出，剛體在三維歐氏空間中的任意朝向可以由繞三個軸的轉(zhuǎn)動復(fù)合生成。通常情況下，三個軸是相互正交的。

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

    而四元數(shù)則是：

    四元數(shù)可以用于表示三維空間里的旋轉(zhuǎn)。它常用的另外兩種表示方式（三維正交矩陣和歐拉角）是等價的。人們用四元數(shù)來表示旋轉(zhuǎn)要解決兩個問題，一是如何用四元數(shù)表示三維空間里的點，二是如何用四元數(shù)表示三維空間的旋轉(zhuǎn)。

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

    Copy/Paste 完上面的內(nèi)容后，你可能沒有啥概念，還是舉個 hello，world 的例子。

    例子: 一個 hello,world

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

    尋找一個 Node 的 Oculus 拓展——不過，這件事現(xiàn)在可以交給 WebVR。

    尋找一個 Web 的 3D 庫，及其對應(yīng)的 Oculus 展示插件。

    讀取傳感器數(shù)據(jù)，顯示到虛擬世界中。

    如下圖所示:

    于是找至了對應(yīng)的 Node 庫有：Node-HMD，它可以讀取傳感器的數(shù)據(jù)。

    還有 Three.js 和 Oculus Effect 插件，可以顯示出下面的視圖：

    這樣，我們 DK2 Control 讀取傳感器的數(shù)據(jù)，就可以到這個虛擬世界玩了~~。

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

    高級應(yīng)用: 火星漫游者

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

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

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

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

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

    架構(gòu)大致如下圖所示：

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

    用 WebSocket 協(xié)議來提供 Oculus 的上、下、左、右運動的數(shù)據(jù)

    在手機上讀取這個傳感器數(shù)據(jù)，并將這個數(shù)據(jù)通過 BLE 傳送到小車上。

    小車以通過指令來做相應(yīng)的運動。

    關(guān)于這部分內(nèi)容的可以看我之前的那篇文章《我是如何 Hack 一個機器人的？》

    總結(jié): All in javascript

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