各位观众老爷，大家好！今天咱们不聊家长里短，来聊聊高大上的WebXR，也就是Web Extended Reality，扩展现实。这玩意儿听起来唬人，其实就是让你的浏览器也能玩VR/AR，让你足不出户就能上天入地，体验一把“盗梦空间”。
咱们今天的主题是“WebXR Device API 如何与 VR/AR 设备交互，获取姿态、输入和渲染上下文，以创建沉浸式体验”。说白了，就是用WebXR API，让你的代码能“看到”VR/AR设备，知道你头在往哪儿看，手在干嘛，然后把画面渲染到设备上，让你身临其境。
一、WebXR：浏览器与虚拟世界的桥梁
首先，得明白WebXR是个啥。简单来说，它就是一套API，让浏览器能和VR/AR设备对话。以前你想做个VR应用，得用Unity、Unreal引擎，还得各种SDK，麻烦得要死。现在有了WebXR，直接用JavaScript就能搞定，方便快捷，妈妈再也不用担心我的头发了！
WebXR Device API 提供了以下核心功能：
- 设备发现和会话管理： 找到可用的VR/AR设备，并建立连接。
- 姿态追踪： 获取头显、手柄等设备的姿态信息（位置和方向）。
- 输入处理： 监听手柄、控制器等设备的输入事件（按钮、触摸、摇杆）。
- 渲染： 提供渲染管线，将图像渲染到VR/AR设备上。
二、WebXR 的基本流程：一步一步走向沉浸式
咱们先来理清WebXR的基本流程，就像盖房子一样，得先打地基，再盖楼。
-
检查WebXR支持： 看看你的浏览器是不是支持WebXR，就像检查你的电脑能不能跑某个游戏一样。
if (navigator.xr) { console.log("WebXR is supported!"); } else { console.log("WebXR is not supported :("); } -
请求 WebXR 设备： 找到可用的VR/AR设备，就像在相亲网站上找到心仪的对象。
navigator.xr.requestSession('immersive-vr') // immersive-ar for AR .then(xrSession => { console.log("WebXR session started!"); // 继续后续操作 }) .catch(error => { console.error("Failed to start WebXR session:", error); });'immersive-vr'和'immersive-ar'是会话模式，VR就是完全沉浸式，AR就是增强现实，让虚拟物体和现实世界融合。 -
创建 WebGL 上下文： WebXR需要WebGL来渲染画面，就像画家需要画布一样。
const canvas = document.createElement('canvas'); document.body.appendChild(canvas); const gl = canvas.getContext('webgl', {xrCompatible: true}); if (!gl) { console.error("Failed to get WebGL context."); return; }xrCompatible: true是关键，告诉WebGL这个上下文要用于WebXR。 -
配置 WebXR 会话： 将WebGL上下文绑定到WebXR会话，就像把画布固定到画架上。
xrSession.updateRenderState({ baseLayer: new XRWebGLLayer(xrSession, gl) });XRWebGLLayer是WebXR渲染的基础，它负责将WebGL渲染的画面输出到VR/AR设备上。 -
请求动画帧： 像电影一样，WebXR需要不断地刷新画面，才能产生动画效果。
xrSession.requestAnimationFrame(render); // 启动渲染循环 function render(time, frame) { if (!frame) { xrSession.requestAnimationFrame(render); return; } const pose = frame.getViewerPose(referenceSpace); // 获取设备姿态 // 渲染画面 xrSession.requestAnimationFrame(render); // 继续渲染 }xrSession.requestAnimationFrame就像一个定时器，不断地调用render函数。 -
获取设备姿态： 知道头在哪儿，才能把画面渲染到正确的位置。
const pose = frame.getViewerPose(referenceSpace); if (pose) { const view = pose.views[0]; // 获取第一个视角（通常是眼睛） const viewport = xrSession.renderState.baseLayer.getViewport(view); // 获取视口 // 使用 view.transform 获取位置和方向信息 // 使用 viewport 设置渲染区域 }getViewerPose函数返回一个XRViewerPose对象，包含了设备的位置和方向信息。 -
处理输入： 监听手柄、控制器的输入事件，让用户可以和虚拟世界互动。
xrSession.addEventListener('selectstart', (event) => { console.log("Select start!"); // 按钮按下 }); xrSession.addEventListener('selectend', (event) => { console.log("Select end!"); // 按钮释放 });selectstart和selectend是最常用的事件，分别代表按钮按下和释放。 -
渲染画面： 将WebGL渲染的画面输出到VR/AR设备上，让用户看到虚拟世界。
gl.bindFramebuffer(gl.FRAMEBUFFER, xrSession.renderState.baseLayer.framebuffer); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // 使用 WebGL 绘制场景gl.bindFramebuffer将 WebGL 的帧缓冲区绑定到 WebXR 的渲染层，这样 WebGL 渲染的画面就会输出到 VR/AR 设备上。
三、代码示例：一个简单的 WebXR 场景
咱们来写一个简单的WebXR场景，让大家更直观地了解WebXR的用法。这个场景很简单，就是在VR设备里显示一个红色的立方体。
<!DOCTYPE html>
<html>
<head>
<title>WebXR Cube</title>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<script>
async function main() {
if (!navigator.xr) {
console.error("WebXR not supported.");
return;
}
try {
const xrSession = await navigator.xr.requestSession('immersive-vr');
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const gl = canvas.getContext('webgl', {xrCompatible: true});
if (!gl) {
console.error("Failed to get WebGL context.");
return;
}
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(xrSession, gl)
});
const referenceSpace = await xrSession.requestReferenceSpace('local');
// 创建立方体顶点数据
const vertices = [
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
0.5, 0.5, -0.5,
-0.5, 0.5, -0.5,
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5, -0.5, -0.5,
-0.5, 0.5, -0.5,
-0.5, 0.5, 0.5,
-0.5, -0.5, 0.5,
0.5, -0.5, -0.5,
0.5, 0.5, -0.5,
0.5, 0.5, 0.5,
0.5, -0.5, 0.5,
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
0.5, -0.5, 0.5,
-0.5, -0.5, 0.5,
-0.5, 0.5, -0.5,
0.5, 0.5, -0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5
];
const indices = [
0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23
];
// 创建顶点缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// 创建索引缓冲区
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
// 创建顶点着色器
const vertexShaderSource = `
attribute vec3 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error("Vertex shader compilation error:", gl.getShaderInfoLog(vertexShader));
return;
}
// 创建片元着色器
const fragmentShaderSource = `
precision mediump float;
uniform vec4 uColor;
void main() {
gl_FragColor = uColor;
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error("Fragment shader compilation error:", gl.getShaderInfoLog(fragmentShader));
return;
}
// 创建着色器程序
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error("Shader program linking error:", gl.getProgramInfoLog(shaderProgram));
return;
}
// 获取着色器变量位置
const aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
const uModelViewMatrix = gl.getUniformLocation(shaderProgram, "uModelViewMatrix");
const uProjectionMatrix = gl.getUniformLocation(shaderProgram, "uProjectionMatrix");
const uColor = gl.getUniformLocation(shaderProgram, "uColor");
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
// 设置颜色
gl.useProgram(shaderProgram);
gl.uniform4fv(uColor, [1.0, 0.0, 0.0, 1.0]); // 红色
// 渲染循环
xrSession.requestAnimationFrame(render);
function render(time, frame) {
if (!frame) {
xrSession.requestAnimationFrame(render);
return;
}
const pose = frame.getViewerPose(referenceSpace);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, xrSession.renderState.baseLayer.framebuffer);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
for (const view of pose.views) {
const viewport = xrSession.renderState.baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
// 设置投影矩阵
gl.uniformMatrix4fv(uProjectionMatrix, false, view.projectionMatrix);
// 设置模型视图矩阵
gl.uniformMatrix4fv(uModelViewMatrix, false, view.transform.matrix);
// 绘制立方体
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}
}
xrSession.requestAnimationFrame(render);
}
} catch (error) {
console.error("WebXR error:", error);
}
}
main();
</script>
</body>
</html>这段代码有点长，但其实主要就是做了以下几件事：
- 初始化WebXR会话和WebGL上下文。
- 创建立方体的顶点数据和索引数据。
- 创建顶点着色器和片元着色器，用于渲染立方体。
- 在渲染循环中，获取设备姿态，设置投影矩阵和模型视图矩阵，然后绘制立方体。
把这段代码保存成HTML文件，然后在支持WebXR的浏览器中打开，连接VR设备，就能看到一个红色的立方体出现在你的眼前了！
四、WebXR 的进阶技巧：让你的体验更上一层楼
光显示一个立方体肯定不够，咱们还得学点进阶技巧，让你的WebXR体验更上一层楼。
-
使用 Three.js 或 Babylon.js： 这些都是流行的JavaScript 3D库，它们简化了WebGL的开发，让你更容易创建复杂的场景。
库 优点 缺点 Three.js 简单易用，社区活跃，资源丰富 功能相对较少，性能可能不如Babylon.js Babylon.js 功能强大，性能优化好，支持物理引擎、粒子系统等高级特性 学习曲线较陡峭，文档相对较少 -
优化渲染性能： VR/AR对性能要求很高，要尽量减少draw call，使用纹理图集，优化模型，避免过度绘制。
-
实现交互： 通过监听手柄、控制器的输入事件，让用户可以和虚拟世界互动，比如拿起物体、传送、射击等等。
-
利用空间音频： 让声音听起来像是从特定的位置发出的，增强沉浸感。
-
使用 WebXR Anchors： 在AR场景中，可以将虚拟物体固定在现实世界的特定位置，即使设备移动，虚拟物体也会保持在原来的位置。
五、总结：WebXR 的未来之路
WebXR 是一项充满潜力的技术，它让Web开发者也能轻松地创建VR/AR体验。虽然目前WebXR还处于发展阶段，但随着技术的不断成熟，相信未来会有越来越多的WebXR应用出现，改变我们的生活和工作方式。
今天咱们就先聊到这里，希望大家能对WebXR有个初步的了解。 如果大家对WebXR有任何疑问，欢迎在评论区留言，咱们一起探讨。 祝大家早日成为WebXR大神，创造出属于自己的虚拟世界！