前不久，我負(fù)責(zé)了易班獅子聯(lián)盟的“虛擬現(xiàn)實(shí)在教育領(lǐng)域應(yīng)用”的課題研究。雖然是公司內(nèi)部自發(fā)的實(shí)驗(yàn)性項(xiàng)目，但能借這個機(jī)會把目前火熱的VR從頭到尾研究一把也是挺過癮的。最后，我們小組做了個產(chǎn)品原型和教程，一方面是為了探索VR技術(shù)與校園場景的結(jié)合更多可能，另外一方面希望也是通過本項(xiàng)目幫助大家快速的了解目前的VR產(chǎn)品是如何制作的。

本文的結(jié)構(gòu)主要按照產(chǎn)品開發(fā)的流程來寫的：前期調(diào)研（Market Research）、產(chǎn)品定義（Product Defining）、技術(shù)選型（Technology Proposal）、產(chǎn)品開發(fā)（Developing），除了幫助大家了解整個流程以外，也是為了大家各取所需。目前，所有資料已發(fā)布到github上面，歡迎對VR有興趣的童鞋下載:?https://github.com/gold3bear/learn_vr

另外，還要感謝我們課題組的小伙伴，聯(lián)盟盟主郭致彥和劉成斌、趙振亮、田廣智等老師。

前期調(diào)研（Marketing Research）

目前，網(wǎng)上充斥著各種所謂的權(quán)威機(jī)構(gòu)發(fā)布的VR調(diào)研報告。這些報告大多都持樂觀的態(tài)度，但這些報告更像是一種對潮流的追趕。其實(shí)無論鞋子多么潮，合不合腳只有自己知道。每個公司情況都不一樣，對于調(diào)研我就不展開了。

一、產(chǎn)品設(shè)計(jì)（Product Defining）

這個課題是一個典型的先定義技術(shù)再尋找需求的項(xiàng)目。其背后本質(zhì)就是為技術(shù)合適的使用場景。因此，在產(chǎn)品設(shè)計(jì)階段我們使用了大量的“頭腦風(fēng)暴”來收集創(chuàng)意。經(jīng)過反復(fù)討論后，我們將產(chǎn)品目標(biāo)初步設(shè)定為：為即將步入的校園的新生打造一款能夠解決實(shí)際需求的VR校園產(chǎn)品。

1. ?畫像 （Persona）

為便于問題探索，我們制作了三類用戶畫像：

準(zhǔn)大學(xué)生 王曉麗

心疼女兒的父親 王老伯

忙碌的輔導(dǎo)員 張老師

2. 價值主張（Value Proposition）

有沒有一個價值能夠滿足這三類人群的需求呢？

滿足三者需求

經(jīng)過分析和討論，我們最終提出的價值主張如下：

新生在家就能身臨其境地完成預(yù)報到:

• 通過趣味游戲的方式，讓學(xué)生了解校園環(huán)境
• 在家熟悉校園環(huán)境和報到流程
• 確保學(xué)生的安全：避免來校當(dāng)天走失和迷路的情況
• 提升報到的效率，減少老師的工作量

使用場景舉例：

• 在收到入取通知書后，新生用手機(jī)掃一掃通知書上的二維碼，就可以下載到迎新的APP并安裝；
• 學(xué)生將通知書中附帶的卡紙制作成VR眼鏡；
• 把裝好APP的手機(jī)裝入眼鏡盒即可身臨其境地瀏覽校園環(huán)境；
• 通過做任務(wù)和講解，能夠全方位了解關(guān)于學(xué)校和報道的情況和問題。
• 最終，當(dāng)新生真正到學(xué)校的時候，其實(shí)已經(jīng)對自己學(xué)校有較為熟悉的了解。

3. 功能規(guī)劃（Feature Defining）

針對所提的價值主張和主要用戶角色，我們提了如下幾個用戶故事:

