开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

蛮牛译馆

关注:539

当前位置:游戏蛮牛 技术专区 蛮牛译馆

查看: 1270|回复: 7

[AR/VR教程] 今日我们如何构建虚拟现实Web

[复制链接]  [移动端链接]
排名
7483
昨日变化
2

176

主题

213

帖子

1230

积分

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

UID
159865
好友
9
蛮牛币
2740
威望
0
注册时间
2016-8-1
在线时间
581 小时
最后登录
2017-6-25

蛮牛译员

发表于 2016-12-20 16:33:08 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
今日我们如何构建虚拟现实Web
01.png

到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上写了两个例子:
如果你还是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] 纯文本查看 复制代码
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#] 纯文本查看 复制代码
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。基本上我们不会用鼠标在场景中进行物理移动,此外,查看四周时也不用不到缩、放功能。

立体效果的实现
为了使用立体效果,我们要使用以下语句:
effect = new THREE.StereoEffect(renderer);
并在窗口的resize事件中,修改效果范围的大小
effect.setSize(width, height);
在每次调用requestFrame时,设置通过我们的效果渲染得到场景
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 SmusWebVR 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的浏览器上的实际效果:
02.png

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

03.png

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

04.png

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

05.png

CSS和WebVR
Mozilla也致力于将VR浏览能力集成到火狐夜间版中,但是成熟应用还需假以时日!不太走运,我没法让它在我的Mac和Oculus上设置运行起来。从Firefox的大会中Vladimir Vuki也提及将CSS 3D整合到全屏VR模式。
Vladimir博客上发布的一个例子,其中说到,CSS元素transform-style: preserve-3d将会进行两次渲染来自于两个视口的内容数据从而实现VR显示:

[C#] 纯文本查看 复制代码
#css-square {
  position: absolute;
  top: 0; left: 0;

  transform-style: preserve-3d;
  transform: translate(100px, 100px, 100px);
  width: 250px;
  height: 250px;
  background: blue;}




     蛮牛译林军福利多多哦!
155547iluo7umxezrb2ekr.png














回复

使用道具 举报

排名
19041
昨日变化
15

0

主题

20

帖子

41

积分

Rank: 1

UID
189254
好友
0
蛮牛币
41
威望
0
注册时间
2016-12-3
在线时间
7 小时
最后登录
2016-12-28
发表于 2016-12-20 21:52:03 | 显示全部楼层
新东西,看下留个座!

回复 支持 反对

使用道具 举报

排名
47671
昨日变化
96

0

主题

5

帖子

7

积分

Rank: 1

UID
194779
好友
0
蛮牛币
5
威望
0
注册时间
2016-12-21
在线时间
0 小时
最后登录
2016-12-21
发表于 2016-12-21 12:05:24 | 显示全部楼层
学习学习

回复

使用道具 举报

4四处流浪
359/500
排名
6413
昨日变化
3

0

主题

84

帖子

359

积分

Rank: 4

UID
44119
好友
1
蛮牛币
1518
威望
0
注册时间
2014-9-9
在线时间
133 小时
最后登录
2017-6-24
发表于 2016-12-21 12:51:59 | 显示全部楼层
学习学习
[发帖际遇]: 一个袋子砸在了 燃烧科技 头上,燃烧科技 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

3偶尔光临
252/300
排名
6536
昨日变化

0

主题

26

帖子

252

积分

Rank: 3Rank: 3Rank: 3

UID
132674
好友
0
蛮牛币
730
威望
0
注册时间
2015-12-26
在线时间
90 小时
最后登录
2017-6-8
发表于 2016-12-22 10:08:10 | 显示全部楼层
好东西,不错不错

回复

使用道具 举报

4四处流浪
307/500
排名
7665
昨日变化
5

1

主题

86

帖子

307

积分

Rank: 4

UID
19084
好友
0
蛮牛币
100
威望
0
注册时间
2014-3-26
在线时间
112 小时
最后登录
2017-6-9
发表于 2016-12-26 13:37:47 | 显示全部楼层
不错,好东西,以后可以持续关注

回复 支持 反对

使用道具 举报

5熟悉之中
698/1000
排名
3321
昨日变化
1

0

主题

206

帖子

698

积分

Rank: 5Rank: 5

UID
170014
好友
0
蛮牛币
2516
威望
0
注册时间
2016-9-21
在线时间
178 小时
最后登录
2017-6-25
QQ
发表于 2016-12-30 19:44:10 | 显示全部楼层
游戏蛮牛2017在哪里?

回复 支持 反对

使用道具 举报

2初来乍到
128/150
排名
11823
昨日变化
11

0

主题

28

帖子

128

积分

Rank: 2Rank: 2

UID
156414
好友
1
蛮牛币
213
威望
0
注册时间
2016-7-11
在线时间
52 小时
最后登录
2017-2-26
发表于 2017-1-12 18:02:20 | 显示全部楼层
好东西,不错不错

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表