都说今年是VR元年,VR满天飞我已傻傻看不清,先来听听尾巴小妹妹怎么解读前端VR的吧。

前端VR初体验_java啥是VR?Vertical Reality虚拟现实,是一种综合应用计算机图形学、人机接口技术、传感器技术以及人工智等技术,制造逼真的模拟环境,并能有效的地模拟人在自然环境中的各种感知的高级的人机交互技术。 
说人话就是,VR创建了一个虚拟的立体的三维世界,这个立体的三维世界还会对你的一系列动作做出对应的回应,让你反仿佛于真实的世界里。
构建前端VR应用--全景漫游1.获取全景图又称360度全景图,这个就是虚拟世界的基础。一般是通过专业的360度相机来获取,没有专业设备就用Google。
前端VR初体验_java_02
2.创建立体空间立体空间是由立方体提供的,常见的立方体有三种,立方体、球体和圆柱体。通过threejs直接创建立方体

通过多个div拼接,设置stage的perspective,container、box的transform-style:preserve-3d;然后对六个面进行transform变换,这里面一定要注意transform对坐标轴的影响。
3.贴图我们创建的立方体就像像一座房子,获取到的全景图就像一张大的墙纸,为了看到墙纸上的所有内容,我们需要进行贴图操作。对于球体,我们可以直接贴图,如下:前端VR初体验_java_03对于立方体,我们需要专业的工具将全景图分隔成6块,分别对应立方体的六个面。前端VR初体验_java_044.放入相机贴好图,虚拟的三维空间基本完成,但是此时我们的视角还处于立方体的外部,我们看见的仍然是个完整的立方体。为了进入立方体内部,体验你家客厅全景,我们需要相机的帮助。

相机可以模拟人的视角,充当着‘眼睛’的角色,它将虚拟世界中的内容呈现给我们。我们移动它的位置,将它放入立方体内部,调整焦距,它就能将立方体内部的图像呈现给我们。


下图演示相机从立方体外部进入内部:


前端VR初体验_java_05


相机分为两种:正投影相机和透视投影相机。正投影相机远近高低比例都相同,而透视投影相机则同我们人眼类似,远处的物体比近处的物体小。

前端VR初体验_java_06这里我们使用的是透视相机:前端VR初体验_java_07视角:相机的视野角度大小aspect:相机视野的宽高比,一般取画布的宽高比近平面距离:可视范围离相机最近的距离,一般取很小的值:1、0.1远平面距离:可视范围离相机最远的距离,一般取比较大的值:1000,不要取的过大,会影响渲染性能。前端VR初体验_java_08
5.漫游虚拟世界

在虚拟世界中,相机就是我们的眼镜,我们要漫游虚拟世界,其实就是转动相机。

通相机的交互有几种方式:

a.通过手指或者鼠标移动相机;b.通过陀螺仪控制相机,绑定陀螺仪之后,你就可以晃动手机漫游虚拟世界了。
下图是陀螺仪控制转动(该图片来自卢耀华童鞋)
更多人眼所看见的世界是有深度的、立体的世界,这是因为人的左右眼覆盖范围是不一样的,两眼的视角有些细微的差别,称为视差。人类的大脑很巧妙地将两眼的图像融合,从而产生出有空间感的立体视觉效果在大脑中。
下图分别是左眼和右眼单独看到的景象,跟着我左手右手一个慢动作~~伸出你的手指,验证一下。前端VR初体验_java_09
VR想要给人更好的沉浸感,就要将这种立体感呈现出来。 这需要模拟人眼的视差,同时提供跟随头部运动的视角。
1.模拟视差-分屏由于显示屏幕只有一个,为了让左、右眼所看的图像各自独立分开,产生视差,从而更有立体感和沉浸感。通常会根据用户瞳距将屏幕分割成具有一定视差的两部分,可以通过VREffect.js来完成。 
前端VR初体验_java_10
2.跟随头部运动的视角这里就要用到头戴式显示器(HMD),HMD是 VR目前最常见的一种体验方式。它的原理是将小型二维显示器所产生的图像经由光学系统放大。具体而言,小型显示器所发射的光线经过凸状透镜使图像因折射产生类似远方效果。利用此效果将近处物体放大至远处观赏,从而达到所谓的全息视觉(Hologram)。同时,HMD会根据头部运动让视角与之同步(Google Cardboard是利用的手机陀螺仪来达到运动的视角)。如果你有这个设备,你就可以通过混动头来控制虚拟世界了。
现在YouTube的所有视频都支持VR模式,所以估计也有不少人有入手VR头戴式设备,其中门槛最低的就是Google这货了,两张夜宵券搞定。
前端VR初体验_java_11

后续:webVR作为实验性API已陆续被Chrome、Firefox、Samsung Internet for Gear VR等支持,这也是后面我们研究的方向。