图一：合肥城中村全景截图
一、为什么想起制作全景地图 ？
最近两个月来，小剧一直在利用业余时间拍摄『合肥城中村』系列主题全景。到目前为止已经拍摄了14个场景，覆盖16个村落，并且这个计划仍然在进行中。
因为这些城中村零散地分布在合肥的各个角落，简单的罗列场景显得格外单调，因此需要一个比较直观的组织方式来呈现。
此前设想过通过720云的沙盘功能，实际设计时发现过多的场景在沙盘下效果并不是很理想。
恰好这个时候720云官网推荐了『安徽池州VR全景地图』这样一幅富有创意的作品。
这个作品有意思的点在于，它在一份航拍全景水平方向上，均匀放置了四个地图，并且在地图上用热点链接其他各个作品。
基于这份作品，小剧发现借助于地图可以很好的将各个零散的全景联系起来，起到总览的作用。
二、分析实现方案
很快，小剧就决定要在『合肥城中村』全景作品中，增加独立的地图总览场景。接下来就该探索实现方式了，经过一番思考，再结合之前的经验，发现有两种较为可行的方案。
第一种是直接把地图文件当成图片素材，嵌入到场景中，具体的操作路径如下：
图二：720云图片嵌入功能入口
这种方法虽好，但是因为地图是独立的文件，与场景相分离，所以在用户打开场景的时候，地图会滞后加载。浪费流量资源，引起加载时长过久的问题。
针对这个问题就有了第二个方案来实现，就是直接将地图绘制在全景图上，这样一来对加载时长就没有了影响。
我们来简单对比下这两个方式的优缺点：
1、图片嵌入
- 优点：简单，单独设计场景和地图，无需考虑拼合的问题
- 缺点：浪费观看者流量，加载相对较慢
2、全景原图绘制
- 优点：加载时长没有影响，用户观感较好
- 缺点：每次更新需要重新上传全景，发布时间较长
通过对比可以看出来，第一种图片嵌入的方案，对全景制作者较为友好，在终端用户侧略微有所影响。第二种全景原图绘制的方案的优势都是针对用户的，但是需要制作者多花些心思。
出于【折腾自己，方便大家】的心理，很自然的就选择了全景原图绘制的方案。
三、动手设计
方案已经确定好了，接下来就是动手设计了。
3.1、草图设计
前面提到的『安徽池州VR全景地图』虽然很有创意，但小剧还是想在上面增加点设计感，丰富下内容组成。
收集了多幅 VR 界面设计案例、整理了城中村项目相关的介绍后，设计了如下的草图。
图三：全景地图设计草图
3.2、画面失焦处理
在参考了其他优秀的 VR 界面设计案例后发现，为了区分界面与场景，都会将环境做失焦处理。这样处理后画面主体更清晰，观感更舒服，也更符合人眼观察世界的感受。
这一步操作的是 2:1 的球面模型图，因此你需要提前准备一个场景相对开阔的作品作为背景。
简单处理的话，直接使用 PS 的高斯模糊即可。但是高斯模糊算法需要和相邻像素做计算，所以处理完之后画面左右会因为色差产生接缝，因而并不能简单的一步完成。
这里简单说下我的处理方式：
- 第一步：使用 PS 打开 2:1 的球面模型图，并复制一层
- 第二步：将上层图层水平位移 4000 像素（原图宽度一半左右即可，这里以 4000 为例）
- 第三步：将上下层执行同样数值的高斯模糊（自己觉得舒服就行）
- 第四步：将上层图层位移 -4000 像素
- 第五步：你会发现画面右侧 4000 像素处会有一条明显的接缝，借助蒙版消除，合并图层
通过这一通骚操作，全景画面即实现了失焦效果，并且不存在垂直接缝。
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、截取卫星地图
这一步是为了获取地图基础框架的，同时在我这个例子也是为了展示城中村的卫星画面所用。
过程很简单，只需要注意两点即可：
- 1、使用卫星地球模式，去除路网，以得到较为干净的卫星画面
- 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、相关工具
- Krpano：一款强大的全景图漫游制作引擎
- Photoshop：不用解释，你懂的
- 720云：专业的全景平台 https://720yun.com
6.2、相关链接
- 拍摄计划表：https://github.com/users/bh-lay/projects/2
- 合肥城中村作品：https://720yun.com/t/3cejrz4wtw2
- 安徽池州VR全景地图 ： https://720yun.com/t/f36jOdsktm5