導(dǎo)語(yǔ)：2016作為VR虛擬現(xiàn)實(shí)的元年，各大VR廠商紛紛推出自己的硬件設(shè)備，巨頭們建立自己的VR生態(tài)圈，推出各自的設(shè)備-平臺(tái)-sdk為一體的閉環(huán)，隨著VR硬件設(shè)備以及各大平臺(tái)的推出完善，VR內(nèi)容將成為下一階段的需求爆點(diǎn)，VR開(kāi)發(fā)也將成為IT熱門職位。

本文旨在為各路希望進(jìn)軍VR的開(kāi)發(fā)者們提供VR的開(kāi)發(fā)指引。

Step1 了解VR app依賴的運(yùn)行環(huán)境和硬件設(shè)備

VR APP代碼的運(yùn)行環(huán)境（不包括顯示環(huán)境）包括PC端、移動(dòng)端、瀏覽器端和VR頭顯端，運(yùn)行環(huán)境主要依賴于VR頭顯(Head-mounted Display,縮寫HMD)類型。

目前主要市場(chǎng)上主要有以下 3 種VR頭顯(HMD) 設(shè)備：

滑配式頭顯

入門級(jí)HMD，價(jià)格便宜。這種設(shè)備由一個(gè)盒子和兩塊凸透鏡組成，與智能手機(jī)相連接，將 2D 顯示變成 3D VR 顯示。滑配式頭顯設(shè)備性能依賴于主機(jī)系統(tǒng)（智能手機(jī)），智能手機(jī)是提供 VR 效果的必備部分，因此為移動(dòng)端VR native app以及移動(dòng)端瀏覽器的WebVR網(wǎng)頁(yè)運(yùn)行提供硬件支持。

廠商：滑配式 HMD 設(shè)備包括谷歌 Cardboard 和三星 Gear VR。

cardboard插入智能手機(jī)體驗(yàn)VR，主要交互形式是凝視觸發(fā)事件，新一代的cardboard提供手柄

分離式頭顯

分離式 HMD 設(shè)備較滑配式 HMD 設(shè)備復(fù)雜，內(nèi)置多種電子零部件。兩者的主要不同是，分離式 HMD 設(shè)備擁有自己的顯示屏，計(jì)算和處理模塊主要還在電腦或者主機(jī)。因此主要支持運(yùn)行在PC端的APP或者WebVR網(wǎng)頁(yè)。

廠商：分離式 HMD 設(shè)備包括 Facebook Oculus Rift、HTC Vive 和 PlayStation VR。

整合式頭顯

整合式 HMD 設(shè)備擁有強(qiáng)大的計(jì)算能力和追蹤系統(tǒng)。作為一款獨(dú)立的計(jì)算設(shè)備，整合式 HMD 設(shè)備將處理器和顯示器合為一體，配備一整套零部件，價(jià)格高昂，app的運(yùn)行環(huán)境主要是頭顯的操作系統(tǒng)，因此現(xiàn)在應(yīng)用還不是很廣。

廠商：微軟 HoloLens（AR）

Step2 認(rèn)識(shí)VR app項(xiàng)目產(chǎn)出流程

?一個(gè)VR app項(xiàng)目從落地到可運(yùn)行大致需要經(jīng)歷三步：產(chǎn)品設(shè)計(jì)、UI設(shè)計(jì)和3d建模、開(kāi)發(fā)編程。

1.產(chǎn)品設(shè)計(jì)

產(chǎn)品經(jīng)理向來(lái)都把握著app的第一環(huán)，在這個(gè)階段VR產(chǎn)品經(jīng)理需要定位產(chǎn)品是面向移動(dòng)端用戶、還是使用onculus或者HTC vive頭顯的用戶，還需要對(duì)用戶行為和產(chǎn)品功能進(jìn)行多方面考慮，比如需要設(shè)計(jì)用戶在裸眼下點(diǎn)擊菜單和VR環(huán)境下凝視菜單的交互流程。同樣，如果開(kāi)發(fā)的是VR游戲，我們需要VR游戲產(chǎn)品經(jīng)理對(duì)整個(gè)游戲進(jìn)行策劃。產(chǎn)品經(jīng)理在第一環(huán)主要是輸出原型交互圖和prd。

谷歌VR資源平臺(tái)daydream app

2.UI設(shè)計(jì)與建模

