WebXR Device API：浏览器里跑VR和AR

可视化演示

展示WebXR会话生命周期五阶段流程、双目立体渲染IPD视差原理，以及手柄输入射线追踪与手势关节骨骼追踪。

空间计算入口

还记得我们说的“虚拟手工坊”吗？在以前，你若是想在VR里做手工，得先下载一个巨大的VR应用软件，像一个需要装修整个厂房的大工程。而现在，WebXR让你只需要“打开一扇网页的门”，门后面就已经是一个能施展手艺的工坊。入口从“必须安装的APP”变成了“随开随用的网页”。

这个转变背后，是浏览器这个老熟人突然学会了说“设备语言”。WebXR Device API就是一本翻译词典，让网页JavaScript能直接听懂VR头显的“眼睛看到什么”、手柄的“手指在做什么”。它把五花八门的硬件差异藏在了背后，给开发者呈现出一套统一的标准接口——这就是硬件API的标准化。

从职业角度看，这意味着你写的WebXR应用，不管用户用的是PC VR还是手机盒子，只要浏览器支持，你的代码不用推倒重来。一网站多设备复用，省下的开发成本，就像同一份设计图纸可以同时用于木工坊和铁匠坊一样。

核心接口全景

走进虚拟手工坊之前，我们需要先搞清楚这个空间是怎样被人“打开”和“使用”的。你想进入工坊，得先“申请进场”——在WebXR里这叫启动一个会话（Session）。会话建立后，浏览器会把你和头显硬件之间的专用通道打开，之后你才能持续获得画面和姿态数据。

会话分两种：一种是inline，就像在电脑屏幕上通过窗口偷看工坊；另一种是immersive-vr，真正把整个人丢进工坊，头显全屏接管视野。启动会话时，你会用到一个叫navigator.xr.requestSession()的方法，它就像一个“领取入场券”的窗口，浏览器会询问用户是否允许进入XR环境。

进入工坊后，里面的场景不会自己动，需要你持续“看一眼、换一帧”。WebXR用requestAnimationFrame()的XR变体来驱动这个循环——每一帧，浏览器都会问你的代码：“头显现在看到什么？”你答完，画面就更新一次。空间参考系（Reference Space）则是判断“你站在哪儿”的坐标系，比如local参考系是以你为中心的原点，local-floor参考系则把地面当作水平基准。

会话结束时要记得“退场”，调用session.end()释放设备资源。就像离开工坊后要把工具归位、关灯锁门——不做这一步，设备和浏览器会一直占着资源，后面的体验可能因此变卡顿。

循环往复，你的虚拟手工坊在这套“会话-帧-参考系”的骨架中运转起来。只要门票在手（会话有效），快门在跳（帧循环），坐标系稳定（参考系），这个工坊就永远为你敞开。

姿态数据流

在虚拟手工坊里，你做木工时每一刀的方向都取决于你头的位置和转动的角度。你的头就是一架“摄像机”，而WebXR要做的第一件事，就是时刻告诉你这架摄像机在哪里、面朝哪里——这就是姿态（Pose）。

每次拿到XRFrame后，你会调用frame.getViewerPose(referenceSpace)，它会返回一个XRViewerPose对象，里面装着视角的位置（position）和旋转（orientation）。位置是一个三维向量 (x, y, z)，告诉你头部在空间中的坐标；旋转用四元数（quaternion）表示，包含四个数字 (x, y, z, w)，比欧拉角更稳定，能避免万向锁问题——就像用一个陀螺仪而不是三个分别转动的圆环来记录你脑袋的朝向。

更具体地说，XRViewerPose里通常有多个view（视图），每一个view对应一只眼睛。每个view里都有一对矩阵：projectionMatrix（投影矩阵）和viewMatrix（视图矩阵）。投影矩阵模拟的是“镜头焦距”——决定了你能看到多宽的视野；视图矩阵则模拟“镜头位置”——决定了你从哪个角度看向世界。两者合起来，才最终得出你眼前的画面。

