如何在 Web 上构建虚拟现实 已翻译 100%

oschina 投递于 2015/09/22 18:02 (共 13 段, 翻译完成于 09-25)
阅读 7287
收藏 113
5
加载中

有人认为虚拟现实将在 2020 年达到 70 亿美元的价值。在那之前,web 肯定不会一直停留于 2D 环境。实际上,已经有一些简单的方法可以将虚拟现实带进浏览器了。而且那弄起来也非常有趣!

要开始你的虚拟 Web 开发之旅,有这么三种可行的方式:

  • JavaScript,Three.js 和监视设备朝向

  • JavaScript,Three.js 和 WebVR(我最近比较喜欢的方式)

  • CSS 和 WebVR(时日尚早)

我会将每一种方式都过一遍,简要展示下它们各自是如何工作的。

大大头
大大头
翻译于 2015/09/22 20:17
1

JavaScript,Three.js 和监视设备朝向

当前,大多数基于浏览器的虚拟现实项目都是利用浏览器的 deviceorientation 事件。此事件告诉浏览器设备的朝向,而且允许浏览器在设备旋转或倾斜时有所动作。从虚拟现实的角度看,此功能允许你侦测到某人看向某个方向,然后你可以调整摄像头以跟随他的视线。

为了在浏览器里获得良好的 3D 场景,我们使用一个可以方便地创建 3D 形状和场景的 JavaScript 框架three.js。它封装了创建 3D 内容的大部分复杂性,让你可以专注于把你希望的东西放进你的场景。

大大头
大大头
翻译于 2015/09/22 20:33
1

我在 SitePoint 上写过两个使用设备朝向方法的示例:

如果你不熟悉 three.js 和组建场景,我推荐你看一下上面的两篇文章以更深入的理解此方法。我将只大致介绍下主要概念。

下面是要用到的关键 JavaScript 文件(你可以从上面的示例中获取,也可以 从three.js 例子下载):

  • three.min.js– three.js 框架

  • DeviceOrientationControls.js– 这是一个 three.js 插件,它帮助我们完成之前提到过的监视设备朝向,可以另摄像头根据设备的移动进行调整。

  • OrbitControls.js– 这是一个备用的控制器,它可以在没有设备朝向事件的时候用鼠标调整摄像头。

  • StereoEffect.js– 这是一个 three.js 的效果插件,可以针对每只眼睛对画面进行细微的角度调整,就像虚拟现实该有的立体效果。这使得我们不用做任何复杂的工作,就可以创造实打实的虚拟现实分屏效果。

大大头
大大头
翻译于 2015/09/23 13:52
1

设备朝向

使用设备朝向控制的代码大致如下:

function setOrientationControls(e) {
  if (!e.alpha) {
    return;
  }
  controls = new THREE.DeviceOrientationControls(camera, true);
  controls.connect();
  controls.update();
  element.addEventListener('click', fullscreen, false);
  window.removeEventListener('deviceorientation', setOrientationControls, true);
}
window.addEventListener('deviceorientation', setOrientationControls, true);
function fullscreen() {
  if (container.requestFullscreen) {
    container.requestFullscreen();
  } else if (container.msRequestFullscreen) {
    container.msRequestFullscreen();
  } else if (container.mozRequestFullScreen) {
    container.mozRequestFullScreen();
  } else if (container.webkitRequestFullscreen) {
    container.webkitRequestFullscreen();
  }
}

在可用设备上,设备朝向事件监听器提供一组 alpha,beta 和 gamma 值。如果没有 alpha 值就不能通过设备朝向进行控制,转而替代的是轨道控制。

如果有 alpha 值,那么我们就可以使用设备朝向控制摄像头。如果用户轻击屏幕,我们还可将场景在全屏模式下呈现(我们可不想在虚拟现实下看到浏览器地址栏)。

大大头
大大头
翻译于 2015/09/24 13:06
2

轨道控制

如果 alpha 值不存在,我们也就不可以访问设备的定位事件,这替代了通过摄像头拖拽鼠标的技术。这看起来就像这样:

controls = new THREE.OrbitControls(camera, element);
controls.target.set(
  camera.position.x,
  camera.position.y,
  camera.position.z
);
controls.noPan = true;
controls.noZoom = true;

主要可能混乱的代码是上面的 noPan 和 noZoom。基本上,我们不需要通过鼠标移动身体的场景,我们也不希望能够放大或缩小 —— 我只是想环视。

溪边九节
溪边九节
翻译于 2015/09/23 20:12
2

立体效果

为了使用立体效果,我们先这么定义:

effect = new THREE.StereoEffect(renderer);

然后再窗口重设尺寸时,相应更新它的尺寸:

effect.setSize(width, height);

在每次 requestAnimationFrame 的时候,使用效果渲染场景:

effect.render(scene, camera);

以上便是使用设备朝向方法达到虚拟现实的基本方法。这种方法对于简易的 Google Cardboard 实现效率还可以,但在 Oculus Rift 上就不是太高效了。下面要介绍的方法在 Rift 上表现得要好得多。

JavaScript,Three.js 和 WebVR

