前不久，我負(fù)責(zé)了易班獅子聯(lián)盟的“虛擬現(xiàn)實(shí)在教育領(lǐng)域應(yīng)用”的課題研究。雖然是公司內(nèi)部自發(fā)的實(shí)驗(yàn)性項(xiàng)目，但能借這個(gè)機(jī)會(huì)把目前火熱的VR從頭到尾研究一把也是挺過癮的。最后，我們小組做了個(gè)產(chǎn)品原型和教程，一方面是為了探索VR技術(shù)與校園場(chǎng)景的結(jié)合更多可能，另外一方面希望也是通過本項(xiàng)目幫助大家快速的了解目前的VR產(chǎn)品是如何制作的。此項(xiàng)目主要是通過Unity 3D 和Google Cardboard 來實(shí)現(xiàn)。目前，所有資料已發(fā)布到github上面，歡迎對(duì)VR有興趣的童鞋下載: https://github.com/gold3bear/learn_vr

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

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

目前，網(wǎng)上能獲得的二手資料很多。關(guān)于VR市場(chǎng)分析大多報(bào)告都持樂觀的態(tài)度，但這些更像是一種對(duì)潮流的追趕。其實(shí)無(wú)論鞋子多么潮，合不合腳只有自己知道。對(duì)于調(diào)研我就不展開了。

一、產(chǎn)品定義（Product Defining）

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

1.1 畫像 （Persona）

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

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

心疼女兒的父親 王老伯

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

1.2 價(jià)值主張（Value Proposition）

我們能不能提出一個(gè)合理的價(jià)值主張來滿足這三類人群的需求呢？

滿足三者需求

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

本產(chǎn)品讓新生在家就能身臨其境地完成預(yù)報(bào)到

• 通過趣味游戲的方式，讓學(xué)生了解校園環(huán)境

• 在家熟悉校園環(huán)境和報(bào)到流程

• 確保學(xué)生的安全：避免來校當(dāng)天走失和迷路的情況

• 提升報(bào)到的效率，減少老師的工作量

使用場(chǎng)景

使用場(chǎng)景舉例：

• 在收到入取通知書后，新生用手機(jī)掃一掃通知書上的二維碼，就可以下載到迎新的APP并安裝；

• 學(xué)生將通知書中附帶的卡紙制作成VR眼鏡；

• 把裝好APP的手機(jī)裝入眼鏡盒即可身臨其境地瀏覽校園環(huán)境；

• 通過做任務(wù)和講解，能夠全方位了解關(guān)于學(xué)校和報(bào)道的情況和問題。

• 最終，當(dāng)新生真正到學(xué)校的時(shí)候，其實(shí)已經(jīng)對(duì)自己學(xué)校有較為熟悉的了解。

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

針對(duì)所提的價(jià)值主張和主要用戶角色，我們提了如下幾個(gè)用戶故事:

• P0 識(shí)別校園中的建筑物：作為一名新生，我需要在校園場(chǎng)景中了解到每個(gè)建筑物的信息，以便我在家就能知道學(xué)校的環(huán)境。

• P1 校園中移動(dòng)穿行：作為一名新生，我需要在校園常用道路上走一走，以便于熟悉學(xué)校的地理環(huán)境。

• P3 導(dǎo)覽解說：作為一名用戶，我希望能聽到生動(dòng)講解，這樣我就可以騰出雙眼觀察周遭。

• P4 做報(bào)到任務(wù)獲獎(jiǎng)勵(lì)：作為一名新生，我需要做點(diǎn)任務(wù)，例如，從機(jī)場(chǎng)/火車站到學(xué)校的任務(wù)，去宿舍報(bào)到的任務(wù)，這樣我可以提前了解到去學(xué)校時(shí)需要的注意的問題。

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

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

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

Google Cardboard

Cardboard的VR眼鏡說白了紙板盒+手機(jī)，成本低廉，制作簡(jiǎn)單。
Google提供的了相關(guān)的圖紙和文檔（如無(wú)法訪問谷歌，請(qǐng)自行解決）。大家可以自行用紙板制作，也可以從某寶購(gòu)買，售價(jià)從幾元到數(shù)十元不等。

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

1. 通過拍攝合成

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

某片拍攝現(xiàn)場(chǎng)

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

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

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

如果沒有錢投入硬件，那就只能玩軟件了。Google提供了基于Android的Daydream SDK和能夠兼容Android和iOS的Cardboard SDK

Daydream 是谷歌新發(fā)布的VR方案，從硬件上看Daydream相比于Cardboard就是多了個(gè)手柄和舒適度較高的頭戴眼鏡。按照目前情況，頭套和手柄售價(jià)在500多元。Daydream要求是安卓，目前只有谷歌親兒子NEXUS的個(gè)別機(jī)型能享受！

而Cardboard SDK 實(shí)際上是Unity3D的素材庫(kù)，提供了現(xiàn)成的用于VR制作相關(guān)素材和腳本。因此這對(duì)熟悉Unity3D的開發(fā)者門檻較低。而且Unity3D的腳本主要使用了簡(jiǎn)化的C#和JavaScript，可針對(duì)Android和IOS分別導(dǎo)出APP。因此，對(duì)于有編程經(jīng)驗(yàn)的開發(fā)者，也是非常簡(jiǎn)單便捷的。

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

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

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

效果

3.1 準(zhǔn)備工作

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

• 下載最新的版本的Unity 3D。安裝時(shí)候需要注意選擇支持安卓導(dǎo)出或者iOS（主要看你針對(duì)的平臺(tái)） 如何下載和安裝可以看這篇文章