產(chǎn)品原型出來(lái)之后，設(shè)計(jì)師就可以根據(jù)交互原型進(jìn)行VR場(chǎng)景設(shè)計(jì)了（大部分的VR菜單設(shè)計(jì)都是采用弧形化的metro瓷片風(fēng)格），游戲的設(shè)計(jì)師還需要對(duì)場(chǎng)景進(jìn)行3d建模，現(xiàn)在主流的建模工具是c4d、3dmax、maya等，一些依賴于視頻資源為內(nèi)容的app還需要專業(yè)的360攝像機(jī)和錄音器進(jìn)行全景錄制。

3.開(kāi)發(fā)編程

當(dāng)所有資源都準(zhǔn)備完之后，就是VR開(kāi)發(fā)者發(fā)揮了，與其他app開(kāi)發(fā)相比，VR 開(kāi)發(fā)者需要考慮更多的是3d場(chǎng)景的開(kāi)發(fā)以及VR設(shè)備的事件觸發(fā)，下文將進(jìn)行主要介紹。

Step3 理解VR開(kāi)發(fā)要點(diǎn)

1) VR場(chǎng)景開(kāi)發(fā)

開(kāi)發(fā)階段我們需要根據(jù)設(shè)計(jì)師的3d模型開(kāi)發(fā)360°虛擬場(chǎng)景，這個(gè)階段有點(diǎn)像web前端開(kāi)發(fā)的編寫html和css布局。

一個(gè)靜態(tài)的VR場(chǎng)景主要包含三個(gè)要素：場(chǎng)景、相機(jī)、實(shí)體。

VR場(chǎng)景的坐標(biāo)軸

VR開(kāi)發(fā)空間主要由 場(chǎng)景、相機(jī)、對(duì)象實(shí)體組成

場(chǎng)景scene：即用戶所處的虛擬環(huán)境，VR場(chǎng)景的中心坐標(biāo)軸x、y、z分別代表3d環(huán)境里的寬度、高度以及深度，我們可以將開(kāi)發(fā)的場(chǎng)景分成由多個(gè)三維網(wǎng)格組成的世界，所有的VR元素如相機(jī)和實(shí)體都要被包含在內(nèi)。

相機(jī)camera：代表用戶的眼睛所在的位置，相機(jī)的位置代表用戶在VR場(chǎng)景所在的位置。

實(shí)體entity：代表虛擬世界里的所有物體，這些實(shí)體一般具有四個(gè)基本屬性為大小、位置、角度和材質(zhì)，按照實(shí)體在場(chǎng)景里的功能分類，我們還可以分成：地面、天空、燈光和其它物質(zhì)，我們可以通過(guò)設(shè)置實(shí)體的位移、大小、旋轉(zhuǎn)等屬性來(lái)布局用戶的虛擬環(huán)境。

阿里buy+虛擬商店

靜態(tài)場(chǎng)景開(kāi)發(fā)完之后，我們需要為場(chǎng)景元素增加動(dòng)畫(huà)，VR的動(dòng)畫(huà)產(chǎn)生主要是兩個(gè)方式：1.頁(yè)面初始化完成時(shí)觸發(fā)；2.用戶事件觸發(fā)。

VR動(dòng)畫(huà)其實(shí)主要是通過(guò)編程來(lái)控制相機(jī)或者實(shí)體的屬性來(lái)實(shí)現(xiàn)，比如控制相機(jī)的位移來(lái)模擬用戶角色在場(chǎng)地里的移動(dòng)，又比如我們給砍刀這個(gè)實(shí)體注冊(cè)監(jiān)聽(tīng)，用戶揮動(dòng)手柄來(lái)觸發(fā)場(chǎng)景里砍刀的位移等，這點(diǎn)跟其他app開(kāi)發(fā)方式是相同的，都是需要給組件注冊(cè)事件監(jiān)聽(tīng)函數(shù)，不同的是VR的事件觸發(fā)類型。

2)事件觸發(fā)類型：

用戶在VR場(chǎng)景的事件類型主要為：初級(jí)模式：凝視觸發(fā)、手柄觸發(fā)；高級(jí)模式：體感手勢(shì)觸發(fā)、語(yǔ)音識(shí)別觸發(fā)、行走觸發(fā)。

凝視觸發(fā)是VR頭顯支持的基本功能，VR按鈕監(jiān)聽(tīng)到用戶凝視行為即可觸發(fā)事件；

