前不久卷拘，我負(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í)無論鞋子多么潮焰望，合不合腳只有自己知道骚亿。對(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）
為便于問題探索迎膜，我們制作了三類用戶畫像：
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)景舉例：
- 在收到入取通知書后簸呈，新生用手機(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 的方案。
Cardboard的VR眼鏡說白了紙板盒+手機(jī)鲸睛，成本低廉娜饵，制作簡(jiǎn)單。
Google提供的了相關(guān)的圖紙和文檔（如無法訪問谷歌官辈，請(qǐng)自行解決）箱舞。大家可以自行用紙板制作，也可以從某寶購買拳亿，售價(jià)從幾元到數(shù)十元不等晴股。
目前，基于谷歌的VR方案肺魁，內(nèi)容制作有兩種方式：攝影合成电湘，程序開發(fā)。下面我們一一介紹一下：
1. 通過拍攝合成
它是指拼接多臺(tái)攝影設(shè)備進(jìn)行拍攝鹅经，在拍攝完成后合成3D的全景的視頻寂呛。目前，歐美和島國小電影已經(jīng)率先嘗試瘾晃。
從上圖可以看出贷痪，這對(duì)拍攝和環(huá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的素材庫，提供了現(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í)候拓萌，我們能告訴他該建筑的名字岁钓。可以在Github上查看本項(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)下載到本地要花較長時(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)
-
打開Unity 3D創(chuàng)建一個(gè)名為VR_School的項(xiàng)目，并且確保選擇的項(xiàng)目類型是3D靠闭；
創(chuàng)建項(xiàng)目 -
導(dǎo)入Google Cardboard SDK帐我，選擇 GoogleVRForUnity.unitypackage后點(diǎn)擊import
導(dǎo)入Cardboard SDK
導(dǎo)入Cardboard SDK -
創(chuàng)建在Assets中創(chuàng)建一個(gè)新的文件夾 MyAssets坎炼。這個(gè)文件夾主要用來放置我們自定義的素材
自定義素材 -
在MyAssets中創(chuàng)建Scene文件夾，用來存放我們的場(chǎng)景文件拦键。點(diǎn)擊保存按鈕（command+s）谣光，將文件當(dāng)前文件存儲(chǔ)，命名為stage芬为。
3.3 創(chuàng)建物體
-
創(chuàng)建地面
-
右鍵點(diǎn)擊3D Object萄金，選擇Plane。
-
選擇平面媚朦，將其命名為 Ground氧敢，Transform中的參數(shù)Scale 設(shè)置為x=10,y=0,z=10
-
-
創(chuàng)建建筑：
-
建筑可以從3dsMAX、SketchUp或者M(jìn)aya導(dǎo)入询张。為了簡(jiǎn)化操作我們用Unity自帶的長方體代替孙乖。點(diǎn)擊右鍵選擇3D Object，選擇Cube:
-
設(shè)置Cube的參數(shù)：
- 名稱:教學(xué)樓
- Position:x=0,y=1,z=0;
- Scale: x=1,y=2,z=1;
-
將“教學(xué)樓”復(fù)制出3個(gè)出來份氧，調(diào)整不同的位置唯袄、高度和大小以示區(qū)分，注意調(diào)整Y坐標(biāo)高度使底部貼地
-
分別命名為體育館半火、宿舍樓越妈、食堂
-
-
添加素材
我們現(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ī)
-
我們這一步是需要將相機(jī)放這4個(gè)建筑物的中間逞带。選中相機(jī)，你可以在小窗口上看到相機(jī)視角纱新。相機(jī)的Position 參數(shù)可以設(shè)置為：x=0,y=1,z=0;這樣相機(jī)就移動(dòng)到4個(gè)物體的中間了展氓。
-
將相機(jī)變成VR的雙攝像頭相機(jī)。操作很簡(jiǎn)單脸爱，打開Assets下的GoogleVR下面的遇汞，拖動(dòng)到heriach面板中就可以了。
點(diǎn)擊播放按鈕，我們就可以看到VR效果了空入。平移（option+鼠標(biāo)滑動(dòng)）繁扎，傾斜（control+鼠標(biāo)滑動(dòng)）
為了方面顯示冷尉，我們給相機(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)腳本递鹉，不太難，照著做就好了:
-
拖入文件夾Google/Scripts/UI中的GvrGaze腳本至相機(jī),這樣相機(jī)就擁有和物體交互的能力了藏斩。是不是很簡(jiǎn)單?
我們還需要為建筑物添加點(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)移開后又變成原來的顏色；
- 大功即將告成怠益，現(xiàn)在要做的就是把所看到的物體名字顯示在屏幕上
-
創(chuàng)建GUI文字：將其命名為Building Name仪搔，用來呈現(xiàn)建筑物的名稱。
調(diào)整合適的距離蜻牢；
-
創(chuàng)建一個(gè)空的游戲?qū)ο罂具郑麨镚ameController,設(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í)要做以下這些操作：
打開File菜單下的 Building Setting
選擇iOS框往，點(diǎn)擊Switch Platform按鈕。
-
點(diǎn)擊Player Settings闯捎，在屏幕右邊的Inspector 選擇 Resolution and Presentation 一欄椰弊，將Default Orientation設(shè)置為Auto Rotation，將Allowed Orientations for Auto Rotation的其他√都去掉只保留Landscape Left;
-
點(diǎn)擊最下方的Other Setting瓤鼻，找到Bundle Identifier 將它設(shè)置成你的蘋果開發(fā)者認(rèn)證的賬號(hào)的ID秉版；如果沒有的話，需要到蘋果開發(fā)者上去設(shè)置茬祷。您可查看Xcode如何在真機(jī)上調(diào)試的一些資料清焕。
插上手機(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í)和研究的過程。最后灌灾，希望這篇文章能夠幫助到大家搓译。