• P0 識別校園中的建筑物：作為一名新生，我需要在校園場景中了解到每個建筑物的信息，以便我在家就能知道學(xué)校的環(huán)境。
• P1 校園中移動穿行：作為一名新生，我需要在校園常用道路上走一走，以便于熟悉學(xué)校的地理環(huán)境。
• P3 導(dǎo)覽解說：作為一名用戶，我希望能聽到生動講解，這樣我就可以騰出雙眼觀察周遭。
• P4 做報到任務(wù)獲獎勵：作為一名新生，我需要做點(diǎn)任務(wù)，例如，從機(jī)場/火車站到學(xué)校的任務(wù)，去宿舍報到的任務(wù)，這樣我可以提前了解到去學(xué)校時需要的注意的問題。

而?識別建筑物是最基礎(chǔ)和最核心的功能，因此其優(yōu)先級最高，也是本期要完成的目標(biāo)，其它功能后續(xù)進(jìn)行迭代。

二、 技術(shù)選型（Technical Proposal ）

目前許多廠商都推出了自己的VR解決方案，綜合考慮制作成本和學(xué)習(xí)難度之后，我們選擇了性價比最高的 Google Cardboard 的方案。

Cardboard的VR眼鏡說白了紙板盒+手機(jī)，成本低廉，制作簡單。

Google提供的了相關(guān)的圖紙和文檔（如無法訪問谷歌，請自行解決）。大家可以自行用紙板制作，也可以從某寶購買，售價從幾元到數(shù)十元不等。

目前，基于谷歌的VR方案，內(nèi)容制作有兩種方式：攝影合成，程序開發(fā)。下面我們一一介紹一下：

1. 通過拍攝合成

拼接多臺攝影設(shè)備進(jìn)行拍攝，在拍攝完成后合成3D的全景的視頻。目前，歐美和島國小電影已經(jīng)率先嘗試。

某片拍攝現(xiàn)場

從上圖可以看出，這對拍攝和環(huán)境的要求極高。硬件成本也在幾萬到上百萬不等，錄制的后期合成也要花費(fèi)多人力成本。如果買不起那么多專業(yè)攝影設(shè)備，也可以考慮使用3D打印的支架把多臺GoPro拼接在一起。一個GoPro 相機(jī)在4000元左右。如下圖：

谷歌官方推薦的Jump是由16個GoPro 4組成的360圓盤。

2. 通過程序開發(fā)

如果沒有錢投入硬件，那就只能玩軟件了。Google提供了Daydream SDK和Cardboard SDK。用這兩個SDK，可以幫助我們事半功倍。

Daydream 是谷歌新發(fā)布的VR方案，從硬件上看Daydream相比于Cardboard就是多了個手柄和舒適度較高的遙控器。需要硬件支持Daydream和VR Play Store。按照目前情況來看，頭套+手柄的售價在500多元。

配圖源自新浪科技

而Cardboard SDK 實(shí)際上是Unity3D的素材庫，提供了現(xiàn)成的用于VR制作相關(guān)素材和腳本。因此這對熟悉Unity3D的開發(fā)者門檻較低。而且Unity3D的腳本主要使用了簡化的C#和JavaScript，對于有一定編程經(jīng)驗(yàn)的開發(fā)者也是非常簡單便捷的。比Daydream更好的就是兼容Android和iOS。

綜合考慮，在原型制作階段我們可以使用Cardboard進(jìn)行低成本簡單的虛擬場景制作，等Daydream成熟之后可以考慮再遷移以獲得更好的體驗(yàn)。而后期條件寬裕的時候可以使用攝影的方式進(jìn)行制作。

三、 技術(shù)實(shí)施（Developing）

根據(jù)前面的討論和分析，我們需要使用Cardboard實(shí)現(xiàn)在查看建筑物建筑物介紹的產(chǎn)品原型。也就是說，當(dāng)用戶看到這個建筑的時候，我們要能告訴他該建筑的名字。大家可以在Github上查看本項(xiàng)目代碼：https://github.com/gold3bear/learn_vr/tree/master/VR_school

1. 準(zhǔn)備工作

Google對Cardboard SDK 的有充分詳細(xì)的文檔?。在正式動工前，我們需要做好以下準(zhǔn)備：

