從產品需求到技術實現,從零開始做VR
前不久,我負責了易班獅子聯盟的“虛擬現實在教育領域應用”的課題研究。雖然是公司內部自發的實驗性項目,但能借這個機會把目前火熱的VR從頭到尾研究一把也是挺過癮的。最后,我們小組做了個產品原型和教程,一方面是為了探索VR技術與校園場景的結合更多可能,另外一方面希望也是通過本項目幫助大家快速的了解目前的VR產品是如何制作的。
本文的結構主要按照產品開發的流程來寫的:前期調研(Market Research)、產品定義(Product Defining)、技術選型(Technology Proposal)、產品開發(Developing),除了幫助大家了解整個流程以外,也是為了大家各取所需。目前,所有資料已發布到github上面,歡迎對VR有興趣的童鞋下載:?https://github.com/gold3bear/learn_vr
另外,還要感謝我們課題組的小伙伴,聯盟盟主郭致彥和劉成斌、趙振亮、田廣智等老師。
前期調研(Marketing Research)
目前,網上充斥著各種所謂的權威機構發布的VR調研報告。這些報告大多都持樂觀的態度,但這些報告更像是一種對潮流的追趕。其實無論鞋子多么潮,合不合腳只有自己知道。每個公司情況都不一樣,對于調研我就不展開了。
一、產品設計(Product Defining)
這個課題是一個典型的先定義技術再尋找需求的項目。其背后本質就是為技術合適的使用場景。因此,在產品設計階段我們使用了大量的“頭腦風暴”來收集創意。經過反復討論后,我們將產品目標初步設定為:為即將步入的校園的新生打造一款能夠解決實際需求的VR校園產品。
1. ?畫像 (Persona)
為便于問題探索,我們制作了三類用戶畫像:
準大學生 王曉麗
心疼女兒的父親 王老伯
忙碌的輔導員 張老師
2. 價值主張(Value Proposition)
有沒有一個價值能夠滿足這三類人群的需求呢?
滿足三者需求
經過分析和討論,我們最終提出的價值主張如下:
新生在家就能身臨其境地完成預報到:
- 通過趣味游戲的方式,讓學生了解校園環境
- 在家熟悉校園環境和報到流程
- 確保學生的安全:避免來校當天走失和迷路的情況
- 提升報到的效率,減少老師的工作量
使用場景舉例:
- 在收到入取通知書后,新生用手機掃一掃通知書上的二維碼,就可以下載到迎新的APP并安裝;
- 學生將通知書中附帶的卡紙制作成VR眼鏡;
- 把裝好APP的手機裝入眼鏡盒即可身臨其境地瀏覽校園環境;
- 通過做任務和講解,能夠全方位了解關于學校和報道的情況和問題。
- 最終,當新生真正到學校的時候,其實已經對自己學校有較為熟悉的了解。
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提供了Daydream SDK和Cardboard SDK。用這兩個SDK,可以幫助我們事半功倍。
Daydream 是谷歌新發布的VR方案,從硬件上看Daydream相比于Cardboard就是多了個手柄和舒適度較高的遙控器。需要硬件支持Daydream和VR Play Store。按照目前情況來看,頭套+手柄的售價在500多元。
配圖源自新浪科技
而Cardboard SDK 實際上是Unity3D的素材庫,提供了現成的用于VR制作相關素材和腳本。因此這對熟悉Unity3D的開發者門檻較低。而且Unity3D的腳本主要使用了簡化的C#和JavaScript,對于有一定編程經驗的開發者也是非常簡單便捷的。比Daydream更好的就是兼容Android和iOS。
綜合考慮,在原型制作階段我們可以使用Cardboard進行低成本簡單的虛擬場景制作,等Daydream成熟之后可以考慮再遷移以獲得更好的體驗。而后期條件寬裕的時候可以使用攝影的方式進行制作。
三、 技術實施(Developing)
根據前面的討論和分析,我們需要使用Cardboard實現在查看建筑物建筑物介紹的產品原型。也就是說,當用戶看到這個建筑的時候,我們要能告訴他該建筑的名字。大家可以在Github上查看本項目代碼:https://github.com/gold3bear/learn_vr/tree/master/VR_school
1. 準備工作
Google對Cardboard SDK 的有充分詳細的文檔?。在正式動工前,我們需要做好以下準備:
- 下載最新的版本的Unity 3D。安裝時候需要注意選擇支持安卓導出或者iOS(主要看你針對的平臺)?如何下載和安裝可以看這篇文章
- 下載 Cardboard SDK for Unity,原版下載地址。因為,文件較大從外網下載到本地要花較長時間。幸運的是我已經把整個包上傳到百度云了下載地址。
- 下載安裝最新版的 X-Code(針對iOS開發),如果你是Android那就下載Android的
SDK。
大家可以發現不管是Android還是iOS,都是用相同的Cardboard SDK for Unity,因此在基本開發流程上沒有太大區別。本文接下去只以iOS為例。
2. 開動
打開Unity 3D創建一個名為VR_School的項目,并且確保選擇的項目類型是3D;
創建項目
1. 導入Google Cardboard SDK,選擇 GoogleVRForUnity.unitypackage后點擊import
導入Cardboard SDK
2. 創建在Assets中創建一個新的文件夾 MyAssets。這個文件夾主要用來放置我們自定義的素材。
3. 在MyAssets中創建Scene文件夾,用來存放我們的場景文件。點擊保存按鈕(command+s),將文件當前文件存儲,命名為stage。
3. 創建物體
(1)創建地面
1)右鍵點擊3D Object,選擇Plane。
2)選擇平面,將其命名為 Ground,Transform中的參數Scale 設置為x=10,y=0,z=10
(2)創建建筑
1)建筑可以從3dsMAX、SketchUp或者Maya導入。為了簡化操作我們用Unity自帶的長方體代替。點擊右鍵選擇3D Object,選擇Cube:
2)設置Cube的參數:
- 名稱:教學樓
- Position:x=0,y=1,z=0;
- Scale: x=1,y=2,z=1;
3)將“教學樓”復制出3個出來,調整不同的位置、高度和大小以示區分,注意調整Y坐標高度使底部貼地
4)分別命名為體育館、宿舍樓、食堂
(3)添加素材
我們現在要給場景中的物體附上材質,讓地面、建筑物有不同的顏色:
1)在“MyAssets”中創建名為“Materials”文件夾:
2)創建用于地面的一個材質球,命名為GroundMaterial,并且選擇好顏色;
3)創建用于建筑物的4個材質球,分別命名為:BuildingMaterial、BuildingMaterial1、BuildingMaterial2、BuildingMaterial3,配上不同的顏色來區分;
4)分別將這5個材質拖動到對應的物體上面
4. 設置相機
(1)我們這一步是需要將相機放這4個建筑物的中間。選中相機,你可以在小窗口上看到相機視角。相機的Position 參數可以設置為:x=0,y=1,z=0;這樣相機就移動到4個物體的中間了。
(2)將相機變成VR的雙攝像頭相機。操作很簡單,打開Assets下的GoogleVR下面的,拖動到heriach面板中就可以了。
點擊播放按鈕,我們就可以看到VR效果了。平移(option+鼠標滑動),傾斜(control+鼠標滑動)
(3)為了方面顯示,我們給相機添上焦點。將”Assets/GoogleVR/Prefabs/UI”的GvrReticle拖動到攝像機中。在次點擊play按鈕,可以看到視頻中心有一個焦點。
5. 編寫游戲腳本
現在,指示建筑物顯示名稱的功能還沒有實現。需要我們用C#編寫點腳本,不太難,照著做就好了:
(1)拖入文件夾Google/Scripts/UI中的GvrGaze腳本至相機,這樣相機就擁有和物體交互的能力了。是不是很簡單?
(2)我們還需要為建筑物添加點代碼,讓相機照射物體上后物體能夠有所反應:
請在MyAssets下面創建一個Scripts文件夾,如圖:
在Scripts創建一個名為Building的C#腳本。
雙擊點開后,將下面的代碼全部覆蓋過去,如有問題請查看github上的代碼:
將Building腳本拖給建筑物:
點擊Play按鈕就可以看到效果了,大家可以看到焦點對準的物體都會變成綠色,焦點移開后又變成原來的顏色;
(3)大功即將告成,現在要做的就是把所看到的物體名字顯示在屏幕上
創建GUI文字:將其命名為Building Name,用來呈現建筑物的名稱。
調整合適的距離;
創建一個空的游戲對象,命名為GameController,設置Tag為GameController,這樣Building的代碼中就能找到它了。
創建GameController腳本,代碼如下:
拖動GameController腳本給GameController對象:
調整Building代碼與GameController交互使建筑物能改變畫布的文字,具體代碼可以查看github。
添加一個私有屬性 gameController
調整Start的代碼,添加通過Tag找到游戲中的GameController,并且創建實例。
調整TellMyName的方法,調用將本建筑物的名字傳給gameController對象,讓它去修改畫布。
點擊play按鈕,查看效果。
6.?在iPhone上體驗
做完這一步就大功告成了。在第一次導出到手機時要做以下這些操作:
(1)打開File菜單下的 Building Setting
(2)選擇iOS,點擊Switch Platform按鈕。
(3)點擊Player Settings,在屏幕右邊的Inspector 選擇 Resolution and Presentation 一欄,將Default Orientation設置為Auto Rotation,將Allowed Orientations for Auto Rotation的其他√都去掉只保留Landscape Left;
(4)點擊最下方的Other Setting,找到Bundle Identifier 將它設置成你的蘋果開發者認證的賬號的ID;如果沒有的話,需要到蘋果開發者上去設置。您可查看Xcode如何在真機上調試的一些資料。
(5)插上手機 點擊Build and Run ,在過程中Unity會調用Xcode請點擊確定。耐心等待就好了。編譯完成后,就能夠在手機上體驗了。
四、總結
總的來說使用Cardboard的來制作VR是較為簡單和低成本的。雖然文章結束了,但我們還有許多細節還沒有深入地探討。
例如,前期的原型設計或者交互設計,畫線框圖已經沒用了,而比較合適的原型工具應該是sketch up、3ds max 一類的三維軟件,而具體的交互方式業內也沒有標準,需要我們繼續探索。隨著VR技術的不斷發展,更多優質的解決方案會不斷涌現出來,因此,這是一個需要持續學習和研究的過程。
最后,希望這篇文章能夠幫助到大家。
本文由 @Gold3bear熊泳心 ?原創發布于人人都是產品經理?,未經許可,禁止轉載。
屌屌的
非常詳細
學習了????
?? 很贊!很詳細!~學習了!~