17 10月

了解VR设计中的天空盒子是什么

译者注:天空盒子是VR场景设计中非常重要的一个设计元素, 相对于传统的平面设计,它在VR中的应用有着无限的可能。 那么天空盒子的概念是什么?如何制作天空盒子?让我们跟随原文作者Tessa Chung一起来看看吧。


 

想象你正站在山顶上,抬头望着明朗的天空,身边微风拂过。我们尽视野之极,远到地平线,上到天穹,这半球形的视野边缘,这是我们现实生活中的天空盒子。它将我们的世界包裹在其中,充当着我们现实世界的背景。

当把天空盒子当作一个设计元素时,它是一个用图片,材质贴图或者渲染模型制作而成的球体。当天空盒子应用到场景设计中时,它可以让视野变得辽阔,有限的场景空间变得看不见边缘,让视野更远,场景更真实。天空盒子就像房屋里的壁纸一样,在VR场景设计中是非常重要的一部分。

当我开始构思我的第一个VR项目时,我不想做一款像解谜,或者打僵尸那样传统的VR游戏。我想设计一个应用,用户可以按原比例查看汽车的内部场景。让用户舒服地坐着,然后把汽车内部的全景图片设置在他们四周,让他们体验不同款式汽车的内部构造。很快地,我认识到,天空盒子可以用来做更多的事,而不仅仅是蓝天白云。

在我不断探索如果利用天空盒子提高VR场景的立体感和真实感的过程中,我产生了更多的思考——天空盒子新的定义,制作方法,以及是否还有一些新的方式,让它能产生不同于传统天空盒子的交互效果。我会把我的想法,调研和资源与大家分享,供大家讨论思考。

 

那么,我们还在其他什么地方见到过天空盒子呢?

 

 

你肯定在其他地方见过天空盒子——比如在电影里。当角色们都被关在一个很大的球体里,跟外部的真实世界隔绝,然而他们对自己所处的环境一无所知。尽管观众们都能看出来他们所处的场景是虚构的,但这群人无法察觉任何异样。

1-Q7mDf22KQe8wjEWrZq-1qA

没错,就是饥饿游戏。(或者楚门的世界)

这些角色看到的天空和视野的边缘就是他们所处环境的天空盒子。那里是他们视野的边界,但是他们不能意识到那是整个场景的物理边界。在这个虚拟的场景里,他们感觉走在真实的地面上,身边的所有东西也跟真实世界一模一样,其实那些东西是3D模型。

 

专业定义

 

了解天空盒子在文艺创作中的应用,我们专业地了解一下。天空盒子的概念不仅仅存在于游戏设计中。在天文学里,天空盒子的概念相当于天球(celestial sphere)——一个以观察者为中心,有着无限长的半径的虚构的球体,我们看到的所有的天体(星星)都在这个球体的内表面上[1]。

1-Z7AJ6HQq6QM6ub66KkRRjA
Celestial sphere [1]

这个就好像,你在一个场景中心放了一个摄像机,摄像机周围的环境,一个无限大的球体,就是天空盒子。你可以在这个球体内部贴上图片,让天空盒子变成一个360度的显示屏,这样天空盒子就可见了。

这时,视野在天空盒子的概念里变得非常重要。用户在VR的世界里能看多远?他们在地天相接的地方能看到什么?用户的位置是否会影响他们的视野角度?这些都是在设计场景时需要考虑的。

在下图中,想象一个人站在球体上的S点,假设S点就是地球上的某一点。他眼睛的高度为h,眼睛在O点。地球的半径为R,地心为C.

1-rJnKrLMSfCPbSMlLiFn3ig
Calculation of apparent horizon distance. [2]

我们就当这个人正站在海滩上看日落。那么在点G,就是这个人能看到的海天相接的地方,而OG的长度就是他的视野大小。以上的描述只是对视野范围大小的一个简单的解释,精确计算时还需要考虑到这个人在地球上的具体位置。