手柄觸發(fā)類型依賴于VR設(shè)備配套的手柄所持支持手勢(shì)類型，一般手柄都配置了水平陀螺儀、加速計(jì)等傳感器，主要用于move平移、rotate轉(zhuǎn)動(dòng)、press按壓按鈕的觸發(fā)事件；

玩家使用Oculus Rift手柄進(jìn)行瞄準(zhǔn)

用戶使用手柄射擊方式觸發(fā)按鈕

體感手勢(shì)觸發(fā)：這是個(gè)人比較支持的交互方式，它讓雙手進(jìn)入VR世界，如leap motion。

利用裝在VR HMD的leap motion實(shí)現(xiàn)體感手勢(shì)交互

語(yǔ)音識(shí)別觸發(fā)：通過(guò)語(yǔ)音識(shí)別發(fā)送指令，是VR社交較為認(rèn)可的交互方案。

行走觸發(fā)：比較高級(jí)的觸發(fā)事件，市面較少見(jiàn)，一般需要萬(wàn)向跑步機(jī)傳感輸入用戶的位移信息。

KAT-WALK萬(wàn)向跑步機(jī)可以輸入用戶行走、跳躍、坐等事件

3)開(kāi)發(fā)技術(shù)與框架：

主要有三個(gè)方向：VR大型游戲開(kāi)發(fā)、VR移動(dòng)端應(yīng)用開(kāi)發(fā)、WebVR網(wǎng)頁(yè)開(kāi)發(fā)

VR游戲開(kāi)發(fā)

目前開(kāi)發(fā)VR游戲最主流的框架是Unity 3D和Unreal Engine 4。

其中，Unity3D開(kāi)發(fā)語(yǔ)言主要使用C#或者JavaScript，所以對(duì)于web開(kāi)發(fā)者來(lái)說(shuō)比較容易入門。而且Unity支持上述三種類型的頭戴顯示器，是跨平臺(tái)支持最好的開(kāi)發(fā)框架和渲染引擎，這使得我們開(kāi)發(fā)的VR游戲可以是運(yùn)行在瀏覽器網(wǎng)頁(yè)、移動(dòng)端上以及PC端的app。

UE4和Unity3D是VR游戲開(kāi)發(fā)主流框架

移動(dòng)端VR開(kāi)發(fā)

Google VR SDK主要用來(lái)開(kāi)發(fā)運(yùn)行在ios、Android手機(jī)上的原生app，適用于滑配式頭顯。

瀏覽器端的WebVR網(wǎng)頁(yè)開(kāi)發(fā)

VR模式瀏覽網(wǎng)頁(yè)

如果我們希望將vr場(chǎng)景應(yīng)用在網(wǎng)頁(yè)瀏覽器上，WebVR API允許使用分離式頭顯來(lái)觀看運(yùn)行在PC端上的網(wǎng)頁(yè)（草案階段），也支持使用滑配式頭顯觀看移動(dòng)端瀏覽器的網(wǎng)頁(yè)，這提供了另一個(gè)開(kāi)發(fā)模式，即使用開(kāi)發(fā)web前端網(wǎng)頁(yè)的方式開(kāi)發(fā)VR。

在 Web 上開(kāi)發(fā) VR 應(yīng)用，有下面三種方式：

1.JavaScript, WebGL 與 監(jiān)聽(tīng)設(shè)備方向（Device Orientation）

2.JavaScript, Three.js 與 WebVR

3.火狐WebVR框架A-Frame

A-Frame是一個(gè)通過(guò) HTML 創(chuàng)建 VR 體驗(yàn)的開(kāi)源 WebVR 框架。通過(guò)該框架構(gòu)建的 VR 場(chǎng)景能兼容智能手機(jī)、PC、 Oculus Rift 和 HTC Vive所有使用到瀏覽器的場(chǎng)景。

關(guān)于WebVR的知識(shí)，這里就不細(xì)說(shuō)啦，具體將在下一篇進(jìn)行詳細(xì)介紹。

社區(qū)資源：

2016中國(guó)VR研究報(bào)告：VR概論介紹以及國(guó)內(nèi)VR情況描述

Unity 3D for VR：使用U3D開(kāi)發(fā)VR教程

Google VR SDK：VR移動(dòng)端App開(kāi)發(fā)者網(wǎng)站

WebVR API：MDN關(guān)于WebVR API描述

Chrome Experiments for Virtual Reality：Chrome 團(tuán)隊(duì)提供的 6 個(gè) VR 案例

騰訊VR官網(wǎng)：騰訊建立的VR開(kāi)發(fā)者社區(qū)