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 游戏体验所需的技术。
WebXR API
任何 WebXR 体验的核心都建立在两个基本概念之上
- 应用程序必须接收有关您的头显在三维空间中的位置以及您的控制器位置的实时数据
- 应用程序必须根据该位置数据,向头显显示器实时渲染立体视图
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 游戏。
沉浸感优先于游戏玩法和图形 — 您必须感觉自己是体验的一部分。这并不容易实现,但它不需要逼真的图像。相反,即使是基本形状以高帧率飞驰而过,如果体验具有沉浸感,也可以令人振奋。请记住:实验是关键 — 随时根据您的项目最适合的方式进行。
WebXR 的未来
消费级设备已在市场上普及,并且我们有 JavaScript API 在 Web 上支持它们。随着硬件变得越来越实惠,生态系统日趋成熟,开发人员可以专注于通过良好的用户体验(UX)和用户界面(UI)来构建体验。现在是深入研究和试验 WebXR 的绝佳时机。