WebXR是一種具有巨大潛力的技術，但是目前，它提供的開發工具比獨立VR開發差得多，在獨立VR開發中，我們使用Unity和Unreal Engine。Mozilla 為沉浸式Web做了大量工作，為Unity開發一個WebXR導出器使所有Unity開發人員都能使用他們已經熟知的工具建立WebXR體驗。該項目可以追溯到2年前，但是最近WebXR插件已得到改進和更新。
作為一個Unity開發者，我認為這是一個非常重要的解決方案。雖然有些bug，生成的代碼并不是很容易修改的(就像它在A-frame中發生的那樣)，但是最後，我可以使用工具非常容易地建立WebXR體驗。我花了幾天的時間來嘗試這個插件，是以讓我來告訴你如何在Unity中建立你的第一個WebXR體驗!
要求
首先，請確定具有遵循本教程所需的所有工具。你需要：
1.Unity遊戲引擎。如果你從GitHub上下載下傳WebXR插件，可以使用Unity 2018 LTS(2018.4.20);如果從Unity Asset Store下載下傳，則版本至少是Unity 2019.3.4。在這個項目中我使用Unity 2019.3.11 。確定你的Unity已安裝了WebGL支援，否則請使用Unity Hub進行添加：
2.具有SSL證書的Web伺服器。可以是PC上的本地伺服器(Apache，IIS)、本地虛拟機上的伺服器或你擁有的Web伺服器。根據我的經驗，出于安全原因，在磁盤上啟動WebXR頁面無法使用它打開浏覽器，是以最好使用一台伺服器。如何做到這一點不是本教程的目的，但是如果你有一個網站空間(如個人部落格這樣的)，或者使用Glitch在你的計算機上安裝LAMP / WAMP伺服器。建議你使用自己的網站空間(請不要忘記SSL證書)。
環境設定
打開Unity，建立一個新項目。當提示建立什麼樣的項目時，選擇通用渲染管道(URP)或輕量級渲染管道(LWRP)，這取決于你的Unity版本。對于WebXR來說，這并不是必須的步驟，隻是Mozilla為示範而選擇的格式。建立項目之後，轉到Asset Store頁籤并查找WebXR導出器。你會找到一個Mozilla的插件。單擊它并将其導入到你的項目中。
選擇File->Build Settings…->Player Settings，確定選擇的平台是PC, Mac&Linux，在将彈出的設定視窗中，進入XR Settings，點選“Virtual Reality supported”。這将確定我們可以在Unity裡面預覽内容。
要同時調整編輯器中的輸入，你必須用Mozilla提供的内容替換檔案
/ProjectSettings/InputManager.asset
下載下傳位址：
https://raw.githubusercontent.com/MozillaReality/unity-webxr-export/master/ProjectSettings/InputManager.asset
請記住，你必須在Unity外部執行此操作，因為項目設定位于Assets檔案夾外部。可以使用檔案資料總管替換整個檔案，或使用記事本++替換其内容。
現在你可以回到File->Build Settings… 選擇平台WebGL，然後點選“Switch Platform”，讓Unity切換到WebGL模式。
回到Player Settings頁面，找到“Resolution And Presentation”，選擇WebXR
關于插件
該插件将WebGL和WebXR檔案夾添加到項目中。導出器基本上會建立一種支援虛拟現實的特殊類型的WebGL應用程式，這就是為什麼這兩個目錄都存在的原因。
最有趣的代碼在WebXR檔案夾中：
- Config檔案夾包含一些可編寫腳本的對象，這些對象具有Unity Input和VR操作之間的映射。Mozilla已經提供了兩個示例，但是我們可以根據需要自由定制應用程式。
- 模型包含用于雙手的模型及其動畫。請注意，Mozilla已經提供了一個簡單的手勢模型以及一個基本的“抓握”動畫，但是你可以自由使用所需的手勢模型。
- 預制件擁有WebXR應用程式使用的主要預制件，其中之一是WebVR錄影機(稍後會詳細介紹)。
- 樣本包含“沙漠”場景，從中你可以學習如何與對象進行一些基本的互動
Prefabs檔案夾中包含的WebXRCameraSet預制件是你将要使用的最重要的東西。你會看到每隻手都有關聯的Animator和RigidBody，其子對象是手的模型和骨骼。你可以替換模型，可以添加新的手部動畫。請注意，預設的預制物不會觸發與手指移動相關的任何動畫，需要自己編寫相關動畫腳本(本教程後面的内容會對此進行更多介紹)。與每隻手相關聯的WebXRController腳本是你可以查詢以獲得該手的狀态的腳本，并且它獲得一個InputMap參數，通過該參數，你可以決定如何将标準Unity輸入映射到VR輸入。
詳細連結：https://github.com/MozillaReality/unity-webxr-export/blob/master/docs/controllers.md
效果預覽
我們可以先運作一個WebXR場景嘗嘗鮮，打開場景WebXR，位于
AssetsWebXRSamplesDesert。
打開它，你會看到完全相同的場景廣告在Mozilla的網站上。你可以戴上VR眼鏡，按下Unity中的播放按鈕，如果一切都配置正确，你就可以在VR中看到一切。你可以取離你很近的立方體和球體并與它們互動。
場景建立
在檔案夾Assets Scenes中建立一個新場景，并将其命名為GrayCube。打開GrayCube場景，然後移除主錄影機。從Assets WebXR Prefabs檔案夾中 擷取預制WebXRCameraSet ，并将其放入場景中。基本上，我們已經用VR錄影機代替了标準錄影機。請注意，你不必從原點擡起此錄影機，因為在執行程式時，錄影機會自動移至正确的高度。
現在是添加立方體的時候了。在Hierarchy頁籤中，單擊滑鼠右鍵，選擇3D Object -> Cube。現在使用場景頁籤中的3D箭頭移動立方體到你想要的地方。儲存場景，按下播放按鈕，你可以看到整個場景和你的手部模型在VR眼鏡裡。
互動
Mozilla提供的預置隻提供非常基本的功能，可以根據需要擴充它。我們需要實作手的張開與閉合。回到Project頁籤，在AssetsScripts中建立一個新的c#腳本，并将其命名為CloseHands.cs。将它拖放到場景中的WebXRCameraSethandL和WebXRCameraSethandR遊戲對象中。現在在Visual Studio中輕按兩下打開腳本，用這個代碼替換：
using System.Collections;using System.Collections.Generic;using UnityEngine;using WebXR;/// /// Script to close your hand with trigger or grip buttons/// [RequireComponent(typeof(Animator))][RequireComponent(typeof(WebXRController))]public class CloseHands : MonoBehaviour{ /// /// Reference to the animator of the hand /// private Animator m_animator; /// /// Reference to the controller of the hand /// private WebXRController m_controller; /// /// Awake /// void Awake() { m_animator = GetComponent(); m_controller = GetComponent(); } /// /// Update /// void Update() { // Understand what frame of the animation to show: // - If trigger is pressed, the hand is closed // - If the grip is pressed, see how much it is pressed, and close the hand of that amount float normalizedTime = m_controller.GetButton("Trigger") ? 1 : m_controller.GetAxis("Grip"); // Use the animator to show that pose m_animator.Play("Take", -1, normalizedTime); }}
代碼非常簡單：我們獲得了與手相關聯的Animator及其WebXRController。在每一幀中，我們都向WebXRController查詢按鈕的狀态，并使用Animator以此來改變手的形狀。Animator預設使用的動畫是Mozilla提供的簡單的“貼手”動畫，并且系統會根據按鈕的狀态顯示該動畫的特定幀。按下“握力”按鈕的次數越多，手的閉合力就越大。
讓我們添加另一個簡單的功能來為立方體着色!回到Project頁籤，在Scripts檔案夾中建立一個新腳本，并将其命名為ColorCube.cs。然後将其拖放到層次結構中的WebXRCameraSethandL gameobject上，将其添加到你的左手上。腳本的代碼應該是這樣的:
using System.Collections;using System.Collections.Generic;using UnityEngine;using WebXR;/// /// Chanages the color of the cube when the trigger gets pressed/// [RequireComponent(typeof(WebXRController))]public class ColorCube : MonoBehaviour{ /// /// Reference to the controller of the hand /// private WebXRController m_controller; /// /// Awake /// void Awake() { m_controller = GetComponent(); } /// /// Update /// void Update() { // If the button is pressed, change the color of the cube with a random color if (m_controller.GetButton("Trigger")) GameObject.Find("Cube").GetComponent().material.SetColor("_BaseColor", new Color(Random.value, Random.value, Random.value)); }}
問題在于，如果按住該按鈕，它會不斷改變每一幀的顔色，進而産生迪斯科舞廳的效果。如果你希望每次按一下觸發器，則顔色隻會更改一次，是以代碼應為以下代碼：
using System.Collections;using System.Collections.Generic;using UnityEngine;using WebXR;/// /// Chanages the color of the cube when the trigger gets pressed/// [RequireComponent(typeof(WebXRController))]public class ColorCube : MonoBehaviour{ /// /// Reference to the controller of the hand /// private WebXRController m_controller; /// /// Awake /// void Awake() { m_controller = GetComponent(); } /// /// Update /// void Update() { // If the button is pressed, change the color of the cube with a random color if (m_controller.GetButtonDown("Trigger")) GameObject.Find("Cube").GetComponent().material.SetColor("_BaseColor", new Color(Random.value, Random.value, Random.value)); }}
它和之前是一樣的，我們隻是用了GetButtonDown而不是GetButton。按下播放鍵，你會看到所有的東西都被修正了。你可以雙手合十，當你按下左手上的觸發按鈕時，cube就會以正确的方式改變顔色!(在做我的測試時，我注意到有時GetButtonDown方法會卡住，隻能工作一次。這看起來像一個插件的錯誤，我希望它将很快得到修複)。
部署運作
前往File-> Build Settings… ，删除“Scenes To Build”清單中的預設場景，點選“Add Open Scenes”按鈕添加目前場景。之後，按Build按鈕，建構WebXR會花費很多時間，請注意，Mozilla建議使用“Build and Run”，這樣你就可以動态地測試你的應用程式，而不會與web伺服器發生沖突，但這對我來說從來都不适用。是以，我建議你使用這種替代方法：
建構完成後，你将擁有一個包含WebXR體驗的檔案夾，以及一個index.html檔案和許多其他内容。将該檔案夾放入網絡伺服器(本地或線上)中。之後，嘗試通過使用浏覽器直接通路剛剛建構的index.html檔案的網址來通路它。但是請記住：
- 你必須使用相容WebXR的浏覽器(Chrome和Firefox都可以，Edge也可以)；
- 如果你沒有網絡伺服器，而隻是嘗試使用浏覽器通路硬碟驅動器上的index.html檔案，則安全限制将阻止你的應用運作；
- 如果你使用http而不是https通路網頁，那麼它将無法正常運作。通過在URL中鍵入https：//來強制使用https；
- 如果Firefox提示你是否要在該頁面上允許VR，而你沒有及時單擊“允許”，它将無法使用。我的建議是單擊“記住我的選擇”，然後單擊授權彈出視窗中的“允許”，然後重新加載頁面。這樣，你可以確定每次加載體驗時，始終從一開始就啟用VR。
如果沒有任何彈出視窗表明你沒有VR頭盔或相容VR的浏覽器，則一切正常。
點選浏覽器右下角的眼鏡圖示，你可以看到：移動你的手并更改立方體的顔色。
項目連結參考：
https://github.com/MozillaReality/unity-webxr-export
檢視完整英文視訊教程可以關注公衆号【AIRX社群】回複：WebXR視訊教程