我的浏览器游戏如何在 Meta Quest 上运行 VR

我的游戏 Bannermarch 运行在浏览器中，而且现在是 3D 的，我想看看我是否可以在 VR 中玩它。你可以。我戴上 Meta Quest，在头显的浏览器中打开游戏，然后按了一个写着“进入 VR”的按钮。然后我就站在我的城堡里，主塔（主要建筑）就在我面前的山丘上。我没有安装任何东西。这和你用笔记本电脑打开的同一个网页。

这之所以可行，是因为两件事。浏览器有一个内置的 VR 头显 API，称为 WebXR，而游戏已经使用了 Babylon.js，这是一个知道如何使用它的 3D 引擎。

浏览器如何实现 VR

WebXR 允许网页与 VR 头显进行通信。Quest 浏览器支持它，带有 PC VR 头显的电脑上的 Chrome 和 Edge 也支持。iPhone 上的 Safari 不支持。

首先，页面会询问浏览器 VR 是否可用。如果可用，页面会显示一个“进入 VR”按钮。你必须点击某个东西才能启动 VR，因为浏览器不允许页面自行启动（这和阻止视频自动播放并带声音的规则一样）。

点击后，浏览器将接管头显的屏幕。每秒很多次，它会告诉页面你的头部和手的位置。然后页面会为每个眼睛绘制两次游戏画面，每次从略微不同的位置绘制。这种微小的差异就是让头显中的物体看起来具有 3D 效果的原因。

// 普通 WebXR，无引擎
if (await navigator.xr?.isSessionSupported("immersive-vr")) {
  button.onclick = async () => {
    const session = await navigator.xr.requestSession("immersive-vr");
    const space = await session.requestReferenceSpace("local-floor");
    session.requestAnimationFrame(function frame(time, xrFrame) {
      const pose = xrFrame.getViewerPose(space);
      for (const view of pose.views) {
        // 使用 view.transform 和 view.projectionMatrix 绘制场景
      }
      session.requestAnimationFrame(frame);
    });
  };
}

local-floor 部分告诉浏览器将游戏的地面放置在你真实的地面位置，这样你就能从自己的高度看到世界。

浏览器负责处理复杂的部分，例如头部追踪和图像适配镜片。游戏只需绘制摄像机所看到的内容。

Babylon.js 如何提供帮助

我没有自己编写那段代码。Babylon.js 有一个名为 WebXRDefaultExperience 的辅助工具，可以为你完成这些工作。它会启动 VR 会话并在你移动头部时移动摄像机。它还会在控制器上提供激光指针，并允许你进行瞬移。这大致就是我需要的全部设置。

const xr = await WebXRDefaultExperience.CreateAsync(scene, {
  disableDefaultUI: true,
  floorMeshes: [ground],
  disableHandTracking: true,
  inputOptions: {
    doNotLoadControllerMeshes: true,
    disableOnlineControllerRepository: true,
  },
  teleportationOptions: { forceHandedness: "right" },
});

// 稍后，从“进入 VR”按钮触发
await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");

我无需更改游戏本身。它和你用笔记本电脑看到的 3D 世界是相同的，拥有相同的建筑、人物和船只。如果你指向一栋建筑并按下扳机，它的名字就会显示在上面。再次按下扳机，游戏就会带你退出 VR，并打开该建筑的菜单。管理你的城堡在普通屏幕上仍然更容易。

手机和笔记本电脑上的用户不会下载任何 VR 代码。它只会在能够使用的设备上加载。

出了什么问题

第一次尝试并不顺利。控制器上的拇指摇杆起初毫无反应。Babylon 会为每个控制器下载一个文件，说明它有哪些按钮，但我的网站的安全设置阻止了该下载。没有这个文件，Babylon 会将控制器视为只有一个扳机。我通过将这些文件放在游戏内部来解决这个问题，这样它就不需要下载它们了。

当我添加左摇杆行走功能时，“进入 VR”按钮消失了。Babylon 内置的行走功能无法与瞬移同时开启，因此 VR 设置崩溃了。我用大约 30 行代码编写了自己的行走功能。左摇杆会让你朝着你注视的方向行走，右摇杆则会让你瞬移或分步旋转。我省略了平滑转向，因为它会让很多人感到头晕。

头显中的颜色看起来不对。游戏在普通摄像机的最后一步调整其颜色，而这一步在 VR 摄像机上不起作用，所以我必须以另一种方式在 VR 中应用它。

当我进入 VR 时，游戏也冻结了。为了省电，当你切换到另一个标签页时，它会停止绘制。当我处于 VR 状态时，Quest 浏览器会告诉游戏它的标签页被隐藏了，所以游戏停止了。现在它在 VR 开启时会继续绘制。

Quest 的图形芯片的强度大约相当于手机的，而且它必须绘制两次所有内容，因此它只能运行游戏的低图形设置。一些手机也声称支持 VR（用于纸板查看器），所以我只在头显和电脑上显示该按钮。

登录是另一个问题，因为在浮动键盘上输入密码很痛苦。我在 如何像电视一样为 VR 头显配对 中写了我是如何解决这个问题的。