06 4月

用VR做一个雪景球

2017.ronikdesign.com

在Ronik有一个传统,就是每年用新的技术和媒体实验性地创造一些东西来送给员工。在2016年,我们送给了员工Google Cardboard头盔。我们希望今年的礼物可以让他们再一次突破自己。
 

A-Frame

 
A-Frame提供了技术支持。A-Frame是由Mozilla开发的网页端VR原型工具。它让制作VR变得特别简单,通过用HTML的代码就可以完成。如果你使用HTML,那你就能制作VR。
 

制作模型

 
我们利用Blender, Cinema 4D和Photoshop制作了场景中的模型和材质贴图。场景中的建筑都是从立方体开始,通过缩放和挤压制作细节而来。当我们完成了建筑的模型,就转移到Photoshop中手绘材质贴图。
当我们完成了每个建筑和场景的制作,我们将它们整合到一个模型中。这样可以防止对每个模型都要进行的定位编程。不过有些个别的模型需要单独拿出来进行动画制作,比如卫星和云朵。
 
1-NTCVJF4d8tDlrzhfpilsEA
 
1-DjnNJzhe-grDfKzqTzrRow
 

导入模型

 
你可以在A-Frame中导入多种3D类型文件,比如OBJ, JSON, Collada和 glTF。我们最终决定使用Collada格式因为它的兼容性最好。但是如果我们再做一次的话,我们会选用效果更好的格式,比如glTF。
在网页端的VR原型中,模型低面数是非常重要的。我们的项目有5000面,这几乎已经是现有智能手机推荐的最高值了。我们曾经就因为这个面数限制,在建模到一半的时候又重现返工了。
 

照明

 
对于这张建筑类的场景,照明一个非常重要的元素。在外面的雪景球中,我们用了三种光。太阳和月亮的光在场景中提供有色光。然后我们还加入了一种无色的光来为场景中的其他地方补光。
为了让整个场景更加有活力,我们写了一个程序。光源会根据时间进行旋转。在中午太阳会在最高点,而午夜月亮会在最高点。
 

 相机

 
合理地利用摄像机的角度会让整个VR体验变得完全不一样。我们项目中设置了两个机位:一个大视野的视角和一个在飞艇上的第一人称视角。用户可以在界面中点击”Enter VR”或者是键盘上的返回键来切换视角。
 
1-bDAqMumO2VKRHbt9XEGBmQ
 
1-jQNWWXP9J1RA_CEBMDv0ew
 

组件

 
用A-Frame的好处是,它有很多其他开发者制作的组建可以共享并应用到自己的项目中。我们用了以下几个组件来完成一些重要的效果:
 
Along Path by protyze : 追踪飞艇的运动轨迹
Orbit Controls by subsumo : 大视野视角
Particle System by IdeaSpace: 制造下雪的效果
 
同时,我们也制作了一些项目需要的组件,比如摄像机固定,根据时间重置光源位置,视频控制等等。

 

声音

 
声音设计在VR体验中非常重要但却常常被忽视。如果场景提供的声音跟场景不符合,那么它带来的沉浸感会大打折扣。利用A-Frame 可以让在场景中添加定位声音变得简单。只需要在模型中加入实体声音发生器。
在我们的场景中,一共有5个循环的音乐:固定在飞艇上的轰隆声,卫星上电脑充满科技感的声音,河底的水声,发生器隐藏在建筑中的闹市声,以及在入口处的吉他声。
我们声音的素材来自freesound.org, 并通过Audacity剪辑拼接。

 

UI

 
你还需要在A-Frame制作属于你的引导页面或是进入loading界面。为了与场景风格保持一致,我们设计了一个溅开的界面。这样的设计能让用户对他即将看到的东西有一个心理准备,同时加深它们的VR沉浸感。

 

CMS整合

 
最后我们还做了一些微小的工作来打磨这个项目。我们引入TakeShape来管理引导页和环境中的各种元素。在TakeShape的界面中,你可以改变飞艇的移动速度,灯光的颜色,摄像机的FOV,雪花的数量,以及各种更多的参数。
 
1-R0JnwOCkaUcXMZ7ZRd-gjA
 

特别感谢

 
A-Frame 团队的成员们还在继续改善着WebVR。如果你对A-Frame有兴趣,你可以试试从这里开始。

 

免费赠送

 
你可以在这里下载我们的项目!

发表评论

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