WebXR — 適用於 Web 的虛擬現實和增強現實

虛擬現實(VR)和增強現實(AR)的概念並不新鮮,但如今這項技術比以往任何時候都更容易獲得。我們還可以使用 JavaScript API 在 Web 應用程式中利用它。本文將從其在遊戲中的應用角度介紹 WebXR。

注意:您可能會看到對非標準的 WebVR API 的引用。WebVR 從未被批准為標準,在極少數瀏覽器中實現並預設啟用,並且僅支援少數裝置。WebVR API 已被 WebXR Device API 取代。

VR 裝置

隨著 Meta Quest、Valve Index 和 PlayStation VR 等現有 VR 頭顯的普及,未來一片光明 — 我們已經擁有了創造有意義的 VR 遊戲體驗所需的技術。

Three different VR devices: the Meta Quest 3, the Valve Index, and the Sony PSVR2.

WebXR API

任何 WebXR 體驗的核心都建立在兩個基本概念之上

  1. 應用程式必須接收有關您的頭顯在三維空間中的位置以及您的控制器位置的即時資料
  2. 應用程式必須根據該位置資料,向頭顯顯示器即時渲染立體檢視

WebXR API 是捕獲連線到計算機的 XR 裝置資訊的中心 API。該 API 可以捕獲頭顯和控制器的位置、方向、速度、加速度以及您可以在遊戲中使用的其他資訊。

還有其他用於建立遊戲的 API,例如用於非 XR 控制器輸入的 Gamepad API 和用於處理顯示器方向的 Device Orientation API

使用 WebXR API

開始使用 WebXR API 的最佳起點是我們的 WebXR 基礎知識指南。之後,請參閱 啟動和關閉 WebXR 會話

工具和技術

A-Frame 是一個 Web 框架,它為 WebXR 提供了簡單的構建塊,因此您可以快速構建和試驗 VR 網站和遊戲。您可以閱讀 MDN 的 使用 A-Frame 構建基本演示教程瞭解更多詳情。

此外,Three.js 是最流行的 Web 3D 引擎之一,也可用於 WebXR 遊戲。檢視 Three.js 的 如何建立 VR 內容文件,以幫助您使用 Three.js 製作 WebXR 遊戲。

A 3D representation of a landscape: it's a pinkish sunset, with a blue mountainous land in the background surrounded by a mirror sea and a darker blue island in the second plan.

沉浸感優先於遊戲玩法和圖形 — 您必須感覺自己是體驗的一部分。這並不容易實現,但它不需要逼真的影像。相反,即使是基本形狀以高幀率飛馳而過,如果體驗具有沉浸感,也可以令人振奮。請記住:實驗是關鍵 — 隨時根據您的專案最適合的方式進行。

WebXR 的未來

消費級裝置已在市場上普及,並且我們有 JavaScript API 在 Web 上支援它們。隨著硬體變得越來越實惠,生態系統日趨成熟,開發人員可以專注於透過良好的使用者體驗(UX)和使用者介面(UI)來構建體驗。現在是深入研究和試驗 WebXR 的絕佳時機。

另見