写给VR手游开发小白的教程:(六)Cardboard如何实现沉浸式VR体验之构造双眼

沉浸体验是VR的核心也是一直以来的技术难点,虚拟现实的发展一直专注于怎样让用户获得更好的沉浸式体验,这涉及到多个领域的多项技术,上至渲染优化,性能优化,下至人眼的构造,肢体的运动与感知。
Cardboard也为沉浸式体验提供了一种方案,本篇主要介绍Cardboard是用哪些技术实现VR体验的。


之前有人和我说,用Unity实现VR效果,很简单,新建两个Camera,相隔一定长度,然后把两个摄像机的viewport,分屏输出,就实现了VR,乍一听还挺有道理的,但是仔细一想,这种实现方式,漏洞百出,更夸张的说,它可能根本算不上VR


首先我们要明白沉浸式的虚拟现实系统是怎样的系统?


以下摘自百度百科:
沉浸式虚拟现实其明显的特点是:利用头盔显示器把用户的视觉、听觉封闭起来,产生虚拟视觉,同时,它利用数据手套把用户的手感通道封闭起来,产生虚拟触动感。系统采用语音识别器让参与者对系统主机下达操作命令,与此同时,头、手、眼均有相应的头部跟踪器、手部跟踪器、眼睛视向跟踪器的追踪,使系统达到尽可能的实时性。临境系统是真实环境替代的理想模型,它具有最新交互手段的虚拟环境。


那么我们从第一个特征开始:虚拟视觉


虚拟视觉是一个很抽象的概念,要去理解他,必须要进行具体化,而我们手上正好有Unity这样的工具可以帮助我们实际去感受,什么是虚拟视觉。



这是Cardboard的主物体,我们把它全部展开,发现CardboardMain下面有三个层级,Head是CardboardMain的子物体,GazePointer和Main Camera分别又作为Head的子物体,而Main Camera下又附带着两个Camera,,可能有人不明白为什么这样设置,别担心,等我们介绍完你就明白了。


纵观整一个CardboardMain,发现带有Camera组件的只有Main Camera和他所属的两个子物体,如上图所示,三个Camera的近裁面大小并不一样,我们截图进行一下对比



Main Camera Left和Main Camera Right的近裁面分别是相比Main Camera的近裁面等高但是宽度减小的两个矩形,而且两个矩形不重叠,它们相差了一定间隔。

这个间隔看似不起眼,实际就很有讲究了,要阐明其原理,首先要从3D电影的原理讲起:


/***********************************************************************************************************************************/


不知道大家有没有在脱掉3D眼镜的情况下,观察3D电影的屏幕,会发现其实屏幕上的画面,很模糊,看起来像是两幅画面的叠加。但是戴上眼镜以后瞬间清晰了,而且更加逼真震撼。

3D电影的原理其实很简单,它确实是利用两台并列安置的电影摄影机,同步拍摄出两条略带水平视差的电影画面(要注意的是,这样的两幅画面,并不是时间上的先后关系,而是在拍摄时,摄影机摄像位置的空间上的间距),所以,一部只用一个摄像机拍摄的电影,无论用什么方法也成为不了3D电影,3D的基础,就是两幅在不同点观察的画面。

为什么要这样做?

做一个小实验吧,先闭上左眼,同时睁开右眼。

然后迅速睁开左眼,同时闭上右眼

再回到第一步,不停的循环。比对一下,左眼中的世界,和右眼中的世界,是一样的吗?


这就是我们视觉的运行方式,两眼在不同的空间位置去观察这个世界,接受不同的反射光线,然后被大脑所接受,形成一个条件反射,我们在看“现实”的世界,所有物体都是实际存在的,都是有空间大小的。这就是我们感觉的“3D”


问一个很玄乎的问题。在看一幅画的时候,为什么我们知道是在看一幅画,而不是画中的世界?


也许我们的双眼在看这幅画的时候,大脑就已经确定了这是一幅画,里面的物体都是处于“画”这个平面上的,我们永远不可能进入到画中去看画中的世界。


然而科学的进步告诉我们,真的可以进入画中的世界,只要在画中给我们的眼睛建模,形成“画中的视觉“。


如何建模呢?

很简单的一种方式,像3D电影拍摄一样,用摄像机替代我们的双眼,但是摄像机获得的画面并不能直接投射到我们的视网膜上被大脑感知,我们还需要一样东西,3D眼镜。


3D眼镜将匹配的偏振光接受,拒绝不匹配的光线,这样的设计导致了,我们的左右眼可以获取到对应的画面,而两个画面互不影响。

于是,两幅用摄像机模拟眼睛拍摄的画面,就在我们的左右视网膜上分别投影出来了。


这就是虚拟视觉。


用一句话概括就是,把自己的双眼“放”到虚拟世界中去,“感知”这个世界的光线,让你觉得这个世界像是实际存在的,于是“虚拟”就变成了“现实”。


/***********************************************************************************************************************************/


现在我们来看Cardboard是怎么实现虚拟视觉的,Main Camera Left和Main Camera Right上都有一个脚本,叫Cardboard Eye.cs


