手把手教你制作全景地图

时间:2019-6-19 作者:剧中人

图一:合肥城中村全景截图

全景地图截图

【查看全景】

一、为什么想起制作全景地图 ?

最近两个月来,小剧一直在利用业余时间拍摄『合肥城中村』系列主题全景。到目前为止已经拍摄了14个场景,覆盖16个村落,并且这个计划仍然在进行中。

因为这些城中村零散地分布在合肥的各个角落,简单的罗列场景显得格外单调,因此需要一个比较直观的组织方式来呈现。

此前设想过通过720云的沙盘功能,实际设计时发现过多的场景在沙盘下效果并不是很理想。

恰好这个时候720云官网推荐了『安徽池州VR全景地图』这样一幅富有创意的作品。

这个作品有意思的点在于,它在一份航拍全景水平方向上,均匀放置了四个地图,并且在地图上用热点链接其他各个作品。

基于这份作品,小剧发现借助于地图可以很好的将各个零散的全景联系起来,起到总览的作用。

二、分析实现方案

很快,小剧就决定要在『合肥城中村』全景作品中,增加独立的地图总览场景。接下来就该探索实现方式了,经过一番思考,再结合之前的经验,发现有两种较为可行的方案。

第一种是直接把地图文件当成图片素材,嵌入到场景中,具体的操作路径如下:

图二:720云图片嵌入功能入口

图片嵌入

这种方法虽好,但是因为地图是独立的文件,与场景相分离,所以在用户打开场景的时候,地图会滞后加载。浪费流量资源,引起加载时长过久的问题。

针对这个问题就有了第二个方案来实现,就是直接将地图绘制在全景图上,这样一来对加载时长就没有了影响。

我们来简单对比下这两个方式的优缺点:

1、图片嵌入

2、全景原图绘制

通过对比可以看出来,第一种图片嵌入的方案,对全景制作者较为友好,在终端用户侧略微有所影响。第二种全景原图绘制的方案的优势都是针对用户的,但是需要制作者多花些心思。

出于【折腾自己,方便大家】的心理,很自然的就选择了全景原图绘制的方案。

三、动手设计

方案已经确定好了,接下来就是动手设计了。

3.1、草图设计

前面提到的『安徽池州VR全景地图』虽然很有创意,但小剧还是想在上面增加点设计感,丰富下内容组成。

收集了多幅 VR 界面设计案例、整理了城中村项目相关的介绍后,设计了如下的草图。

图三:全景地图设计草图

设计草图

3.2、画面失焦处理

在参考了其他优秀的 VR 界面设计案例后发现,为了区分界面与场景,都会将环境做失焦处理。这样处理后画面主体更清晰,观感更舒服,也更符合人眼观察世界的感受。

这一步操作的是 2:1 的球面模型图,因此你需要提前准备一个场景相对开阔的作品作为背景。

简单处理的话,直接使用 PS 的高斯模糊即可。但是高斯模糊算法需要和相邻像素做计算,所以处理完之后画面左右会因为色差产生接缝,因而并不能简单的一步完成。

这里简单说下我的处理方式:

通过这一通骚操作,全景画面即实现了失焦效果,并且不存在垂直接缝。

3.3、转换为六面体模型

地图绘制的时候需要注意一个问题,那就是我们只能在六面体模型上进行绘制,而不能直接在 2:1 的球面模型图上操作,通过下图就能看出差异在哪儿。

图四:绘制在 2:1 球面模型上的效果

畸变演示

因为球面模型本身内容并非横平竖直,所以直接绘制出的效果,在预览的时候会出像各种扭曲,因此并不推荐。

关于球面模型转六面体模型有很多种方法,这里只说下我使用的方法。

Krpano 有很多实用的工具,其中一个是 Convert SPHERE to CUBE droplet,也就是实现 2:1 球面模型转换为六面体模型的工具,拖放 2:1 的球面模型图文件到这个脚本上,等待数秒即可完成转换。

观察六面体模型我们会发现,3.2 步骤里的失焦处理并不完美,在顶面、底面的中心点位置存在明显的瑕疵,所以我们需要复制一层补充上高斯模糊,配合蒙版将菊花状的瑕疵消除掉。

