WebVR — 网络虚拟现实

虚拟现实的概念本身并不新鲜,但现在我们拥有让它正常工作的技术,以及一个JavaScript API可以在Web应用程序中使用它。本文从WebVR在游戏中的使用角度介绍了WebVR。

WebVR — 网络虚拟现实
推荐:使用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构建基本演示教程以获取更多详细信息。

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

WebVR 的未来

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

3D建模学习工作室 整理翻译,转载请注明出处!

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号