• 下載最新的版本的Unity 3D。安裝時候需要注意選擇支持安卓導(dǎo)出或者iOS（主要看你針對的平臺）?如何下載和安裝可以看這篇文章
• 下載 Cardboard SDK for Unity，原版下載地址。因?yàn)椋募^大從外網(wǎng)下載到本地要花較長時間。幸運(yùn)的是我已經(jīng)把整個包上傳到百度云了下載地址。
• 下載安裝最新版的 X-Code（針對iOS開發(fā)），如果你是Android那就下載Android的
  SDK。

大家可以發(fā)現(xiàn)不管是Android還是iOS，都是用相同的Cardboard SDK for Unity，因此在基本開發(fā)流程上沒有太大區(qū)別。本文接下去只以iOS為例。

2. 開動

打開Unity 3D創(chuàng)建一個名為VR_School的項(xiàng)目，并且確保選擇的項(xiàng)目類型是3D；

創(chuàng)建項(xiàng)目

1. 導(dǎo)入Google Cardboard SDK，選擇 GoogleVRForUnity.unitypackage后點(diǎn)擊import

導(dǎo)入Cardboard SDK

2. 創(chuàng)建在Assets中創(chuàng)建一個新的文件夾 MyAssets。這個文件夾主要用來放置我們自定義的素材。

3. 在MyAssets中創(chuàng)建Scene文件夾，用來存放我們的場景文件。點(diǎn)擊保存按鈕（command+s），將文件當(dāng)前文件存儲，命名為stage。

3. 創(chuàng)建物體

（1）創(chuàng)建地面

1）右鍵點(diǎn)擊3D Object，選擇Plane。

2）選擇平面，將其命名為 Ground，Transform中的參數(shù)Scale 設(shè)置為x=10,y=0,z=10

（2）創(chuàng)建建筑

1）建筑可以從3dsMAX、SketchUp或者M(jìn)aya導(dǎo)入。為了簡化操作我們用Unity自帶的長方體代替。點(diǎn)擊右鍵選擇3D Object，選擇Cube:

2）設(shè)置Cube的參數(shù)：

• 名稱：教學(xué)樓
• Position:x=0,y=1,z=0;
• Scale: x=1,y=2,z=1;

3）將“教學(xué)樓”復(fù)制出3個出來，調(diào)整不同的位置、高度和大小以示區(qū)分，注意調(diào)整Y坐標(biāo)高度使底部貼地

4）分別命名為體育館、宿舍樓、食堂

（3）添加素材

我們現(xiàn)在要給場景中的物體附上材質(zhì)，讓地面、建筑物有不同的顏色：

1）在“MyAssets”中創(chuàng)建名為“Materials”文件夾：

2）創(chuàng)建用于地面的一個材質(zhì)球，命名為GroundMaterial，并且選擇好顏色；

3）創(chuàng)建用于建筑物的4個材質(zhì)球，分別命名為：BuildingMaterial、BuildingMaterial1、BuildingMaterial2、BuildingMaterial3，配上不同的顏色來區(qū)分；

4）分別將這5個材質(zhì)拖動到對應(yīng)的物體上面

4. 設(shè)置相機(jī)

（1）我們這一步是需要將相機(jī)放這4個建筑物的中間。選中相機(jī)，你可以在小窗口上看到相機(jī)視角。相機(jī)的Position 參數(shù)可以設(shè)置為：x=0,y=1,z=0;這樣相機(jī)就移動到4個物體的中間了。

（2）將相機(jī)變成VR的雙攝像頭相機(jī)。操作很簡單，打開Assets下的GoogleVR下面的，拖動到heriach面板中就可以了。

點(diǎn)擊播放按鈕，我們就可以看到VR效果了。平移（option+鼠標(biāo)滑動），傾斜（control+鼠標(biāo)滑動）

（3）為了方面顯示，我們給相機(jī)添上焦點(diǎn)。將”Assets/GoogleVR/Prefabs/UI”的GvrReticle拖動到攝像機(jī)中。在次點(diǎn)擊play按鈕，可以看到視頻中心有一個焦點(diǎn)。

