今日我们如何构建虚拟现实Web

今日我们如何构建虚拟现实Web
 

到2020年，VR市值预期将高达70亿美元。而这段时间中，web界面也绝不会甘于将自己落寞于2D的世界里。事实上，已经有一些简单的方法可以将VR带进浏览器，当然使用它们也是非常有趣的。

在开启虚拟现实web的开发之旅前，先说明下：有三种可行方案可以达成该需求：

· JavaScript，Three.js+设备定向

· JavaScript，Three.js和WebVR（俺的新宠）

· CSS和WebVR（仍在早期探索阶段）

我会依次探讨这些技术，并为每种实现方法提供一个简短的总结。

JavaScript，Three.js+设备定向

当前大部分基于浏览器的虚拟现实项目都是在deviceorientation事件上实现的。该事件会通知浏览器当前设备的方向，并允许浏览器提取其旋转和倾斜的事件。这样，就能在VR视野中检测人们的活动，并进而调整摄像机以跟踪在他们盯住的位置。

为了在浏览器中获得优秀的三维场景，我们使用three.js，这是一个快速创建3D图形和场景的javascript框架。它会负责处理3D体验中的大量复杂事务，从而让你集中精力于构建自己的场景内容。

使用Device Orientation方法，我在SitePoint上写了两个例子：

· Bringing VR to the Web with Google Cardboard and Three.js

· Visualizing a Twitter Stream in VR with Three.js and Node

如果你还是three.js的新手，不知道怎么在在场景中使用它，我建议还是先看看上面两篇文章对其进行深入了解。在此，我仅谈及关键概念，但是概念嘛，总是在更高一个层次上的。

这些javascript文件中的关键组件包括：（您可以从上面的例子程序中得到这些js文件，当然也可以在three.js例子中下载）

· three.min.js :three.js的框架

· DeviceOrientationControls.js 这是个three.js的插件，为我们提供上面谈到的设备定向数据，并移动摄像机以适应设备的运动。

· OrbitControls.js 备用控制器支持。用户没有能提供定向事件的设备时，使用鼠标代替之；

· StereoEffect.js three.js中的VR效果文件，将显示内容分开，像VR一样为每个眼睛产生角度稍有不同的为立体图像，这样无需我们进行任何复杂工作，就可以建立起真实的VR分屏显示效果了。

设备定向

进行设备定向控制的代码如下：

[AppleScript] 纯文本查看 复制代码

?

 

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

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();

  }}

在存在兼容设备时，DeviceOrientation 事件监听器提供α、β和γ三个值。如果缺少α值，表明无法获得我们的控制器方向数据来支持旋转控制。此时，就使用Orbit控制来代替.

如果可以得到α。就创建一个设备方向控制对象，并将和摄像机有关的参数赋予它。同时在用户点击屏幕时进行全屏化（大家都不希望在VR浏览时显示出浏览器的地址栏吧）。

Orbit 控制

如果无法获得α，表明我们没有办法访问到设备的方向事件，Orbit控制可以转而通过使用鼠标拖动的方式来控制摄像机移动。代码如下：

