HTML5的WebXR是什么？如何开发VR/AR应用？
随着元宇宙和空间计算概念的崛起，虚拟现实（VR）和增强现实（AR）技术逐渐走向大众。传统上，开发VR/AR应用需要使用Unity或Unreal等重型游戏引擎，并通过应用商店分发。然而，HTML5标准的演进为我们带来了WebXR API，使得开发者可以直接使用Web技术（HTML、CSS、JavaScript）在浏览器中构建沉浸式体验。
如果你想体验WebXR的魅力，可以访问 www.ipipp.com 查看丰富的在线演示案例。本文将带你深入了解WebXR的核心概念，并手把手教你如何开发属于自己的VR/AR应用。
一、 WebXR是什么？
WebXR是一组主要用于在网页浏览器中渲染3D场景，并与VR/AR硬件设备进行交互的API标准。它是早期WebVR API的继任者。WebVR仅支持虚拟现实，而WebXR中的“X”代表Extended Reality（扩展现实），统一涵盖了VR（完全沉浸的虚拟世界）和AR（将虚拟对象叠加在真实世界之上）。
WebXR的核心优势：
跨平台与免安装： 用户无需下载庞大的App，只需点击一个URL即可进入体验，极大地降低了获客成本。
易于分发： 兼容现有的Web生态，可以通过社交媒体、搜索引擎、二维码等轻松分享。
前端友好： 借助Three.js、A-Frame等成熟的Web 3D库，前端开发者可以快速转型，无需学习全新的编程语言。
二、 WebXR的核心概念
在动手开发之前，我们需要了解WebXR的几个核心概念：
XRSession（会话）： 应用程序与XR硬件的连接通道。分为Inline（内联，在普通网页中显示2D/3D画面）、Immersive-VR（沉浸式VR，占据整个视野）和Immersive-AR（沉浸式AR，将虚拟内容融入真实环境）三种模式。
XRSpace & XRReferenceSpace（空间与参考空间）： 定义了3D空间的坐标系。例如，`local` 模式允许用户在有限空间内移动，而 `viewer` 模式则跟踪用户的头部或设备姿态。
XRPose & XRView（姿态与视图）： XRView代表单眼视角（因此VR通常包含左右眼两个View），XRPose则包含了视图在3D空间中的位置和旋转信息。
XRFrame（帧）： 在每一帧渲染时，浏览器会提供一个XRFrame对象，包含了当前时刻所有追踪设备的状态（如头显、手柄的位置）。
三、 如何开发WebXR应用？
开发WebXR应用主要有两种路径：一是直接使用原生WebXR API，二是使用基于Web的高级3D框架（如Three.js或A-Frame）。我们分别来看。
1. 使用原生WebXR API开发
直接调用 navigator.xr 可以最灵活地控制硬件，但代码量较大，且需要自己处理WebGL渲染。以下是启动一个沉浸式VR会话并进入渲染循环的核心代码示例：
// 检查浏览器是否支持WebXR
if (navigator.xr) {
navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
if (supported) {
console.log("当前设备支持沉浸式VR体验");
// 绑定按钮事件以启动VR
document.getElementById('vr-button').addEventListener('click', startVR);
} else {
console.log("当前设备不支持沉浸式VR体验");
}
});
}
async function startVR() {
// 请求一个沉浸式VR会话
const session = await navigator.xr.requestSession('immersive-vr');
session.addEventListener('end', onSessionEnded);
// 获取WebGL上下文并确保兼容XR
const gl = canvas.getContext('webgl2', { xrCompatible: true });
const glLayer = new XRWebGLLayer(session, gl);
await session.updateRenderState({ baseLayer: glLayer });
// 创建本地参考空间
const refSpace = await session.requestReferenceSpace('local');
// 启动XR渲染循环
session.requestAnimationFrame(onXRFrame);
}
function onXRFrame(time, frame) {
const session = frame.session;
// 获取参考空间与观看者姿态
const refSpace = session.renderState.baseLayer.framebuffer;
const pose = frame.getViewerPose(refSpace);
if (pose) {
const glLayer = session.renderState.baseLayer;
gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
// 遍历视图（左眼和右眼）
for (const view of pose.views) {
const viewport = glLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
// 在此处执行WebGL绘制逻辑（投影矩阵和视图矩阵来自view对象）
// drawScene(view);
}
}
// 请求下一帧
session.requestAnimationFrame(onXRFrame);
}
function onSessionEnded(event) {
console.log("VR会话已结束");
}2. 使用A-Frame快速开发（强烈推荐）
原生API过于底层，对于大多数Web开发者来说，使用 A-Frame 是进入WebXR开发最快的方式。A-Frame是Mozilla开源的一个WebXR框架，它通过HTML标签声明式地构建3D场景，内部封装了Three.js和复杂的WebXR API调用。
以下代码仅需几行HTML，即可实现一个包含几何体、且默认支持VR/AR分屏渲染的完整应用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个WebXR应用</title> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- 设置背景色 --> <a-sky color="#ECECEC"></a-sky> <!-- 添加一个立方体，距离用户4个单位，离地1.5个单位 --> <a-box position="0 1.5 -4" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <!-- 添加一个球体 --> <a-sphere position="1 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <!-- 添加一个地面 --> <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html>
在上面的例子中，<a-scene> 自动处理了WebXR的初始化、VR会话的请求、渲染循环、以及VR头显左右分屏的画面渲染。页面右下角会自动出现VR/AR头显入口按钮。
四、 开发与调试注意事项
必须使用HTTPS： 出于安全考虑，WebXR API（以及设备的传感器权限）只能在安全上下文中使用，即你的网站必须部署在HTTPS上（localhost本地开发除外）。
性能优化至关重要： VR/AR对帧率要求极高（通常需要72FPS甚至90FPS才能避免用户产生眩晕感）。请务必控制Draw Call，使用轻量级3D模型，并避免复杂的实时光照计算。
使用模拟器调试： 如果你没有VR头显，可以使用Chrome DevTools提供的WebXR模拟器扩展，在普通PC浏览器中模拟头部的6DoF（六自由度）移动和旋转。
AR开发的特征点： 开发AR应用时，你需要使用Hit Test API来检测现实世界中的平面（如地板、桌面），并将虚拟物体精准地放置在真实表面上。
五、 总结
WebXR打破了App Store的壁垒，让VR/AR体验像网页一样触手可及。无论是通过原生API进行底层控制，还是利用A-Frame等框架进行敏捷开发，Web技术栈都已经具备了生产级XR应用的能力。随着Apple Vision Pro等空间计算设备逐渐对Web标准敞开怀抱，WebXR必将成为未来3D互联网的基石。现在就开始你的WebXR开发之旅吧！