从上图中可以看出,观测点O,视野尽头点G和球心C,它们一起组成了一个以G为直角的直角三角形,OG这条线是和球体表面相切的。所以我们能简单地利用数学知识计算出OG的长度。

if: c^2 = a^2 + b^2

then: (R + h)^2 = R^2 + OG^2

expand: R^2 + 2Rh + h^2 = R^2 + OG^2

solve for OG: OG = sqrt ( 2 Rh + h^2 )

现在我们代入数据。如果地球的半径 R为6378KM,人眼的高度h时1.7米,那么我们可以算出OG的长度是4.6KM。

以上的数据是在几乎不考虑天气情况下的理论模型。在真实场景中,地球表面的浓密的大气会让光线产生折射现象,OG这条视线会产生弯曲,所以人会看得比上述的理论模型的更远。更加极端的反射会产生海市蜃楼,让物体看起来比实际更高或者更矮。

我们有更加专业的计算方法来排除误差,完成精确计算,但是我们也用不着在数学问题上太深入探究。我们的目的是了解并熟记这些理论知识,它们会在设计中给我们必要的指导和规范。

 

记住这些常识

 

树,建筑,山脉,这些物体会对我们阻挡我们的视线;光线的角度会让物体产生不同的阴影,让它们变得跟平时看起来不一样;远处的一个小岛,你在正午的时候看不到它,但是等到日落,天气条件合适的话,你就能在视野尽头看到它。

1-qItEl5xqqVj17VSDIL5tzQ
Catalina at sunset, seen from mainland California.

在VR设计时,粗略估计用户的高度是非常重要的,特别是在像Oculus Rift 和Playstation VR 这种,头显里没有传感器的设备上。Job Simulator的设计者们,想了一个很巧的办法,他们通过记录用户双手展开的长度,然后将其换算成用户的高度。这样场景里的摄像机就始终在一个合适的位置,用户也觉得视野很自然。

一个人所处位置的海拔会影响他们的视野,就像站在山顶的人视野会更加辽阔。你可以通过计算得出视野的大小:

OG = sqrt ( 2 Rh + h^2 )

相对于视野的大小,人高度h是可以忽略不计的,所以公式可以简化为:

OG ≈ sqrt ( 2 R h )

那么我们应该怎样将上述这些结论应用到VR设计和天空盒子制作中呢?

在设计过程中,通过获取用户眼睛高度来估算他们的视野范围,对于创造一个真实的交互场景是非常重要的。

 

场景元素和图层层次感

 

1-BAZnKiif3C6hXSvOQGDCrQAdapted from Mike Alger [3]

我们初步了解了天空盒子和视野大小。接下来我们来看看怎么让场景有立体感和层次感。在360度的VR世界里,我们根据离用户的距离,将这个世界分为很多层次,每个层次都包含了设置了3D物体或图片。正是这些不同距离的物体让你产生了3D感,感觉自己身处在一个舒适的3D空间内。一般我们通用地会把世界分为三层——前置图层(1-10米),中间图层(10-20米),背景/天空盒子(20米+)。

1-FYiAzZOvMvr3HZ21xY7BdAA mockup with layers of elements. Adapted from Google Cardboard Design Lab.

在前置图层里,可以放置一些3D的可交互的物体,比如可以展开菜单的按钮,可以拾取的木头;也可以是包围用户的狼的模型。在中间图层里,可以放置一些相对较远的提示信息,或者一些场景的布景。最远的地方,天空盒子作为背景,让整个空间看起来更大,没有边界。在2014年的SDC上,Alex Chu提出,可交互的物体必须要在场景中时最吸引用户注意力的,同时它们要在相对于用户眼睛的舒适的距离上,这是VR设计的基本准则。

我们可以发现,利用天空盒子进行图层的区分,对于创造真实感和立体感有显著的作用。

 

透视和移动



在基于房间真实空间的VR场景中(HTC Vive),用户可以在一个较大的空间内移动。而在一个不是基于真实空间的场景中 (Oculus Rift, Google Cardboard, Samsung Gear VR, etc) ,用户一般是坐在椅子上或者站着不动,角色的移动需要通过游戏手柄或者操作杆来完成。

 