[C#] 纯文本查看 复制代码

?

 

1

2

3

4

5

6

controls = newTHREE.OrbitControls(camera, element);

controls.target.set(

  camera.position.x,

  camera.position.y,

  camera.position.z);

controls.noPan = true;

controls.noZoom = true;

上述代码中让大家迷惑的可能是noPan 和noZoom。基本上我们不会用鼠标在场景中进行物理移动，此外，查看四周时也不用不到缩、放功能。

立体效果的实现

为了使用立体效果，我们要使用以下语句：

effect = new THREE.StereoEffect(renderer);

并在窗口的resize事件中，修改效果范围的大小

effect.setSize(width, height);

在每次调用requestAnimationFrame时，设置通过我们的效果渲染得到场景

effect.render(scene, camera);

以上就是是设备定位方式实现VR体验的基本原理了。对于google的Cardboard来说，这种方式简单、有效，但它在Oculus Rift工作不佳，而下面的方法对于Rift就友好多了。

JavaScript, Three.js 和WebVR

希望能使用Oculus Rift设备的方向数据？目前WebVR是一个解决方案。WebVR是一组较早提出的，实验性的JavaScript API，通过WebVR可以访问虚拟现实设备，如：Oculus Rift 和Google Cardboard的各项特征数据。当前，可以在Firefox Nightly 或一些 移动版的Chrome和Chromium测试版本中得到它。需要谨记在心的一件事是：WebVR尚在草案阶段，变更会比较频繁，可以进行测试使用，但是之后可能需要进行适当的调整。

总的来说，WebVR API通过navigator.getVRDevices方法访问VR设备的信息：

在这篇文章中我不会涉及详细的技术细节，这些内容我会之后在WebVr的SitePoint 文档中详细谈及，如果你对WebVR感兴趣并希望了解更多，可以去查看下WebVR editor草案 。我不愿更深入讨论WebVR草案的原因是有更简单的方法使用它。

上面说到的更简单的实现WebVR API方法是使用Boris Smus的WebVR Boilerplate。它为WebVR提供了一个优秀的基线版本实现，此外还很大气的添加了不同设备支持，这个是目前我所知的最好的web VR实现啦，如果你想为web内容建立VR体验，这会是良好的开始。

为此，首先在GitHUb上下载WebVR Boilerplate。

这样你可以专注于编辑index.html，其他设置都使用下载的工程设置。当然，也可以以它为基础为自己的工程创建特定的插件。如果你想比较下不同实现之间的差异，我已经将自己上节中的提到的Visualizing a Twitter Stream in VR with Three.js and Node 这两个例子迁移到基于WebVR实现的虚拟现实Twitter Stream.

为了将WebVR Boilerplate工程包含到自己的工程中，需要用到的文件有：

· three.min.js 必须的，这个是three.js框架啦

· VRControls.js 一个WebVR提供的three.js的VR插件，可以在Boilerplate工程的bower_components/threejs/examples/js/effects/VREffect.js中找到它。

· webvr-polyfill.js 浏览器的多边形填充库，还不完全支持WebVR，（也可以在GitHub 上的Boilerplate项目的bower_components/webvr-polyfill/build/webvr-polyfill.js中找到它。

· webvr-manager.js 这是Boilerplate的代码，帮你管理一切虚拟现实相关事宜，包括提供进入和退出VR模式的方法（可以build/webvr-manager.js找到它）

控制实现

VR控制设置相当简单，只需将一个新的VRControls对象赋值给之前使用的controls变量即可。由于Boilerplate来负责处理不兼容VR的浏览器VR控制，这样，Orbit控制和设备方向控制都不必要进行考虑，这也就意味着你的场景在Google Cardboard上也可以顺畅工作！

VR效果实现

实现VR效果的调用和StereoEffect的类似，只需在语句中用VREffect替换StereoEffect即可。

effect = new THREE.VREffect(renderer);

effect.setSize(window.innerWidth, window.innerHeight);

差别就是这种方法我们不使用StereoEffect进行渲染了，而是通过VR管理器负责。

VR管理器

现在，VR管理器负责VR进入和退出等诸多事件的处理，因此，它也负责我们场景的最终渲染，初始条件下，使用下面的语句对其进行设置：

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

VR管理器还提供了一个按钮让支持VR浏览器的用户进入VR模式，或全屏模式（如果浏览器无法支持VR）我们希望在移动平台上使用全屏模式，参数hideButton说明是否隐藏那个按钮，很明显，我们都不想隐藏它。

渲染的调用和下面类似，其中使用了来自three.js的update()函数的一个timestamp变量：

设置好这些后，VR实现就搞定了！可以将web转换为依赖设备的不同显示格式。

如果你的renderer.getSize()返回错误？这个虫让我抓狂了数个小时，你要做的只是更新下three.js即可！

WebVR Boilerplate实际应用效果

这个是我推特上的例子显示了在支持VR的浏览器上的实际效果：

 

下面是点击VR图标后，在Oculus Rift中看到的效果：

 

这个是在手机上看到的效果，设备定位让我们能够在环视场景，而且无需分屏显示，内容效果很流程。

 

如果在移动设备上点击VR的图标，在Google CardBoard之流的设备上会进入全屏显示模式。

 

CSS和WebVR

Mozilla也致力于将VR浏览能力集成到火狐夜间版中，但是成熟应用还需假以时日！不太走运，我没法让它在我的Mac和Oculus上设置运行起来。从Firefox的大会中Vladimir Vuki也提及将CSS 3D整合到全屏VR模式。

Vladimir博客上发布的一个例子，其中说到，CSS元素transform-style: preserve-3d将会进行两次渲染来自于两个视口的内容数据从而实现VR显示：

[C#] 纯文本查看 复制代码

?

 

1

2

3

4

5

6

7

8

#css-square {

  position: absolute;

  top: 0; left: 0;

 

  transform-style: preserve-3d;

  transform: translate(100px, 100px, 100px);

  width: 250px;

  height: 250px;

  background: blue;}