5. 編寫游戲腳本

現(xiàn)在，指示建筑物顯示名稱的功能還沒有實(shí)現(xiàn)。需要我們用C#編寫點(diǎn)腳本，不太難，照著做就好了：

（1）拖入文件夾Google/Scripts/UI中的GvrGaze腳本至相機(jī),這樣相機(jī)就擁有和物體交互的能力了。是不是很簡單?

（2）我們還需要為建筑物添加點(diǎn)代碼，讓相機(jī)照射物體上后物體能夠有所反應(yīng)：

請?jiān)贛yAssets下面創(chuàng)建一個Scripts文件夾，如圖：

在Scripts創(chuàng)建一個名為Building的C#腳本。

雙擊點(diǎn)開后，將下面的代碼全部覆蓋過去，如有問題請查看github上的代碼：

將Building腳本拖給建筑物：

點(diǎn)擊Play按鈕就可以看到效果了，大家可以看到焦點(diǎn)對準(zhǔn)的物體都會變成綠色，焦點(diǎn)移開后又變成原來的顏色；

（3）大功即將告成，現(xiàn)在要做的就是把所看到的物體名字顯示在屏幕上

創(chuàng)建GUI文字：將其命名為Building Name，用來呈現(xiàn)建筑物的名稱。

調(diào)整合適的距離；

創(chuàng)建一個空的游戲?qū)ο?，命名為GameController,設(shè)置Tag為GameController，這樣Building的代碼中就能找到它了。

創(chuàng)建GameController腳本，代碼如下：

拖動GameController腳本給GameController對象：

調(diào)整Building代碼與GameController交互使建筑物能改變畫布的文字，具體代碼可以查看github。

添加一個私有屬性 gameController

調(diào)整Start的代碼，添加通過Tag找到游戲中的GameController，并且創(chuàng)建實(shí)例。

調(diào)整TellMyName的方法，調(diào)用將本建筑物的名字傳給gameController對象，讓它去修改畫布。

點(diǎn)擊play按鈕，查看效果。

6.?在iPhone上體驗(yàn)

做完這一步就大功告成了。在第一次導(dǎo)出到手機(jī)時要做以下這些操作：

（1）打開File菜單下的 Building Setting

（2）選擇iOS，點(diǎn)擊Switch Platform按鈕。

（3）點(diǎn)擊Player Settings，在屏幕右邊的Inspector 選擇 Resolution and Presentation 一欄，將Default Orientation設(shè)置為Auto Rotation，將Allowed Orientations for Auto Rotation的其他√都去掉只保留Landscape Left;

（4）點(diǎn)擊最下方的Other Setting，找到Bundle Identifier 將它設(shè)置成你的蘋果開發(fā)者認(rèn)證的賬號的ID；如果沒有的話，需要到蘋果開發(fā)者上去設(shè)置。您可查看Xcode如何在真機(jī)上調(diào)試的一些資料。

（5）插上手機(jī) 點(diǎn)擊Build and Run ，在過程中Unity會調(diào)用Xcode請點(diǎn)擊確定。耐心等待就好了。編譯完成后，就能夠在手機(jī)上體驗(yàn)了。

四、總結(jié)

總的來說使用Cardboard的來制作VR是較為簡單和低成本的。雖然文章結(jié)束了，但我們還有許多細(xì)節(jié)還沒有深入地探討。

例如，前期的原型設(shè)計(jì)或者交互設(shè)計(jì)，畫線框圖已經(jīng)沒用了，而比較合適的原型工具應(yīng)該是sketch up、3ds max 一類的三維軟件，而具體的交互方式業(yè)內(nèi)也沒有標(biāo)準(zhǔn)，需要我們繼續(xù)探索。隨著VR技術(shù)的不斷發(fā)展，更多優(yōu)質(zhì)的解決方案會不斷涌現(xiàn)出來，因此，這是一個需要持續(xù)學(xué)習(xí)和研究的過程。

最后，希望這篇文章能夠幫助到大家。

本文由 @Gold3bear熊泳心 ?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。