WebXR 基礎
WebXR，其核心是WebXR 裝置 API，提供了將增強現實 (AR) 和虛擬現實 (VR) 帶到 Web 所需的功能。這些技術統稱為混合現實 (MR) 或交叉現實 (XR)。混合現實是一個龐大而複雜的主題，需要學習很多知識，並需要整合許多其他 API 才能為使用者創造引人入勝的體驗。
本指南概述了 WebXR 是什麼以及它是如何工作的，以及開始為 Web 開發增強現實和虛擬現實體驗所需的基礎知識。
WebXR 是什麼，不是什麼
WebXR 是一個 API，供 Web 內容和應用程式用於與混合現實硬體（例如 VR 頭顯和整合增強現實功能的眼鏡）進行介面。這包括管理渲染檢視以模擬 3D 體驗的過程，以及感知頭顯（或其他運動感測裝置）的運動並提供所需資料以更新顯示給使用者的影像的能力。
WebXR 還支援接受來自控制裝置的輸入，例如手持 VR 控制器或專用混合現實遊戲手柄。
WebXR 不是渲染技術，不提供管理 3D 資料或將其渲染到顯示器的功能。這是一個需要牢記的重要事實。雖然 WebXR 管理場景繪製時的時間、排程和各種視角，但它並不知道如何載入和管理模型，也不知道如何渲染和紋理它們，等等。這部分完全由您決定。幸運的是，WebGL 和各種基於 WebGL 的框架和庫可用於使其更容易處理所有這些問題。
WebXR 與 WebVR 有何不同？
WebVR 被認為是一個實驗性 API，旨在幫助規範編寫者確定在 Web 上建立虛擬現實 API 的最佳方法。瀏覽器實現者將 WebVR 支援新增到瀏覽器中，允許 Web 開發人員進行實驗。但很快就清楚，要完成 Web 上的虛擬現實 API，最好是開始一個新規範，而不是試圖“修復”WebVR。
這導致了 WebXR 的誕生。根本區別在於 WebXR 不僅支援虛擬現實，還支援增強現實，它將虛擬物件與使用者的周圍環境融合在一起。
另一個關鍵區別是 WebXR 集成了對與大多數混合現實頭顯一起使用的高階輸入控制器的支援，而 WebVR 則依賴於Gamepad API來支援控制器。在 WebXR 中，主要的選擇和擠壓動作透過事件直接支援，而其他控制元件則透過Gamepad物件的特殊 WebXR 特定實現提供。
基本概念
在深入細節之前，讓我們考慮一些在學習如何開發 XR 程式碼之前需要了解的基本概念。
視野
視野 (FOV) 一詞適用於任何視覺技術，從老式膠片相機到現代數字攝像機，包括計算機和移動裝置中的相機。
視野是什麼？
視野是您能夠看到環境的範圍。視野的寬度，以度或弧度表示，測量為定義從視野的最左邊緣到最右邊緣的弧線的角度。
人眼能夠容納約 135° 的 FOV。假設一個人有兩隻健康的眼睛，總視野最終約為 200° 到 220° 寬。為什麼兩隻眼睛的 FOV 更寬，但不是單眼 FOV 的兩倍？這是因為兩隻眼睛的 FOV 大部分重疊。這種重疊為我們提供了深度感知，其寬度約為 115°。在重疊區域之外，我們的視力恢復到單眼。
這裡顯示的圖演示了 FOV 的概念：左眼藍色楔形，右眼紅色楔形。淺棕色重疊區域是觀看者具有雙眼視覺並可以感知深度的地方。如果仔細觀察，您會發現每隻眼睛看到的骰子略有不同，組合檢視將兩者融合成立體形狀。
通常，應用程式只定義和管理水平 FOV。有關更多詳細資訊，請參閱3D 光學。
視野與混合現實裝置
為了獲得足夠寬的視野，使使用者的眼睛被欺騙相信虛擬世界完全環繞他們，FOV 至少需要接近雙眼視覺區域的寬度。基本頭顯通常從 90° 左右開始，而最好的頭顯通常具有約 150° 的視野。由於 FOV 取決於鏡頭的大小以及它們與使用者眼睛的距離，因此在不將鏡頭安裝到使用者眼球中的情況下，FOV 的寬度會受到限制。
寬 FOV 可以顯著提高使用者的沉浸感。但是，增加 FOV 也會增加頭顯的重量和成本。
自由度
自由度一詞表示使用者在虛擬世界中的移動自由度。這直接關係到 WebXR 硬體配置能夠識別並再現到虛擬場景中的移動型別。
圖：顯示 3 自由度硬體可能移動的圖：偏航、滾動和俯仰。 
旋轉運動自由度
前三個自由度是旋轉的。旋轉自由度是
- 俯仰：向上和向下看
- 偏航：向左和向右看
- 滾動：向左和向右傾斜
在所有這些情況下，觀看者保持在空間中的同一位置，同時圍繞三個軸中的一個或多個軸旋轉以改變他們看的方向。一個具有兩個自由度的系統可以感知使用者何時向左和向右或向上和向下看，但不能報告任何其他型別的移動。
典型的基線頭顯提供三個自由度，識別圍繞所有三個軸的旋轉。這通常被稱為3DoF。
平移運動自由度
另外三個自由度是平移的，提供感知空間中移動的能力：向前和向後、向左和向右、向上和向下。對所有六個自由度的支援稱為6DoF。
一些更高階的頭顯至少提供對平移運動檢測的最小支援，但為了捕捉空間中更顯著的運動，通常需要外部感測器，例如相機（使用可見光或紅外線）。
WebXR 會話模式
WebXR 使用相同的 API 支援增強現實 (AR) 和虛擬現實 (VR) 會話。在建立會話時指定要建立的會話型別。這透過為要建立的會話型別指定適當的會話模式字串來完成。
虛擬現實
在 VR 環境中，整個影像由您的應用程式或站點以數字方式建立，從前景物件一直到背景或天空盒。您的幀繪製程式碼將必須在每一幀期間重新繪製每個檢視的每個畫素，以避免留下偽影。某些平臺可能會向您提供先前已清除的幀，而其他平臺可能會透過不擦除幀緩衝區來最佳化效能，以避免每幀觸控每個畫素兩次。
WebXR 中有兩種 VR 會話模式可用：內聯和沉浸式。前者由會話模式字串inline指定，在 Web 瀏覽器中文件的上下文中呈現渲染場景，不需要特殊的 XR 硬體即可檢視。沉浸式會話模式使用會話模式immersive-vr表示。此會話模式需要 XR 裝置（例如頭顯），並使用顯示給使用者每隻眼睛的顯示器用渲染場景替換整個世界。
增強現實
在增強現實 (AR) 中，使用者看到您渲染的影像呈現在他們周圍的物理真實世界環境中。由於 AR 始終是一種沉浸式體驗，其中場景是使用者周圍的整個世界（而不是封閉在螢幕上的盒子中），因此唯一的 AR 會話模式是immersive-ar。
有兩種基本型別的 AR 裝置
- 使用相機捕捉使用者面前的世界，在影像上方渲染 WebXR 內容，然後將影像顯示在螢幕上的裝置。這些裝置包括手機，它們在裝置螢幕上以 2D 呈現顯示結果場景，以及使用一對相機（每隻眼睛一個）以立體方式捕捉場景以保持世界深度的眼鏡，然後為每隻眼睛渲染 WebXR 場景，並用該眼睛捕捉的背景代替。
- 使用透明眼鏡讓使用者看到世界，同時將渲染影像疊加在場景上方的裝置。因此，使用者直接看到真實世界，而不是一系列數字照片。
這兩種型別的裝置都應該能夠呈現 VR 會話。WebXR 通常不關心您使用的是哪種型別的裝置，渲染過程幾乎與 VR 完全相同，只是在渲染每幀之前不擦除背景或天空盒。
WebXR 硬體型別
最簡單的 XR 演示涉及將場景直接渲染到使用者螢幕，無論是在 Web 文件的上下文中，還是在全屏模式下。當用戶沒有專用 XR 裝置，或者當用戶在手機或其他手持裝置上檢視 AR 或 VR 應用程式時，這種情況最常見。
更簡單、價格更低的 XR 裝置通常使用整合計算機或連線到智慧手機，本質上是使用移動 CPU 和 GPU 來執行應用程式、渲染影像並將其顯示給使用者。更高功率的解決方案通常將應用程式執行和圖形處理解除安裝到外部裝置，例如臺式計算機，並使用電纜連線到計算機或使用無線網路接收影像以顯示給使用者。
頭顯
大多數沉浸式 VR 體驗都使用某種護目鏡或頭顯。VR 頭顯佩戴在頭部，帶有固定在頭部後面的綁帶，以及一個或兩個顯示器，其螢幕透過透鏡聚焦到眼睛中。透過向每隻眼睛呈現略微不同的影像，可以創造深度幻覺，為使用者提供模擬的 3D 體驗。
絕大多數頭顯使用一個顯示器，其幀被分成兩半，一半用於左眼的檢視，一半用於右眼的檢視。例如，如果頭顯使用 2560x1440 螢幕，左半部分用於左眼的檢視，右半部分用於右眼的檢視，則幀緩衝區如下使用
最簡單的頭顯沒有整合感測器，並將螢幕的每一半聚焦到相應的眼睛中。一個常見的例子是Google Cardboard，這是一種谷歌首次建立的頭顯，可以使用紙板或其他廉價材料廉價製造。這些裝置通常透過將手機卡入頭顯，以便其螢幕和板載圖形處理器可用於渲染和顯示 XR 場景。
更高階的頭顯具有整合顯示器，並使用彈性或綁帶或帶魔術貼閉合的綁帶固定在頭部。這些頭顯可能包括整合揚聲器和麥克風，和/或用於連線外部揚聲器和麥克風的聯結器。此外，這些頭顯可能具有各種感測器，用於檢測頭顯在空間中移動時的情況。包含的感測器型別和數量將決定使用者擁有的自由度。
護目鏡和眼鏡
XR 護目鏡與頭顯類似，它們都涉及將圖形顯示錶面放置在眼睛前方，以渲染模擬場景深度所需的場景檢視。
不同之處在於，護目鏡透射真實世界，將渲染影像疊加在使用者的物理環境之上。這不是透過數字再現世界來完成的，而對於完整的頭顯來說這是必需的。相反，顯示錶面是透明的，如果不顯示任何東西，則基本上與佩戴普通眼鏡相同。繪製物件時，它們會繪製在護目鏡的鏡片上，部分或完全阻擋物理環境透過鏡片的遮擋部分被看到。
CAVE
Cave Automated Virtual Environment (CAVE) 是一種沉浸式 VR 環境，其中場景投影或以其他方式顯示在牆壁（以及可能的天花板和/或地板）上，從而完全將使用者包圍在模擬中，並允許他們沉浸在場景中。使用者佩戴 3D 眼鏡，既為投影影像新增 3D 效果，又為系統提供了一種將前景物件渲染到世界中的方法。
使用者的活動可以透過使用者佩戴或持有的運動感測器進行監控，或者越來越普遍地透過檢測使用者運動的紅外攝像頭進行監控。放置在房間周圍的揚聲器也提供沉浸式聲音。
這些在日常使用者中並不常見；它們大多是實驗性的，用於演示目的，或由大型組織使用。一個缺點是 CAVE 無法模擬比牆壁更近的任何東西。
重要的健康和安全提示
因為建立虛擬 3D 世界的整個過程本質上是一種技巧，它利用我們對眼睛如何收集光線以及大腦如何解釋所收集資料的理解，所以重要的是要記住，作為設計師和開發人員，軟體設計人員和開發人員有責任比平時更加小心，以確保結果是正確的。
虛擬現實眩暈症
虛擬現實眩暈症是一種症狀，患者在體驗虛擬現實期間，有時在體驗後短時間內，會感到不適、迷失方向，甚至嚴重的噁心。
關於虛擬現實究竟是什麼導致一些人感到不適或噁心的理論有很多，其中大多數都集中在這樣的想法上：即使是大腦認為應該發生的事情與實際看到的事情之間的細微差異也可能導致這些症狀。
缺陷、錯位或變形可能會混淆眼睛和大腦，導致從眼睛疼痛或頭痛到某些情況下的眩暈、頭暈或潛在的嚴重噁心。考慮到頭顯的包羅永珍的性質，警惕任何可能引發癲癇發作的顯示內容也很重要；如果影像引起不適，使用者可能無法快速將視線從您呈現的影像上移開。
物理風險
沉浸式虛擬現實的另一個潛在問題是使用者在戴著頭顯在房間裡移動時與物理障礙物碰撞。除非他們處於安全環境中，否則提供限制他們移動的提示很重要，例如透過模擬在他們的物理環境中已知是安全的空間。
如果使用者的頭顯連線到裝置，最好嘗試確保不會提示或誘使使用者以拉扯頭顯線纜的方式移動，這不僅可能造成傷害，還可能對使用者的頭顯或裝置（無論是手機還是電腦）造成重大損壞。
如果您有任何可能對使用者造成風險的內容，您應該提供警告訊息。同樣，值得提醒使用者儘可能保持坐姿，並提醒使用者在佩戴頭顯時如果體驗是完全沉浸式虛擬現實，則要謹慎移動。安全總比後悔好！
框架的作用
因為 3D 圖形——尤其是混合現實——涉及大量通常複雜的數學、資料管理和其他複雜任務，所以在大多數情況下，您不太可能直接使用 WebGL 來渲染場景。相反，您可能會透過使用基於 WebGL 構建的框架或庫來完成大部分工作，以使其更方便使用。
使用框架而不是直接使用 WebGL API 的一個特殊好處是庫傾向於實現虛擬攝像機功能。OpenGL（以及因此 WebGL 擴充套件）不直接提供攝像機檢視，使用模擬攝像機的庫可以使您的工作變得非常容易，尤其是在構建允許在虛擬世界中自由移動的程式碼時。
由於WebGL用於將 3D 世界渲染到 WebXR 會話中，您應該首先熟悉 WebGL 的一般用法，以及 3D 圖形的基礎知識。
通用 3D 框架
這些框架適用於通用程式設計以及當您想自己編寫邏輯時的遊戲開發。它們旨在建立和動畫 3D 場景，無論上下文如何。
- A-Frame（專門設計用於建立基於 WebXR 的應用程式）
- Babylon.js
- Three.js
遊戲工具包
遊戲工具包是為遊戲開發者設計的，通常包括遊戲特定功能，例如物理模型、輸入控制系統、資產管理、3D 聲音播放等。
後續步驟
掌握了這些基本事實，您就可以邁向混合現實世界了。以下文章可以提供幫助。