VR(Virtual Reality)是利用电脑模拟产生一个三维空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户感觉仿佛身历其境,可以及时、没有限制地观察三维空间内的事物。用户进行位置移动时,电脑可以立即进行复杂的运算,将精确的三维世界视频传回产生临场感。—— 维基百科
了解VR显示原理前,先了解我们人眼的立体视觉的成像原理:
人眼的视觉是可以感觉出深度的,也就是 深度知觉(depth perception) 。而有了深度的信息后,才能判断出立体空间的相对位置。
另外,由于两个眼睛的位置不一样(一般人两眼相距5~7厘米),所以看到的东西会有 两眼视差(binocular parallax) ,大脑再将这两个图像做融合处理,从而产生立体的感觉(即所谓的 binocular cues)。
头戴式显示器(HMD)是 VR 目前最常见的一种体验方式。它的原理是将小型二维显示器所产生的图像经由光学系统放大。具体而言,小型显示器所发射的光线经过凸状透镜使图像因折射产生类似远方效果。利用此效果将近处物体放大至远处观赏,从而达到所谓的全息视觉(Hologram)。另外,显示器被分为左右两个部分,分别显示左右眼看到的图像。大脑再将左右眼所看到的图像(两眼视差)做融合处理,从而产生 3D 效果。同时,HMD 会根据头部运动让视角与之同步。综合上述特性,用户通过 HMD 体验 VR 时就如同在现实中观看一样,这种体验也被称为沉浸式体验。
目前市场上主要有以下3种HMD设备:
对于想初步体验或入门 VR 的用户,推荐谷歌的 Carboard 或国内的性价比高的滑配式设备。
Google Carboard
VR 是最具科幻色彩以及梦幻体验的东西,单独一个 HMD 并不能发挥 VR 的最大效果,加上“属性加成”的周边才能体验极致的 VR。
2015年,澳大利亚开设了世界首家VR沉浸式竞技游戏店—— Zero Latency 。 这家店拥有 4300 平方英尺,安装有 129 台 PlayStation Eye 摄像头,用于捕捉玩家的动作。整套系统可以最多同时供 6 名玩家进行游戏。
现实与虚拟
当然,各式各样的VR周边设备也越来越多,如 Virtuix Omni 跑步机:
Virtuix Omni
这些设备无疑会增强了VR的体验,给用户带来更加刺激与逼真的体验。
上文说了这么多关于 VR 的东西,视乎还没有入正题(⊙﹏⊙)。
许多 VR 体验是以应用程序的形式呈现的,这意味着你在体验 VR 前,必须进行搜索与下载。而 Web VR 则改变了这种形式,它将VR体验搬进了浏览器,Web + VR = WebVR。
下面根据我目前的见解,分析一下 Web VR 的现状。
WebVR 是早期和实验性的 JavaScript API,它提供了访问如 Oculus Rift 和 Google Cardboard 等 VR 设备功能的 API。
VR 应用需要高精度、低延迟的接口,才能传递一个可接受的体验。而对于类似 device orientation event 接口,虽然能获取浅层的 VR 输入,但这并不能为高品质的 VR 提供必要的精度要求。WebVR 提供了专门访问 VR 硬件的接口,让开发者能构建舒适的 VR 体验。
WebVR API 目前可用于安装了 Firefox nightly 的 Oculus Rift、Chrome 的实验性版本和 Samsung Gear VR 的浏览器。当然,如果你现在就想在你的移动端浏览器体验 WebVR,可以使用 WebVR Polyfill 。
在 Web 上开发 VR 应用,有下面三种(潜在)方式:
由于 WebVR 仍处于草案阶段并可能会有所改变,所以建议你基于 webvr-boilerplate 进行 Web VR 开发。
上面说道,在 Web 上开发 VR 应用有3种(潜在)方式,前两种都离不开直接接触 Three.js,而第三种方式则为时尚早。对于没接触过 Three.js,但又想体验一把 Web VR 开发的同学们来说,无疑会存在一定的门槛。
如果你想以较低的门槛体验一把 Web VR 开发,那么可以试试 MozVR 团队 开发的 A-Frame 框架。
PS:写着写着,A-Frame的版本从v0.2升到到v0.3(这很前端),但文档等各方面变得更加完善了。
A-Frame 是一个通过 HTML 创建 VR 体验的开源 WebVR 框架。通过该框架构建的 VR 场景能兼容智能手机、PC、 Oculus Rift 和 HTC Vive。
MozVR 团队开发的 A-Frame 框架的目的是:让构建 3D/VR 场景变得更易更快,以吸引 web 开发社区进入 WebVR 的生态。WebVR 要成功,需要有内容。但目前只有很少一部分 WebGL 开发者,却有数以百万的 Web 开发者与设计师。A-Frame 要把 3D/VR 内容的创造权力赋予给每个人。
<a-scene>
标签。
talk is cheap,show me the c… hello world.
实现代码如下:
// 引入aframe框架<scriptsrc="./aframe.min.js"></script><a-scene><!-- 球体 --><a-sphereposition="0 1 -1"radius="1"color="#EF2D5E"></a-sphere><!-- 盒(此处是立方体) --><a-boxwidth="1"height="1"rotation="0 45 0"depth="1"color="#4CC3D9"position="-1 0.5 1"></a-box><!-- 圆柱 --><a-cylinderposition="1 0.75 1"radius="0.5"height="1.5"color="#FFC65D"></a-cylinder><!-- 平面 --><a-planerotation="-90 0 0"width="4"height="4"color="#7BC8A4"></a-plane><!-- sky元用于为场景添加背景图或显示360度的全景图 --><a-skycolor="#ECECEC"></a-sky><!-- 用于指定摄像机的位置 --><a-entityposition="0 0 4"><a-camera></a-camera></a-entity></a-scene>
基本概念(以 v0.3 版本为参考):
当然,上述案例只是 A-Frame 的 Hello World demo。若你感兴趣,可以深入学习,再结合自己的想法,相信你能作出让人拍手称赞的作品。
下面就列举一些 WebVR 的相关案例,如果你已具备了 VR 的体验环境,不妨体验一下。
联系客服