WebVR — 网络虚拟现实

news2024/11/26 14:47:42

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

虚拟现实设备

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

五种不同的VR设备，从纸板到高端。

注意：有关更多信息，请阅读我们的 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。

景观的 3D 表示：这是一个粉红色的日落，背景是蓝色的山地，周围环绕着镜海和第二个计划中深蓝色的岛屿。

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

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

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