数据流就像你用眼睛扫视工坊的每一个角落，WebXR把这个“扫视”过程数字化：头部每移动一毫米，四元数和位置向量更新一次；每一帧渲染，矩阵乘法把整个世界重新投影一次。你的虚拟手工坊，本质上是你的头部运动“导演”的一场实时舞台剧。

手柄交互

工坊里最趁手的是你的双手，而在虚拟空间里，取而代之的是手柄。WebXR通过XRInputSource对象来描述每一个输入设备，你可以从frame.session.inputSources中拿到当前连接的所有手柄。每个手柄都有自己独立的姿态，就像你双手可以各拿各的工具一样。

手柄上最重要的交互结构是gamepad对象，它提取了真实手柄的按键和摇杆数据。当你扣动扳机时，gamepad.buttons[0].value会从0平滑过渡到1，就像扣动胶枪的扳机越用力出胶越多。触控板则映射为二维轴数据，像操纵一个微型的摇杆来调整工具的倾斜角度。

现代WebXR应用中最常用的交互模式是“选择射线”（Select Ray）。你会从手柄的尖端发射一条虚拟射线，射中场景中的某个物体后，再用扳机键“扣下”——这就完成了一次点击。射线检测（raycasting）会计算射线与物体表面的交点，决定哪个物体被选中。

手柄交互的本质，是把你的物理手部动作翻译成虚拟世界的“手势语义”。扳机是“抓取”，触控板是“移动”，射线是“瞄准”。你在真实工坊里的本能——伸手、拿取、放下——被这套数据流忠实地搬进了浏览器，工坊的木屑和铁锈也因此有了真实的触感。

立体渲染

走进虚拟手工坊，最打动你的是那种“深度感”——你能判断木料距离你多远、锤子在桌面还是空中。这种深度感从哪来？来自双眼视差：你的左右眼看到的世界有细微差别，大脑把这两幅图像合在一起，就产生了立体感。WebXR的立体渲染，就是在每一帧渲染两幅略微不同的画面，分别送给左右眼。

在代码层面，开发者在渲染循环中会遍历viewerPose.views数组，通常view[0]是左眼、view[1]是右眼。每个view都带有自己的projectionMatrix和viewMatrix——其中viewMatrix包含一个细微的水平偏移，正是这个偏移模拟了你两眼之间的距离（瞳距）。渲染器分别用左右眼的矩阵各绘制一遍整个场景，最后把两幅图输出到屏幕的左右半屏，由头显的光学镜片把两幅画面分别送到你的两只眼睛里。

这套流程的目标是保证两幅画面的差异足够真实：近处的物体左右眼的位移差更大，远处的物体位移差更小——这就是深度感知的原理。WebXR会自动为你设置好这些矩阵，你只需要循环遍历views数组，逐一渲染即可。

这种立体渲染不是简单的“复制两次画面”，而是真正模拟人类视觉系统的工作机制。你的工坊之所以看起来有纵深和质感，正是因为WebXR忠实地为你的两只眼睛送上了“不一样的风景”，让大脑在大脑皮层里自动重建了空间的深度。

设备兼容性

到访虚拟手工坊的客人形形色色：有人用高端PC VR头显，有人用便宜的手机盒子，还有人只是想先在手机上用AR模式瞥一眼工坊外观。作为工坊主人，你当然不能因为客人设备不同就拒绝服务，而要“量体裁衣”——这就是WebXR设备兼容性的意义。

WebXR的兼容策略首先从能力检测开始。启动应用时，你会调用navigator.xr.isSessionSupported('immersive-vr')来检测当前浏览器是否支持VR会话，返回一个布尔值。如果支持，就进入沉浸式VR模式；如果不支持，你可以查出是否支持inline模式，用普通的网页3D视图（类似一个浏览器内的3D展窗）作为降级方案。

其次，会话模式可以灵活切换。同一个应用可以在检测到高配设备时自动请求immersive-vr模式，在低配设备上退化为inline模式。更进一步，还有immersive-ar模式——让虚拟的工坊家具叠加到真实房间里。你不需要为每种模式写三套代码，只需要判断哪种模式可用，并为不同模式准备对应的渲染路径。

