从人眼立体视觉到WebVR

新知榜官方账号

2023-07-13 17:30:53

从人眼立体视觉到WebVR

外部世界是三维立体的,但是它在我们的视网膜上留下的投影却是二维的。因为大脑会自动利用视觉信息中的各种深度知觉的线索,“重建”出立体的感知。人眼立体视觉的原理基本是依靠深度知觉+双眼视差。

WebVRAPI目前还停留在草案阶段,仅能在安装了Firefoxnightly的OculusRift、Chrome的实验性版本和SamsungGearVR的浏览器上使用。除了使用原生API开发外,目前还可以使用Mozilla开发的A-Frame框架和Three.js。本文主要描述的是使用Three.js的移动浏览器WebVR体验。

Three.js是一个3DJavaScript库。封装了底层的图形接口,除了WebGL之外,Three.js还提供了基于Canvas、SVG标签的渲染器。2016年天猫双十一宇宙邀请函中酷炫的“一镜到底”就是用的Three.js实现的。

创建Three.js创建一个Three.js的项目,至少包括:

  1. 渲染器(Renderer)
  2. 场景(Scene)
  3. 相机(Camera)

WebGL和Three.js使用的三维坐标轴遵循“右手坐标系”。使用Three.js创建的场景是三维的,而通常情况下显示屏是二维的。相机它定义了三维空间到二维屏幕的投影方式。针对投影方式的不同,相机又分为正交投影(OrthographicCamera)与透视投影(PerspectiveCamera)。

正交投影,六个参数分别对应x、y,z轴的最小最大值。透视投影,四个参数分别是视野在y-z平面的角度、投影平面宽高比、近平面(沿Z负轴)的距离,远平面(沿Z负轴)的距离。此外项目中加入光源(Light)与阴影(Shadow)会让场景的渲染效果更加丰富逼真。

我们以Three.js官方examples中的WebVR360°全景图为例,看看一个完整的WebVR项目还依赖哪些js。其他VR插件除了引入Three.js外,还引入了:

  1. VRControls.js
  2. VREffect.js
  3. WebVR.js

编写全景图项目引用完Three.js和3个VR插件后,就可以开始编写全景图项目主要代码了。首先需要判断设备是否支持WebVR,不支持就需要在屏幕上提醒用户。开始创建渲染器、场景和相机。接着就是制作360°全景场景,一般可分为球面全景图方式、柱状全景图方式和立方体全景图方式。然后再用Canvas把全景图片源文件转化为所需数量的贴图面,并用THREE.Texture创建纹理贴图对象保存。

因为VREffect.js会渲染左右2个屏幕,左相机对应layers=1的skyBox,所以还需要创建一份右相对应layers=2的skyBoxR。然后加入VRControls、VREffect和按钮。最后监测一下window窗口的大小变化,在requestAnimationFrame中不断监测设备状态并更新到Camera和WebVR渲染上。剩下的就是带上VRHMD设备查看全景图。

注:部分图片来自网络

本页网址:https://www.xinzhibang.net/article_detail-7852.html

寻求报道,请 点击这里 微信扫码咨询

关键词

人眼立体视觉 WebVR Three.js

分享至微信: 微信扫码阅读

相关工具

相关文章

相关快讯