角色移动

 

在一个角色可以移动的VR场景里,他们可以沿着地形移动,在x/y方向上飞行,或者可以在z方向上跳跃。玩家可以到达任意一个设计过的小岛。但是他们不能接近天空盒子的边缘。

在场景里,天空盒子开始更多地作为一个场景中的照明元素,而不仅仅是像电脑桌面那样用作图片展示。

1-e1Jbe2naITseL131KLdjoA

“Land’s End” — 1st person player perspective

在“Land’s End”里,你以第一人称视角一边解谜一边游历这个世界。摄像机定位在主角身上,所以玩家能够以角色的视角来体验游戏,有很强的沉浸感,感觉自己身在游戏中一样。

1-8xB3s63Zf6X3UjK2MTiPGw

“Adventure Time — Magic Man’s Head Games”, a 3rd person player perspective

而 在“Adventure Time”中,你是以第三人称视角体验这个游戏。摄像机被固定在某一靠近主角的位置,并跟随角色移动而移动。玩家会感觉是在操作这个角色而不是他们自己身在其中。

 

 角色固定

 

在另外一些场景里,用户相对于场景,位置是不动的。他们可以有360度的视野但是不能移动。这些就是角色固定的场景。

1-bgW-1pbH9PJSsERN9O8OVQ

Samsung’s “Milk VR” home screen

你应该见过很多类型这样的home菜单,用户只需要转动他们的头部然后选择菜单上的条目。类似的固定的页面还应用在查看360度视频和图片。在这些场景里,整个场景的边缘就是天空盒子,它包裹在场景的四周。用户在里面不需要移动,他们只用四处转动,然后进行操作。

1-KQQW0hw1yAxBmjDq2OHj-A

而在一些应用中,是没有可以交互的元素的。比如奥斯卡最佳动画短片入围作品“Invasion!” ,是一个纯粹的影院式的观影体验。整个影片没有任何交互元素,用户可以深入其中看着整个故事情节一点点展开。这个作品向大家展示了一系列将电影变为360度时遇到的挑战(声音,方向,共鸣,提示,剪辑等等),同时引起了关于它到底是属于VR,AR还是AV的激烈讨论。

在上述的所有例子里,天空盒子都是一个非常重要的元素。无论天空盒子是360度的照片,还是渲染的模型,它们在场景中的应用方式都是一样的。

接下来我们了解如何制作天空盒子。

 

天空盒子图片

 

最常见的用于制作天空盒子的图片是柱面全景图片,球面全景图片或者3D立方体全景图。

 

柱面全景图片

 

用Google Cardboard Camera或者Photo Sphere app for Android,可以很容易得到一个360度的柱面全景图片。大家都用过手机上的全景摄像,这里的区别就是让摄像机完整转了360度而已。你手持摄像机,慢慢地转动360度,然后摄像机会神奇地将画面连接起来,产生一张完整的,沿水平轴线连续的图片。

1--FN0iIklMKe7vSDy7DJv8w

Magnified artifacts captured with in 360˙ cylindrical panorama. [6]

这是一种非常方便的方法,但是它的一个问题是图片的连续性。在你转动360度拍摄的过程中,肯定会有物体或者人产生移动,那么图片就会不可避免地出现一些异常。就像上图的例子一样。

1-li9lRMWM4EoWOdY3P--j7Q

Stitching imperfections at the top of a cylindrical pano (top panel).

而且,生成的图片也不能覆盖所有的方向,它是沿水平方向拍摄的圆柱全景图,所以你会丢失顶部和底部的内容。你可以在Unity中让图片强制缝合,但是这样的话图片扭曲会比较严重,看起来效果很不好。你也可以专门另外制作两个半球体来作为顶部和底部,但是这样做的话就会增加工作量。总的来说,柱形全景图是一个可行的办法,但是如果你想做一个清晰完整的场景,它是不太理想的。

 

