[2020] GoogleVR APP製作 – 以360全景圖作為背景

如果你還沒安裝Unity或還不了解介面怎麼使用,可先到下面看看其他教學文喔!

  1. Unity 基本安裝與註冊: https://faliangstudio.com/unity-installation/
  2. 推薦 Unity 3D 線上課程:https://faliangstudio.com/online-video/
  3. 推薦 Unity 3D 書籍:https://faliangstudio.com/unity-book/
  4. Unity 實用操作小撇步:https://faliangstudio.com/category/unity/basic-unity/
  5. Unity 發佈 Android 教學:https://faliangstudio.com/unity-android/
  6. Unity 輸出 Xcode 教學 – ios:https://faliangstudio.com/unity-ios-xcode/

下載GoogleVR for Unity的插件

GoogleVR for Unity 插件下載網址:https://developers.google.com/vr/develop/unity/get-started-android

請先到上面網址,下載Unity插件,如果找不到的可以依循下列步驟搜尋唷!

首先先搜尋「Download the Google VR SDK for Unity」標題,點選 releases page (點這連結也可以唷!)。接著就會到GVR SDK for Unity v1.200.1畫面,點選下面的GoogleVRForUnity_1.200.1.unitypackage,進行下載。

套件下載好,並且開好Unity 3D點GoogleVRForUnity_1.200.1.unitypackage兩下進行套件匯入囉!

全景圖搜尋

製作VR環境的背景有兩種方式:

  1. 準備一張全景圖 (可以使用Gopro 拍攝,設備介紹看這篇文章https://faliangstudio.com/vr-ar-mr/)
  2. 可建立全3D模型的環境 (缺點就是花時間建立模型,成本高)

另外,做模型還有個缺點就是…在手機上的模型通常無法做到很寫實,但客戶通常都會要求真實性…所以我們就只能請客戶用拍全景圖的方式拉!

所以我們先到Google 搜尋全景圖,在介紹AR VR MR時候有提過,VR 影片或圖片如果要在Cardboard/VRBox上畫質很清晰的話,畫質需要到達8K。但在Google 搜尋圖片時,如果沒有進行過篩選,通常圖片都很小張,所以我們可以選 「設定」→進階搜尋→圖片大小:大型,選擇出我們要的圖片。

另外提醒,全景圖分為手機拍出來的全景圖360攝影機拍出來的全景圖,下方選擇的圖片….看起來很像兩個圈圈的…就是用360攝影機拍出來的全景圖,如果用手機拍出來的全景圖做VR背景會有接縫喔!需要特別注意!

為什麼手機拍出來的全景圖做VR背景會有接縫呢?

因為VR背景圖的原理是把一張圖捏成一個,那你想想手機拍出來的全景圖捏成一顆球的樣子,四周圍沒有經過處理基本上是不會吻合,當然就會有接縫囉!

知道怎麼塞選全景圖以後就趕快下載一張,並把全景圖拖曳到Unity裡面吧!

建立一個球,將全景圖貼至球上

  1. 在Hierarchy按下滑鼠右鍵 → 3D Object → Sphere(球)
  2. 接下來我們將全景圖直接拖曳到Sphere上,就會看到Sphere外表有全景圖貼圖

Main Camera放置Sphere階層下,位置歸0

為什麼要將Main Camera的位置歸0呢?

我們到GoogleVR資料夾 → Prefabs → 找到GvrEditorEmulator物件,將此物件拉到場景上。此物件功用:可在PC上模擬VR APP模式。原本主攝影機的位置在(0,1,-10),但當我們按下遊戲執行後,攝影機會自動把座標位置歸0,如果這時已放3D模型環境進去,很多人就會開始納悶…我原本場景攝影機都調好了,怎麼遊戲開始後攝影機就跑位…原因就在這邊,因為GvrEditorEmulator物件會讓你的攝影機位置歸0!

解決方式:

  1. 還沒有建立3D環境時就先將攝影機位置歸0
  2. 如果已經有3D環境或VR全景圖背景了,就在要擺放攝影機的位置建立一個空物件,將Main Camera放置在空物件下,攝影機位置歸0

這個案例是直接建立一個Sphere將Main Camera放在Sphere階層下,Main Camera位置歸0。讓Main Camera參考Sphere的座標位置,當我們按下遊戲執行後,攝影機才不會跑位。

Sphere材質球Shader修改為Double sided

攝影機(Main Camera)現在在球的中心點,但為什麼看不到貼在球上的貼圖呢?原因是因為模型的貼圖有所謂的雙面貼圖單面貼圖,為了節省遊戲效能的關係…基本上Unity內建的3D模型(例如:方塊、球、平面)…都只會在表面貼圖,如果要讓他變成雙面貼圖,就需要修改材質球的Shader。

想學習Shader程式語言,可以看看我推薦的書籍,網址:https://faliangstudio.com/unity-book/

使用免費雙面貼圖Shader套件,可以到Unity 商城下載:Double Sided Shaders,下載並匯入。

套件匯入後,點選Sphere → Inspector屬性面板最底下會看到材質球,如果沒有看到材質球屬性面板,請點選球的圖案,就會出現囉!

接著點選Shader → Ciconia Studio → Double Sided → Emissive(自體發光,貼圖會比較亮) → Diffuse

就會看到Game視窗有全景圖出現囉!

但是當按下遊戲執行時,按住Alt+移動滑鼠就可以看360度環景。但會看到下面的問題…360度環景畫面破圖了!!!

原因是因為攝影機由兩個方塊組成一個角錐狀視角,靠近攝影機軸中心的小方塊(叫做Near),大方塊(叫做Far),當在旋轉攝影機時候會發現Near的區塊有部分會顯示在Sphere外圍,造成破圖

因此,如果在遊戲執行下,請先把遊戲執行關閉,不然調好的數值在遊戲關閉後會復原。再直接把攝影機的Near值修改為0.01最小值,讓他趨近於攝影機的軸中心,就能解決這個問題囉!

如果你喜歡我的文章內容,可以幫我拍手、留言並分享給身邊的朋友,讓更多的人看見我的文章。
如果這篇文章有幫助到你,想借你的幾秒用google或FB登入,然後幫我拍手 Like 5次鼓勵

在〈“[2020] GoogleVR APP製作 – 以360全景圖作為背景”〉中有 8 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *