WebVR — 网络虚拟现实

推荐：使用NSDT编辑器快速搭建 3D 应用场景

虚拟现实设备

随着 Oculus Rift 和许多其他生产设备即将上市，未来看起来很光明——我们已经有足够的技术来使 VR 体验“足够好”，可以玩游戏。有许多设备可供选择：像 Oculus Rift 或 HTC Vive 这样的桌面设备，通过带有 Playstation VR 的游戏机（目前不支持 WebVR），再到 Gear VR 或 Google Cardboard 等移动体验。

注意：有关更多信息，请阅读我们的 WebVR 概念文章。

The WebVR API

WebVR API 是用于捕获连接到计算机的 VR 设备上的信息和头戴设备位置/方向/速度/加速度信息的核心 API，并将其转换为可在游戏和其他应用程序中使用的有用数据。

注意：当然，还有其他可用于创建游戏的 API，例如用于控制输入的游戏手柄 API，以及用于处理移动设备上的显示方向的设备方向 API。

浏览器支持和规范状态

目前，浏览器对 WebVR API 的支持仍处于实验阶段——它可以在 Firefox 的夜间构建和 Chrome 的实验性版本中工作（Mozilla 和 Google 联手共同致力于实现），但我们迟早会在常规版本中看到它。

WebVR 规范处于编辑草稿状态，这意味着它仍可能发生变化。该开发由 Mozilla 的 Vladimir Vukicevic 和 Google 的 Brandon Jones 领导。有关更多信息，请务必访问 https://mixedreality.mozilla.org/ 和 WebVR.info 网站。

使用 WebVR API

WebVR API 基于两个概念 - 将立体图像发送到头戴式设备中的两个镜头，并从传感器接收头部的位置数据，这两个概念由 HMDVRDevice（头戴式显示器虚拟现实设备）和PositionSensorVRDevice处理。

获取设备

若要获取有关连接到计算机的设备的信息，可以使用 Navigator/getVRDisplay 方法：

.JS 复制到剪贴板

navigator.getVRDevices().then((devices) => {  for (let i = 0; i < devices.length; ++i) {    if (devices[i] instanceof HMDVRDevice) {      gHMD = devices[i];      break;    }  }  if (gHMD) {    for (let i = 0; i < devices.length; ++i) {      if (        devices[i] instanceof PositionSensorVRDevice &&        devices[i].hardwareUnitId === gHMD.hardwareUnitId      ) {        gPositionSensor = devices[i];        break;      }    }  }});

此代码将遍历可用设备并为头戴式设备分配适当的传感器 — 第一个数组包含连接的设备，并完成检查以找到 HMDVRDevice，并将其分配给变量 — 使用它您可以设置场景、获取眼睛参数、设置视野等。例如：devicesgHMD

.JS 复制到剪贴板

function setCustomFOV(up, right, down, left) {  const testFOV = new VRFieldOfView(up, right, down, left);
  gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0);}

该变量保存 PositionSensorVRDevice — 使用它，您可以获取当前位置或方向状态（例如，更新每帧的场景视图），或重置传感器。例如，下面的代码在屏幕上输出位置信息：gPositionSensor

.JS 复制到剪贴板

function setView() {  const posState = gPositionSensor.getState();
  if (posState.hasPosition) {    const format = (axis) => `${axis}${roundToTwo(posState.position[axis])}`;    posPara.textContent = `Position: ${axis("x")} ${axis("y")} ${axis("x")}`;    xPos = -posState.position.x * WIDTH * 2;    yPos = posState.position.y * HEIGHT * 2;    zPos = -posState.position.z > 0.01 ? -posState.position.z : 0.01;  }
  // …}

有关演示的完整说明和更多详细信息，请参阅使用 WebVR API。

工具和技术

第一个 WebVR 实验和演示使用了 Three.js 因为它可能是网络上最受欢迎的 3D 引擎。请参阅 Three.js GitHub 上提供的 VREffect 和 VRControls 函数，以帮助您使用 Three.js 实现和处理 WebVR。

鲍里斯·斯穆斯（Boris Smus）写过关于响应式 WebVR 的概念，其中单个网页游戏可以在各种设备上玩，例如没有 VR 硬件的笔记本电脑，带有 Oculus Rift 的 PC 或 Google Cardboard 中的智能手机，并且仍然可以在所有设备上提供独特而有价值的体验。这就像响应式设计，但应用于 VR 世界 - 编写一次即可在任何 VR 头显中运行，或者没有它。您可以查看 WebVR 样板资源 — 这是开始学习 WebVR 的一个很好的例子，也是任何基于 Web 的 VR 体验的起点。

还有一个名为 A-Frame 的标记框架，它为 WebVR 提供了简单的构建块，因此您可以快速构建和试验 VR 网站和游戏：阅读使用 A-Frame 构建基本演示教程以获取更多详细信息。

沉浸感比游戏玩法或图形更重要 - 你必须感觉自己“在”体验中。这并不容易实现，但它不需要逼真的图像。恰恰相反，因为拥有以高帧率飞来飞去的基本形状可以赚很多钱。请记住：实验是关键 - 看看什么特别适合你的游戏。

WebVR 的未来

它正在发生 - 消费者设备现在正在进入市场，我们已经有 JavaScript API 在 Web 上支持它们。我们现在需要的只是一个稳定的规范，良好的用户体验和 UI，更好的硬件以及更多的工具和库 - 所有这些都即将出现。现在是潜入和尝试 WebVR 的最佳时机。

原文链接：WebVR — 网络虚拟现实 (mvrlink.com)