WebXR — 网页虚拟现实和增强现实

虚拟现实 (VR) 和增强现实 (AR) 的概念并不新鲜，但相关技术比以往任何时候都更容易获得。我们还可以使用 JavaScript API 在 Web 应用程序中使用它。本文从其在游戏中的应用角度介绍了 WebXR。

注意：您可能会看到对非标准 WebVR API 的引用。WebVR 从未被批准为标准，在极少数浏览器中默认实施和启用，并且仅支持少数设备。WebVR API 已被WebXR 设备 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.

WebVR 的发展

WebVR 规范正在被WebXR 设备 API取代。在 WebXR 最终确定之前，WebVR 仍可能在某些浏览器中可用。有关更多信息，请参阅WebVR.info 网站。

WebXR API

任何 WebXR 体验的核心都建立在两个基础概念之上

  1. 应用程序必须接收有关您的头显位置和您的控制器在三维空间中的位置的实时数据
  2. 应用程序必须根据该位置数据向头显显示屏渲染实时立体视图

WebXR API是捕获连接到计算机的 XR 设备信息的中心 API。该 API 可以捕获头显和控制器的位姿、速度、加速度和其他信息，您可以在游戏中使用这些信息。

还有其他一些 API 可用于创建游戏，例如游戏手柄 API（用于非 XR 控制器输入）和设备方向 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 上支持它们。随着硬件变得更加实惠且生态系统日益成熟，开发人员可以专注于通过良好的用户体验和用户界面构建体验。现在是深入研究并尝试 WebXR 的绝佳时机。

另请参阅