球面全景图片

 

球面全景图片是一张360*180度的球面的全景图片(水平360度*垂直180度)。如果你希望你的VR场景能够在各个方向都能清晰地看到各种细节,那它会是你最好的选择。

1-KY8i1jKGKMPGSsL12VBKcA

Yeah, there are a lot of 360˙ camera rigs. Some look really intimidating.

拍摄球面全景图片的原理就好像有很多个不同的镜头同时向各个角度拍照,然后对得到的这些图片进行计算,生成360度的图片。市场上,比如Jaunt, GoPro 360, and Surround 360 by Facebook等行业顶尖产品都拥有很高的技术含量,它们每个设备有20多个镜头,能拍摄照片或者视频。同时这些设备也非常昂贵。

 1-zUGLSpb_x7vW2rcs3tKUrA

Left: Samsung Gear 360 Image via Engadget. Right: Ricoh Theta S Image via documentally.com

除了以上这些高端产品,也还是有一些相对亲民的选择。Samsung Gear 360和Ricoh Theta,拥有前后两个鱼眼镜头,拍摄的时候向手机等设备传出信号,然后完成一个球体全景图片的拍摄。它们也可以平滑连续地拍摄图片或者视频。

1-YqIfC58mS7vQjyaoBKsuPQ

Capturing a spherical mosaic.

球形马赛克拍摄方式是另外一种获取球面全景图片的方法。你可以在普通手机上使用这个功能,比如Samsung Galaxy上的Surround Shot,。这个方法需要你站在一个固定的点转动,然后在各个方向上拍一共60张照片,最后它会将这些照片组成一张完整的全景图片。它不需要其他设备,仅仅是用你的手机就可以拍出360*180的全景图片。

但是它的缺点跟我们之前讲的柱面全景图片一样,在拍摄过程中物体会产生移动。同时在转动时脚很有可能会移动,那么你拍摄的中心点就变了,图片也就会产生误差。

我们也可以通过传统的照片来生成360*180度全景照片,比如在后期通过图片编辑软件来人工拼接。这些方法学习曲线较高,需要进阶的同学可以去了解一下。

 

3D立方体全景图

 

3D立方体全景图,是把6个摄像机架设在中心,每个90度一个镜头,然后将每个摄像头拍摄的图片进行组合,生产一个正方体展开图一样的全景图片。

1-nsVmYyj6mpeE8Nps-0VPFA

Six cameras images rendered to a 3D cube.

当你在现实生活中,比如穿越树林时,想记录下你身边360度的事物,你可以用这个方法。但是它要求你得有特殊的固定设备和很多个相机——它不是一个很方便的方法。我会选择携带一个之前提到的那些便携的设备而不是用这个方法。

但是,当你要通过渲染图片来制作3D场景时,这会是你最好的选择。你可以在你设计的场景中心放置6个摄像机,记录下各个方向的截图。如果要这么用这个方法,那你需要使用3D软件来进行设计,比如Cinema 4D, Blender制作的模型。

不管你是用的图片还是3D模型,这些立方体的图片都可以导入到Unity里,拼接成一个球体,然后构成你的天空盒子。它最后呈现的效果取决于你图片的质量,有时你可以能会需要在ps里把图片相接的地方处理地更加自然。

 

总结

 

天空盒子可以是放在场景边缘的任何事物。它可以是一个菜单页面的纯色背景,也可以是一张真实的360度照片或者视频。它可以是一个3D模型世界的边缘——在这个世界里,你可以在水下游戏,可以在太空遨游,或者体验一个生动的场景。它在VR设计中可以突破我们传统对于天空盒子的概念,充满着无限的可能。

 
本站原创编译文章。如需转载,请注明:本文来自vr mango

原文地址:https://medium.com/@mccannatron/virtual-reality-vr-market-ecosystem-map-e6090af2e2af#.dfusatxr8

发表评论

电子邮件地址不会被公开。 必填项已用*标注