• 下載 Cardboard SDK for Unity，原版下載地址。因?yàn)?，文件較大從外網(wǎng)下載到本地要花較長(zhǎng)時(shí)間。幸運(yùn)的是我已經(jīng)把整個(gè)包上傳到百度云了下載地址。

• 下載安裝最新版的 X-Code（針對(duì)iOS開發(fā)），如果你是Android那就下載Android的
  SDK。

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

3.2 開動(dòng)

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

   
   

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

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

   
   

   導(dǎo)入Cardboard SDK

   
   

   導(dǎo)入Cardboard SDK

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

   
   

   自定義素材

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

   
   

3.3 創(chuàng)建物體

1. 創(chuàng)建地面

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

  
  

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

  
  

2. 創(chuàng)建建筑：

• 名稱:教學(xué)樓

• Position:x=0,y=1,z=0;

• Scale: x=1,y=2,z=1;

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

  
  

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

  
  

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

  
  

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

  
  

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

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

  
  

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

  
  

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

  
  

• 分別將這5個(gè)材質(zhì)拖動(dòng)到對(duì)應(yīng)的物體上面
  

  
  

3.3 設(shè)置相機(jī)

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

   
   

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

   
   

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

   
   

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

3.4 編寫游戲腳本

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

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

   
   

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

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

  
  

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

  
  

• 雙擊點(diǎn)開后，將下面的代碼全部覆蓋過去：

   using UnityEngine;  using System.Collections;  //除了繼承了Unity自帶的MonoBehaviour外，還繼承了GoogleVR的IGvrGazeResponder的接口類，用于實(shí)現(xiàn)物體對(duì)相機(jī)照射后的反饋動(dòng)作。   public class Building : MonoBehaviour,IGvrGazeResponder {   private Color startColor;   private Color newColor;   void Start () {       //獲取初始的顏色       startColor = GetComponent<Renderer>().material.color;       //模擬器的console打印顏色信息；       Debug.Log(startColor);   }   //當(dāng)用戶注視物體時(shí)的主要業(yè)務(wù)邏輯   public void SetGazedAt(bool gazedAt) {       if (gazedAt) {           TriggerColorToGreen (true);           TellMyName (true);       } else {           TriggerColorToGreen (false);           TellMyName (false);       }   }   //顏色改變觸發(fā)器，true 變綠色，false 恢復(fù)初始值   public void TriggerColorToGreen (bool triggered) {       GetComponent<Renderer> ().material.color = triggered ? Color.green : startColor;   }   //說出該對(duì)象的名稱   public void TellMyName (bool asked) {       if (asked) {           Debug.Log (name);       } else {           Debug.Log ("don't tell you");       }   }  #region 這里實(shí)現(xiàn)IGvrGazeResponder要求的方法   //焦點(diǎn)注視物體的時(shí)候執(zhí)行   public void OnGazeEnter(){       SetGazedAt(true);       Debug.Log (name);   }   //焦點(diǎn)已開物體的時(shí)候執(zhí)行   public void OnGazeExit(){       SetGazedAt (false);       Debug.Log ("out");   }   //點(diǎn)擊眼鏡盒的觸發(fā)器，也就是觸摸屏幕的時(shí)候   public void OnGazeTrigger(){       Debug.Log ("觸發(fā)");   }  #endregion  }

• 將Building腳本拖給建筑物：
  

  
  

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

  
  

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

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

  
  

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

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

  
  

  
  

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

        using UnityEngine;       using UnityEngine.UI;//引入GUI       using System.Collections;       public class GameController : MonoBehaviour {           // 顯示文字           public Text buildingName;           //畫布上顯示文字           public void showBuildingName(string name){               buildingName.text =  name;           }       }

• 拖動(dòng)GameController腳本給GameController對(duì)象：
  

  
  

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

• 添加一個(gè)私有屬性 gameController

   private GameController gameController;

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

  //獲取Game Controller對(duì)象 GameObject gameControllerObject = GameObject.FindWithTag("GameController"); if (gameControllerObject != null) {   gameController = gameControllerObject.GetComponent<GameController>(); } else {   Debug.Log("Cannot find 'GameController' script"); }

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

     //說出本對(duì)象的名稱 public void TellMyName (bool asked) {   if (asked) {     gameController.showBuildingName (this.name);   } else {     Debug.Log ("don't tell you");   } }

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

3.5 在iPhone上體驗(yàn)

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

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)證的賬號(hào)的ID；如果沒有的話，需要到蘋果開發(fā)者上去設(shè)置。您可查看Xcode如何在真機(jī)上調(diào)試的一些資料。
   

   
   

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

四、總結(jié)

總的來說使用Cardboard的來制作VR是較為簡(jiǎn)單和低成本的。雖然文章結(jié)束了，但我們還有許多細(xì)節(jié)還沒有深入的探討。例如，前期的原型設(shè)計(jì)或者交互設(shè)計(jì)，畫線框圖已經(jīng)沒用了，而比較合適的原型工具應(yīng)該是sketch up、3ds max 一類的三維軟件，而具體的交互方式業(yè)內(nèi)也沒有標(biāo)準(zhǔn)。隨著VR技術(shù)的不斷發(fā)展，更多優(yōu)質(zhì)的解決方案會(huì)不斷涌現(xiàn)出來，因此，這是一個(gè)需要持續(xù)學(xué)習(xí)和研究的過程。最后，希望這篇文章能夠幫助到大家。

文／Gold3bear創(chuàng)新設(shè)計(jì)師（簡(jiǎn)書作者）

如欲溝通交流，請(qǐng)加QQ群：140710383   關(guān)注公眾號(hào)：MVP-PM