兼容性的核心哲学是“渐进增强”——从最基本的滚动网页到完整的沉浸式体验，每一层都是对前一个层级的增强。即使你的客人只有一部普通手机，工坊的大门也永远为他打开，只是看到的风景各有不同。

AI 应用场景

Python 演示

import math  class Vector3:    def __init__(self, x=0.0, y=0.0, z=0.0):        self.x = x        self.y = y        self.z = z     def __add__(self, other):        return Vector3(self.x + other.x, self.y + other.y, self.z + other.z)     def __mul__(self, scalar):        return Vector3(self.x * scalar, self.y * scalar, self.z * scalar)     def __repr__(self):        return "Vector3({:.2f}, {:.2f}, {:.2f})".format(self.x, self.y, self.z)  class Quaternion:    def __init__(self, x=0.0, y=0.0, z=0.0, w=1.0):        self.x = x        self.y = y        self.z = z        self.w = w     def rotate(self, v):        # 简化的四元数旋转：只绕Y轴旋转示例        cos_a = self.w        sin_a = self.z        x = v.x * cos_a - v.z * sin_a        z = v.x * sin_a + v.z * cos_a        return Vector3(x, v.y, z)  class XRView:    def __init__(self, eye_offset, fov_y=math.radians(70)):        self.eye_offset = eye_offset        self.projection = self._make_projection(fov_y)     def _make_projection(self, fov_y):        # 简化的透视投影矩阵（列主序存储简化为系数）        f = 1.0 / math.tan(fov_y / 2.0)        return [f, 0.0, 0.0, 0.0]     def view_matrix(self, head_pos, head_rot):        eye_pos = head_rot.rotate(Vector3(self.eye_offset, 0.0, 0.0)) + head_pos        return eye_pos  class XRFrame:    def __init__(self, time, head_pos, head_rot):        self.time = time        self.head_pos = head_pos        self.head_rot = head_rot        self.views = [            XRView(eye_offset=-0.032),            XRView(eye_offset=0.032)        ]     def get_viewer_pose(self):        return [v.view_matrix(self.head_pos, self.head_rot) for v in self.views]  class XRSimulator:    def __init__(self):        self.time = 0.0        self.frame_count = 0     def request_animation_frame(self, callback):        # 模拟每帧16ms的渲染循环        while self.frame_count < 60:            t = self.frame_count * 0.016            head_pos = Vector3(0.0, 1.6, math.sin(t) * 0.2)            head_rot = Quaternion(w=math.cos(t * 0.5), z=math.sin(t * 0.5))            frame = XRFrame(t, head_pos, head_rot)            pose = frame.get_viewer_pose()            callback(pose, t)            self.frame_count += 1  def render_frame(pose, time):    left_eye = pose[0]    right_eye = pose[1]    # 模拟左右眼视差计算深度估计    parallax = right_eye.x - left_eye.x    depth_estimate = 0.5 / abs(parallax) if parallax != 0 else float("inf")    print("frame={:.3f}s 左眼={} 右眼={} 视差={:.4f} 深度≈{:.2f}m".format(        time, left_eye, right_eye, parallax, depth_estimate))  if __name__ == "__main__":    sim = XRSimulator()    sim.request_animation_frame(render_frame)

1. class XRFrame:模拟WebXR的XRFrame对象，承载每一帧的头部姿态和双眼视图。
2. def get_viewer_pose(self):对应WebXR的frame.getViewerPose()方法，返回左右眼的位置。
3. XRView(eye_offset=-0.032)左右眼的水平偏移量，模拟人眼瞳距约6.4厘米。
4. parallax = right_eye.x - left_eye.x计算左右眼视图的水平视差，这是深度感知的核心数据。
5. depth_estimate = 0.5 / abs(parallax)用视差的倒数估算深度，与文档中的视差—深度反比公式一一对应。
6. head_rot = Quaternion(...)用四元数表示头部旋转，比欧拉角更稳定。
7. while self.frame_count < 60:模拟渲染循环，用近似16ms帧间隔驱动一帧帧更新。

常见误区

面试题