從產品需求到技術實現,從零開始做VR

4 評論 14419 瀏覽 80 收藏 23 分鐘

前不久,我負責了易班獅子聯盟的“虛擬現實在教育領域應用”的課題研究。雖然是公司內部自發的實驗性項目,但能借這個機會把目前火熱的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)

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

1

準大學生 王曉麗

2

心疼女兒的父親 王老伯

3

忙碌的輔導員 張老師

2. 價值主張(Value Proposition)

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

4

滿足三者需求

經過分析和討論,我們最終提出的價值主張如下:

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

  • 通過趣味游戲的方式,讓學生了解校園環境
  • 在家熟悉校園環境和報到流程
  • 確保學生的安全:避免來校當天走失和迷路的情況
  • 提升報到的效率,減少老師的工作量

使用場景舉例:

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

3. 功能規劃(Feature Defining)

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

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

?識別建筑物是最基礎和最核心的功能,因此其優先級最高,也是本期要完成的目標,其它功能后續進行迭代。

二、 技術選型(Technical Proposal )

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

6

Cardboard的VR眼鏡說白了紙板盒+手機,成本低廉,制作簡單。

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

7

8

9

目前,基于谷歌的VR方案,內容制作有兩種方式:攝影合成,程序開發。下面我們一一介紹一下:

1. 通過拍攝合成

拼接多臺攝影設備進行拍攝,在拍攝完成后合成3D的全景的視頻。目前,歐美和島國小電影已經率先嘗試。

10

某片拍攝現場

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

11

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

12

2. 通過程序開發

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

13

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

14

15

16

配圖源自新浪科技

而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

17

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;

18

創建項目

1. 導入Google Cardboard SDK,選擇 GoogleVRForUnity.unitypackage后點擊import

19

導入Cardboard SDK

20

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

21

3. 在MyAssets中創建Scene文件夾,用來存放我們的場景文件。點擊保存按鈕(command+s),將文件當前文件存儲,命名為stage。

22

3. 創建物體

(1)創建地面

1)右鍵點擊3D Object,選擇Plane。

23

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

24

(2)創建建筑

1)建筑可以從3dsMAX、SketchUp或者Maya導入。為了簡化操作我們用Unity自帶的長方體代替。點擊右鍵選擇3D Object,選擇Cube:

25

2)設置Cube的參數:

  • 名稱:教學樓
  • Position:x=0,y=1,z=0;
  • Scale: x=1,y=2,z=1;

3)將“教學樓”復制出3個出來,調整不同的位置、高度和大小以示區分,注意調整Y坐標高度使底部貼地

27

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

28

(3)添加素材

我們現在要給場景中的物體附上材質,讓地面、建筑物有不同的顏色:

1)在“MyAssets”中創建名為“Materials”文件夾:

29

2)創建用于地面的一個材質球,命名為GroundMaterial,并且選擇好顏色;

30

3)創建用于建筑物的4個材質球,分別命名為:BuildingMaterial、BuildingMaterial1、BuildingMaterial2、BuildingMaterial3,配上不同的顏色來區分;

31

4)分別將這5個材質拖動到對應的物體上面

32

4. 設置相機

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

33

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

35

點擊播放按鈕,我們就可以看到VR效果了。平移(option+鼠標滑動),傾斜(control+鼠標滑動)

36

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

37

38

5. 編寫游戲腳本

現在,指示建筑物顯示名稱的功能還沒有實現。需要我們用C#編寫點腳本,不太難,照著做就好了:

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

39

(2)我們還需要為建筑物添加點代碼,讓相機照射物體上后物體能夠有所反應:

請在MyAssets下面創建一個Scripts文件夾,如圖:

40

在Scripts創建一個名為Building的C#腳本。

41

雙擊點開后,將下面的代碼全部覆蓋過去,如有問題請查看github上的代碼:

1

將Building腳本拖給建筑物:

42

點擊Play按鈕就可以看到效果了,大家可以看到焦點對準的物體都會變成綠色,焦點移開后又變成原來的顏色;

43

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

創建GUI文字:將其命名為Building Name,用來呈現建筑物的名稱。

44

調整合適的距離;

創建一個空的游戲對象,命名為GameController,設置Tag為GameController,這樣Building的代碼中就能找到它了。

45

46

創建GameController腳本,代碼如下:

2

拖動GameController腳本給GameController對象:

47

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

添加一個私有屬性 gameController

3

調整Start的代碼,添加通過Tag找到游戲中的GameController,并且創建實例。

4

調整TellMyName的方法,調用將本建筑物的名字傳給gameController對象,讓它去修改畫布。

5

點擊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;

48

(4)點擊最下方的Other Setting,找到Bundle Identifier 將它設置成你的蘋果開發者認證的賬號的ID;如果沒有的話,需要到蘋果開發者上去設置。您可查看Xcode如何在真機上調試的一些資料。

49

(5)插上手機 點擊Build and Run ,在過程中Unity會調用Xcode請點擊確定。耐心等待就好了。編譯完成后,就能夠在手機上體驗了。

四、總結

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

例如,前期的原型設計或者交互設計,畫線框圖已經沒用了,而比較合適的原型工具應該是sketch up、3ds max 一類的三維軟件,而具體的交互方式業內也沒有標準,需要我們繼續探索。隨著VR技術的不斷發展,更多優質的解決方案會不斷涌現出來,因此,這是一個需要持續學習和研究的過程。

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

 

本文由 @Gold3bear熊泳心 ?原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 屌屌的

    來自江蘇 回復
  2. 非常詳細

    回復
  3. 學習了????

    回復
  4. ?? 很贊!很詳細!~學習了!~

    來自廣東 回復