对像是 Oculus Rift 这样的头戴式虚拟设备的朝向感兴趣?WebVR 是当前可行的方法。WebVR 是一种先锋的实验性质的 JavaScript 的 API,它提供访问 Oculus Rift 和 Google Cardboard 等虚拟设备的能力。当前,它在 Firefox Nightly 和一些experimental builds of Mobile Chrome and Chromium 上可用。需要记住的一点是,WebVR 的细节依然在草稿阶段且随时可能会改变,所以可以拿它做一些实验,而且过些时候你可能需要做一些调整。

大大头
大大头
翻译于 2015/09/24 13:26
2

总之,WebVR API 可以让你通过如下方式访问虚拟现实设备:

navigator.getVRDevices

我不会在这里讲太多细节(在之后 SitePoint 上的文章中我会讲更多细节的东西),如果你对细节感兴趣的话可以看看 the WebVR editor’s draft。我不讲细节的原因是有更简单的方法实现 API。

上面说的更简单的实现 WebVR API 的方法是使用 WebVR Boilerplate from Boris Smus。在不同的设备上,它可以保证基本的 WebVR 功能,同时考虑到用户体验上的优雅降级。它是我至今经过的最好的 web 虚拟现实实现。如果你在找寻基于 web 的虚拟现实实现方案,这便是当前最好的选择。

要开始使用此方法,先下载 WebVR Boilerplate on Github

大大头
大大头
翻译于 2015/09/24 13:37
2

你可以使用其中的文件,专心编辑 index.html,或者你也可以从草稿开始实现特定的插件。如果你想比较两者的区别,我已经把上面提过的 Visualizing a Twitter Stream in VR with Three.js and Node迁移到 WebVR powered Twitter Stream in VR 了。

要把此项目加到你自己的草稿上,你需要这些文件:

  • three.min.js – 当然是我们的 three.js 框架

  • VRControls.js – 一个 three.js 插件,用于通过 WebVR 进行虚拟现实的控制 (可以从样板项目找到 bower_components/threejs/examples/js/controls/VRControls.js)

  • VREffect.js – 一个 three.js 插件,用于在 Oculus Rift 上显示虚拟现实效果的画面(可以从样板项目找到 bower_components/threejs/examples/js/effects/VREffect.js)

  • webvr-polyfill.js – 这是一个用于对 WebVR 支持不完善的浏览器的填充工具(可以从GitHub 上找到,或者从样板项目找到 bower_components/webvr-polyfill/build/webvr-polyfill.js)

  • webvr-manager.js – 这是样板代码的一部分,它管理所有的东西,包括提供进入和离开虚拟现实模式的方法(可以从 build/webvr-manager.js 找到)

实现它仅需要稍微调整下设备朝向方法。以下是给想尝试的朋友的一份综述:

大大头
大大头
翻译于 2015/09/25 12:36
2

控制器

VR 控制器是很容易创建的,我们只需要通过创建一个 VRControls 对象给我们之前使用的 controls 变量就可以了。由于 Boilerplate 目前应该注意浏览器没有 VR 功能,因此轨迹控制器和设备方式控制器不是必须的。这意味着你的动画应该依然在 Google Cardboard 上能够很好的运行

controls = new THREE.VRControls(camera);

VR Effect

Effect 是非常类似于实现了 StereoEffect 类的类。只不过用新的 VREffect 类替换了原来的:

effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

然而,在这个方法里我们不会通过 Effect 渲染,而是,通过我们的 VR 管理器来渲染。

我是菜鸟我骄傲
我是菜鸟我骄傲
翻译于 2015/09/24 06:41
2

VR管理器

VR 管理器关注我们所有进入或退出 VR 等等诸如此类的,因此这是我们的场景最终渲染的地方。我们通过下面的方式初始化管理器:

manager = new WebVRManager(renderer, effect, {hideButton: false});

如果VR管理器在一个可兼容的浏览器里,那么它会提供一个可以让我们进入VR 模块的按钮,如果它们的浏览器不支持 VR,那么进入全屏(全屏是我们为移动端准备的)。hideButton 参数表示我们是否想隐藏按钮或不隐藏按钮,我们定义为不隐藏!

我们像这样去调用渲染,它使用的 timestamp 变量是来自 three.js 的 update() 方法:

function update(timestamp) {
  controls.update();

  manager.render(scene, camera, timestamp);}

在所有的地方,你都应该让 VR 根据设备的不同而转化它本身的实现。

我是菜鸟我骄傲
我是菜鸟我骄傲
翻译于 2015/09/24 18:49
2
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(13)

化境
化境
文章只讲述了在浏览器里实现3D技术。我觉得虚拟现实的关键在于怎样让使用者感觉到以第一人称模式出现在虚拟世界中。
wishvk
wishvk
虚拟办公室,节省资源,交流方便,以后可以在五线城市办公,拿一线城市的薪水
公司可以把高额的办公室租金,发给每位任职者
源的开始
源的开始
效果 不咋滴啊 希望越来越好
阿紫
阿紫
看不懂 , 好像很厉害
提莫队长
提莫队长
会不会出现立体的马云网?
__JM_Joy__
__JM_Joy__
让浏览器支持多几种脚本就好了
huangjacky
huangjacky
mark
adoyle
adoyle
不错的创意啊
nant
nant
great,最近正研究这个方向
游客
游客
这个题目好大
返回顶部
顶部