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
,并将其分配给变量 — 使用它您可以设置场景、获取眼睛参数、设置视野等。例如:devices
gHMD
.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的最佳时机。
- 点赞
- 收藏
- 关注作者
评论(0)