3.4、界面结构绘制

按照前面草图设计,只需要在立方体的一个面绘制界面即可,很显然我们选择的是正前方的面,也就是 _f 结尾的文件。

再看一遍草图设计,我们来进行框架设计。

图五:全景地图设计草图

设计草图

框架设计这一步很简单,无非就是拖拽几条参考线,画几个框框而已。最重要的还是前期的草图阶段,你要预先想好整体框架布局,各个模块放置哪些元素,做到心里有数。

需要注意的是,六面体模型的任意一个面,水平、垂直方向的视野都是 90 度。而人单眼的舒适视域仅为60度,所以在绘制的时候不要把画面铺得过满,避免影响观感。

图六:全景地图框架图

全景地图框架图

四、地图绘制

如果你直接使用百度、高德等地图的截图,地图绘制这一步可以省略。

但是常规的地图界面一般会包含太多无关的细节,画面干扰因素太多,很难突出主体,因此如果您对 PS、AI 等图像绘制软件操作熟练的话,建议地图还是由自己绘制。

4.1、创建独立的地图文件

地图绘制工作量较大,后期更改的频率较高,因此不建议在第三步的文件里直接操作。

根据 3.4 步里地图所占区域大小创建地图文件。

4.2、截取卫星地图

这一步是为了获取地图基础框架的,同时在我这个例子也是为了展示城中村的卫星画面所用。

过程很简单,只需要注意两点即可:

图七:百度地图示例

百度地图截图

4.3、勾勒出目标区域

这一步是为了将全景在地图上对应的区域勾选出来,蒙版是最好的选择。

为了操作方便,建议将地图复制一层,下层降低透明度做参考。

4.4、绘制道路

道路的绘制尽量贴合真实路径,需要的话在保证方向、比例大体相符的前提下,可以做适当调整。

为了帮助用户观看地图时快速定位,画面里的高架桥、快速路等主干道一定要标注清楚。和全景场景相交叉、临近的道路尽可能还原。其他的一些小路可以忽略不画。

最后再标注上路名,地图就算绘制完成。

路名标注时没必要在每一段道路上都写上路名,但是在场景附近尽可能标注完整,避免引起用户观看时不必要的困扰。

最后再把地图复制粘贴到第三步里的所在区域,绘制工作就算完成了。

图八:地图绘制过程

地图绘制过程

五、作品配置

经过前面的设计、绘制,地图全景就已经准备好了。

因为 720 云支持直接上传六面体模型的场景,因此我们就不需要再将六面体模型转换回 2:1 的球面模型。

后续的步骤相信大家都比较熟悉了,这里提几个需要注意的点。

5.1、视角设置

一定要避免调整设置初始视角方向,因为全景界面的地图是在正前方绘制的,720云默认的视角也是在正前方,因此初始视角就是最合适的视角。

FOV 建议设置为 10、100、120

最小 FOV 决定了画面的放大极限,为了用户能看清地图上的细节,建议最小 FOV 设置在 10 - 20 这个范围内。

100 是初始 FOV,可以保证用户在 PC 或手机横屏的时候可以完整看到地图界面。

120 倒不重要,不用解释。

5.2、添加热点

从结构上来看地图所在场景类似于网站的首页,首页可以通往各个页面,每个页面也需要能够顺利地回到首页。

所以添加热点这部分工作共有两部分。

一部分是需要在地图上,逐个链接至各个场景。

另一部分则是,在每个场景内同样设置链接,确保能够回到地图的场景。

5.3、场景顺序调整

前面提到,地图的作用类似于网站的首页,如果用户第一次打开作品时展示的是地图场景,效果肯定会更好。

所以建议把地图场景调整到最前方,以获得最佳的效果。

六、相关分享

此次全景地图的探索大致就是这些,以上全部内容只是『合肥城中村』全景作品创作过程中的一些尝试而已,并没有比较深入的研究,仅供大家参考。

献丑了!


6.1、相关工具

6.2、相关链接