这是关于此脚本的介绍:

Controls one camera of a stereo pair.  Each frame, it mirrors the settings of the parent mono Camera, and then sets up side-by-side stereo with an appropriate projection based on the head-tracking data from the Cardboard.SDK object.To enable a stereo camera pair, enable the parent mono camera and set Cardboard.SDK.vrModeEnabled = true.

控制一对立体摄像机中的其中一个,每一帧都复制其父物体上的单摄像机的设置,然后根据从Cardboard.SDK对象得到的头部追踪数据同合适的投影来建立立体像对。

要启用立体摄像机对,先启用父物体的单摄像机并置Cardboard.SDK.vrModeEnabled = true


显然Cardboard是用这对摄像机来产生立体图像的,这个摄像机Cardboard给了个定义叫stereo camera,介绍里还涉及到一个摄像机,叫mono Camera,这个mono Camera就是Main Camera物体上camera组件



为什么要叫mono Camera或者说这个mono Camera有什么用呢?上面介绍过了mono Camera的近裁面是一个大的矩形,而两个stereo Camera的近裁面只是包含于mono Camera的近裁面中的矩形,这说明stereo Camera获得的投影来自于mono Camera投影的一部分。Cardboard把mono Camera的投影作为世界的投影,而stereo Camera的投影作为输入眼部的投影,为了与现实保持一致,stereo Camera使用函数public void CopyCameraAndMakeSideBySide(StereoController controller, float parx = 0, float pary = 0)保证相机的所有settings是与mono Camera保持一致的。这样做的目的,就是希望我们看到的,是和世界一致的,这是想当然的问题,我们肯定不会希望我们眼睛看到的与世界表现的不相同,即使在虚拟世界中。


细心的同学会发现一个问题,在工程运行的时候,Main Camera Left和Main Camera Right上的camera组件是关闭的,但是我们依然能看到图像,这是怎么回事呢?

Alternate means of rendering stereo, when you don't plan to switch in and out of VR mode:In the editor, disable the MainCamera's camera component.  Enable the two stereo eye camera components.

Cardboard给了两种渲染stereo的方式,一种是启用mono Camera,关闭两个stereo Camera(默认方式),还有一种是关闭mono Camera,启用两个stereo Camera。

这是在UnityEditor里的功能,所以Android运行时应该用不到


当然实现视觉的虚拟不仅仅是以上这么简单,我们获得了两个不同视点观察的经过投影变换后的图像(准确的来讲,这个图像应该叫做RenderTexture),现在我们需要将摄像机输出的视口(viewport)摆放到屏幕的准确位置,这一步很重要,因为我们不希望在用VR眼镜观察的时候因为输出的viewport位置不对,导致看不全viewport或者看到了viewport外围黑色背景的现象,我们希望,我们的视野(视野这个词,后面都简写为FOV,field of view,这个视野可能是眼睛的视野,也有可能是眼睛透过VR透镜观看的视野),正好覆盖输出的viewport,一分一毫也不能偏差,差一点点可能就会毁了我们的沉浸式体验过程。

这个过程,我自己定义了一个名字,叫做外部的FOV适配。(不同于内部的FOV适配,后面会讲)。


完成了外部的FOV适配,至少我们已经将我们的眼睛“放”到了游戏场景中,但是这仅仅是一个开始,我们还需要解决很多问题。


例如,VR透镜的使用造成的最典型的一个问题,图像畸变。


下一章我们会从扭曲矫正开始继续介绍。








  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要在前端页面中添加VR功能的按钮或者其他交互元素,用于触发VR功能的开启。然后,在后端代码中,可以通过以下步骤实现VR功能的添加: 1. 安装WebVR API库,例如 A-Frame 或 Three.js。 2. 在前端页面中添加WebVR API库的引用。 3. 创建VR场景,并将其渲染到WebGL画布中。 4. 将WebGL画布添加到前端页面中。 5. 监听VR功能的开启事件,例如用户点击了VR按钮。 6. 当VR功能开启时,将VR场景渲染到VR设备中,例如Oculus Rift或Google Cardboard。 7. 监听VR设备中的用户交互事件,并在VR场景中进行相应的操作。 下面是一个简单的代码示例,用于在Web端添加VR功能: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VR System</title> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> <button id="vr-button">Enable VR</button> <script> var vrButton = document.querySelector('#vr-button'); vrButton.addEventListener('click', function() { var scene = document.querySelector('a-scene'); scene.enterVR(); }); </script> </body> </html> ``` 在上面的代码示例中,我们使用了 A-Frame 库来创建了一个简单的VR场景,并添加了一个按钮(id="vr-button")用于触发VR功能的开启。当用户点击该按钮时,我们在JavaScript中监听到了该事件,并调用了enterVR()方法来开启VR功能。 当然,这只是一个简单的例子,实际上在现实的旅系统中,还需要考虑更多的细节和交互操作,例如如何加载真实的场景、如何实现VR设备中的交互等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值