前不久，我負責了易班獅子聯盟的“虛擬現實在教育領域應用”的課題研究。雖然是公司內部自發的實驗性項目，但能借這個機會把目前火熱的VR從頭到尾研究一把也是挺過癮的。最后，我們小組做了個產品原型和教程，一方面是為了探索VR技術與校園場景的結合更多可能，另外一方面希望也是通過本項目幫助大家快速的了解目前的VR產品是如何制作的。此項目主要是通過Unity 3D 和Google Cardboard 來實現。目前，所有資料已發布到github上面，歡迎對VR有興趣的童鞋下載: https://github.com/gold3bear/learn_vr
另外，還要感謝我們課題組的小伙伴，盟主郭致彥和劉成斌、趙振亮、田廣志等老師。
前期調研（Marketing Research）
目前，網上能獲得的二手資料很多。關于VR市場分析大多報告都持樂觀的態度，但這些更像是一種對潮流的追趕。其實無論鞋子多么潮，合不合腳只有自己知道。對于調研我就不展開了。
一、產品定義（Product Defining）
這個課題是一個典型的先定義技術再尋找需求的項目。其背后本質就是為技術合適的使用場景。因此，在產品設計階段我們使用了大量的“頭腦風暴”來收集創意。經過反復討論后，我們將產品目標初步設定為：為即將步入的校園的新生打造一款能夠解決實際需求的VR校園產品。
1.1 畫像 （Persona）
為便于問題探索，我們制作了三類用戶畫像：
1.2 價值主張（Value Proposition）
我們能不能提出一個合理的價值主張來滿足這三類人群的需求呢？
經過分析和討論，我們最終提出的價值主張如下：
本產品讓新生在家就能身臨其境地完成預報到
- 通過趣味游戲的方式，讓學生了解校園環境
- 在家熟悉校園環境和報到流程
- 確保學生的安全：避免來校當天走失和迷路的情況
- 提升報到的效率，減少老師的工作量
使用場景舉例：
- 在收到入取通知書后，新生用手機掃一掃通知書上的二維碼，就可以下載到迎新的APP并安裝；
- 學生將通知書中附帶的卡紙制作成VR眼鏡；
- 把裝好APP的手機裝入眼鏡盒即可身臨其境地瀏覽校園環境；
- 通過做任務和講解，能夠全方位了解關于學校和報道的情況和問題。
- 最終，當新生真正到學校的時候，其實已經對自己學校有較為熟悉的了解。
1.3 功能規劃（Feature Defining）
針對所提的價值主張和主要用戶角色，我們提了如下幾個用戶故事:
- P0 識別校園中的建筑物：作為一名新生，我需要在校園場景中了解到每個建筑物的信息，以便我在家就能知道學校的環境。
- P1 校園中移動穿行：作為一名新生，我需要在校園常用道路上走一走，以便于熟悉學校的地理環境。
- P3 導覽解說：作為一名用戶，我希望能聽到生動講解，這樣我就可以騰出雙眼觀察周遭。
- P4 做報到任務獲獎勵：作為一名新生，我需要做點任務，例如，從機場/火車站到學校的任務，去宿舍報到的任務，這樣我可以提前了解到去學校時需要的注意的問題。
而** 識別建筑物是最基礎和最核心的功能**，因此其優先級最高，也是本期要完成的目標，其它功能后續進行迭代。
二、 技術選型（Technical Proposal ）
目前許多廠商都推出了自己的VR解決方案，綜合考慮制作成本和學習難度之后，我們選擇了性價比最高的 Google Cardboard 的方案。
Cardboard的VR眼鏡說白了紙板盒+手機，成本低廉，制作簡單。
Google提供的了相關的圖紙和文檔（如無法訪問谷歌，請自行解決）。大家可以自行用紙板制作，也可以從某寶購買，售價從幾元到數十元不等。
目前，基于谷歌的VR方案，內容制作有兩種方式：攝影合成，程序開發。下面我們一一介紹一下：
1. 通過拍攝合成
它是指拼接多臺攝影設備進行拍攝，在拍攝完成后合成3D的全景的視頻。目前，歐美和島國小電影已經率先嘗試。
從上圖可以看出，這對拍攝和環境的要求極高。硬件成本也在幾萬到上百萬不等，錄制的后期合成也要花費多人力成本。如果買不起那么多專業攝影設備，也可以考慮使用3D打印的支架把多臺GoPro拼接在一起。一個GoPro 相機在4000元左右。
谷歌官方推薦的Jump是由16個GoPro 4組成的360°圓盤。
2. 通過程序開發
如果沒有錢投入硬件，那就只能玩軟件了。Google提供了基于Android的Daydream SDK和能夠兼容Android和iOS的Cardboard SDK
Daydream 是谷歌新發布的VR方案，從硬件上看Daydream相比于Cardboard就是多了個手柄和舒適度較高的頭戴眼鏡。按照目前情況，頭套和手柄售價在500多元。Daydream要求是安卓，目前只有谷歌親兒子NEXUS的個別機型能享受！
而Cardboard SDK 實際上是Unity3D的素材庫，提供了現成的用于VR制作相關素材和腳本。因此這對熟悉Unity3D的開發者門檻較低。而且Unity3D的腳本主要使用了簡化的C#和JavaScript，可針對Android和IOS分別導出APP。因此，對于有編程經驗的開發者，也是非常簡單便捷的。
綜合考慮，在原型制作階段我們可以使用Cardboard進行低成本簡單的虛擬場景制作，等Daydream成熟之后可以考慮再遷移以獲得更好的體驗。而后期條件寬裕的時候可以使用攝影的方式進行制作。
三、 技術實施（Developing）
根據前面的討論和分析，我們需要使用Cardboard實現在查看建筑物建筑物介紹的產品原型。也就是說，當用戶看到這個建筑的時候，我們能告訴他該建筑的名字。可以在Github上查看本項目代碼： https://github.com/gold3bear/learn_vr/tree/master/VR_school
3.1 準備工作
Google對Cardboard SDK 的有充分詳細的文檔 。在正式動工前，我們需要做好以下準備：
- 下載最新的版本的Unity 3D。安裝時候需要注意選擇支持安卓導出或者iOS（主要看你針對的平臺） 如何下載和安裝可以看這篇文章
- 下載 Cardboard SDK for Unity，原版下載地址。因為，文件較大從外網下載到本地要花較長時間。幸運的是我已經把整個包上傳到百度云了下載地址。
- 下載安裝最新版的 X-Code（針對iOS開發），如果你是Android那就下載Android的
SDK。
大家可以發現不管是Android還是iOS，都是用相同的Cardboard SDK for Unity，因此在基本開發流程上沒有太大區別。本文接下去只以iOS為例。
3.2 開動
-
打開Unity 3D創建一個名為VR_School的項目，并且確保選擇的項目類型是3D；
創建項目 -
導入Google Cardboard SDK，選擇 GoogleVRForUnity.unitypackage后點擊import
導入Cardboard SDK
導入Cardboard SDK -
創建在Assets中創建一個新的文件夾 MyAssets。這個文件夾主要用來放置我們自定義的素材
自定義素材 -
在MyAssets中創建Scene文件夾，用來存放我們的場景文件。點擊保存按鈕（command+s），將文件當前文件存儲，命名為stage。
3.3 創建物體
-
創建地面
-
右鍵點擊3D Object，選擇Plane。
-
選擇平面，將其命名為 Ground，Transform中的參數Scale 設置為x=10,y=0,z=10
-
-
創建建筑：
-
建筑可以從3dsMAX、SketchUp或者Maya導入。為了簡化操作我們用Unity自帶的長方體代替。點擊右鍵選擇3D Object，選擇Cube:
-
設置Cube的參數：
- 名稱:教學樓
- Position:x=0,y=1,z=0;
- Scale: x=1,y=2,z=1;
-
將“教學樓”復制出3個出來，調整不同的位置、高度和大小以示區分，注意調整Y坐標高度使底部貼地
-
分別命名為體育館、宿舍樓、食堂
-
-
添加素材
我們現在要給場景中的物體附上材質，讓地面、建筑物有不同的顏色：-
在“MyAssets”中創建名為“Materials”文件夾：
-
創建用于地面的一個材質球，命名為GroundMaterial，并且選擇好顏色；
-
創建用于建筑物的4個材質球，分別命名為：BuildingMaterial、BuildingMaterial1、BuildingMaterial2、BuildingMaterial3，配上不同的顏色來區分；
-
分別將這5個材質拖動到對應的物體上面
-
3.3 設置相機
-
我們這一步是需要將相機放這4個建筑物的中間。選中相機，你可以在小窗口上看到相機視角。相機的Position 參數可以設置為：x=0,y=1,z=0;這樣相機就移動到4個物體的中間了。
-
將相機變成VR的雙攝像頭相機。操作很簡單，打開Assets下的GoogleVR下面的，拖動到heriach面板中就可以了。
點擊播放按鈕，我們就可以看到VR效果了。平移（option+鼠標滑動），傾斜（control+鼠標滑動）
為了方面顯示，我們給相機添上焦點。將"Assets/GoogleVR/Prefabs/UI"的GvrReticle拖動到攝像機中。在次點擊play按鈕，可以看到視頻中心有一個焦點。
3.4 編寫游戲腳本
現在，指示建筑物顯示名稱的功能還沒有實現。需要我們用C#編寫點腳本，不太難，照著做就好了:
-
拖入文件夾Google/Scripts/UI中的GvrGaze腳本至相機,這樣相機就擁有和物體交互的能力了。是不是很簡單?
我們還需要為建筑物添加點代碼，讓相機照射物體上后物體能夠有所反應：
-
請在MyAssets下面創建一個Scripts文件夾，如圖：
-
在Scripts創建一個名為Building的C#腳本。
-
雙擊點開后，將下面的代碼全部覆蓋過去：
using UnityEngine; using System.Collections; //除了繼承了Unity自帶的MonoBehaviour外，還繼承了GoogleVR的IGvrGazeResponder的接口類，用于實現物體對相機照射后的反饋動作。 public class Building : MonoBehaviour,IGvrGazeResponder { private Color startColor; private Color newColor; void Start () { //獲取初始的顏色 startColor = GetComponent<Renderer>().material.color; //模擬器的console打印顏色信息； Debug.Log(startColor); } //當用戶注視物體時的主要業務邏輯 public void SetGazedAt(bool gazedAt) { if (gazedAt) { TriggerColorToGreen (true); TellMyName (true); } else { TriggerColorToGreen (false); TellMyName (false); } } //顏色改變觸發器，true 變綠色，false 恢復初始值 public void TriggerColorToGreen (bool triggered) { GetComponent<Renderer> ().material.color = triggered ? Color.green : startColor; } //說出該對象的名稱 public void TellMyName (bool asked) { if (asked) { Debug.Log (name); } else { Debug.Log ("don‘t tell you"); } } #region 這里實現IGvrGazeResponder要求的方法 //焦點注視物體的時候執行 public void OnGazeEnter(){ SetGazedAt(true); Debug.Log (name); } //焦點已開物體的時候執行 public void OnGazeExit(){ SetGazedAt (false); Debug.Log ("out"); } //點擊眼鏡盒的觸發器，也就是觸摸屏幕的時候 public void OnGazeTrigger(){ Debug.Log ("觸發"); } #endregion } -
將Building腳本拖給建筑物：
-
點擊Play按鈕就可以看到效果了，大家可以看到焦點對準的物體都會變成綠色，焦點移開后又變成原來的顏色；
- 大功即將告成，現在要做的就是把所看到的物體名字顯示在屏幕上
-
創建GUI文字：將其命名為Building Name，用來呈現建筑物的名稱。
調整合適的距離；
-
創建一個空的游戲對象，命名為GameController,設置Tag為GameController，這樣Building的代碼中就能找到它了。
-
創建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; } } -
拖動GameController腳本給GameController對象：
調整Building代碼與GameController交互使建筑物能改變畫布的文字，具體代碼可以查看gitlab
-
添加一個私有屬性 gameController
private GameController gameController; -
調整Start的代碼，添加通過Tag找到游戲中的GameController，并且創建實例。
//獲取Game Controller對象 GameObject gameControllerObject = GameObject.FindWithTag("GameController"); if (gameControllerObject != null) { gameController = gameControllerObject.GetComponent<GameController>(); } else { Debug.Log("Cannot find 'GameController' script"); } -
調整TellMyName的方法，調用將本建筑物的名字傳給gameController對象，讓它去修改畫布。
//說出本對象的名稱 public void TellMyName (bool asked) { if (asked) { gameController.showBuildingName (this.name); } else { Debug.Log ("don‘t tell you"); } } 點擊play按鈕，查看效果
3.5 在iPhone上體驗
做完這一步就大功告成了。在第一次導出到手機時要做以下這些操作：
打開File菜單下的 Building Setting
選擇iOS，點擊Switch Platform按鈕。
-
點擊Player Settings，在屏幕右邊的Inspector 選擇 Resolution and Presentation 一欄，將Default Orientation設置為Auto Rotation，將Allowed Orientations for Auto Rotation的其他√都去掉只保留Landscape Left;
-
點擊最下方的Other Setting，找到Bundle Identifier 將它設置成你的蘋果開發者認證的賬號的ID；如果沒有的話，需要到蘋果開發者上去設置。您可查看Xcode如何在真機上調試的一些資料。
插上手機 點擊Build and Run ，在過程中Unity會調用Xcode請點擊確定。耐心等待就好了。編譯完成后，就能夠在手機上體驗了。
四、總結
總的來說使用Cardboard的來制作VR是較為簡單和低成本的。雖然文章結束了，但我們還有許多細節還沒有深入的探討。例如，前期的原型設計或者交互設計，畫線框圖已經沒用了，而比較合適的原型工具應該是sketch up、3ds max 一類的三維軟件，而具體的交互方式業內也沒有標準。隨著VR技術的不斷發展，更多優質的解決方案會不斷涌現出來，因此，這是一個需要持續學習和研究的過程。最后，希望這篇文章能夠幫助到大家。
