标签：全景

全景摄影，有的地方又叫360全景照，洋文叫Panoramic Photography。现在大规模应用于谷歌街景、腾讯街景等产品。对于房产、室内装修、商业等客户会有小规模的运用需求，用以展示其产品和环境。

不论对于大规模还是小规模应用，其实现原理都基本相同。有点偏题了……

全景漫游交互的方案，常用的有pano2vr、Panorama Studio、krpano等，我结合最近自己的使用案例，比较一下不同方案优缺点。

最近为客户拍摄全景并制作漫游，用于他们网站上对店面进行展示。因为客户是一家连锁企业，所以有个棘手的方面——客户需要完全同已有全景漫游的连锁店页面相同的界面（如：http://f.y1s.cn/360/jml/）。

因为自己对Panorama Studio比较熟悉，所以一开始未作过多考察便直接取之作为解决方案。对于缺失的缩略图导航及不同的UI界面问题，自行开发UI及脚本来解决。制作完成的页面如下：

Panorama Studio方案

（在新窗口打开）

这一版的实现满足了全景漫游业务方面，但针对客户需求方面遇到很多问题……

加载与场景切换速度慢

造成加载速度慢的原因又有多个。

引擎js文件较大。Panorama Studio 3的引擎文件有230KB，而相比下krpano则只有约106KB。别看这120KB的差别，在通常移动3G网络访问时，可能就会造成2～3秒的加载时间差距，这对于页面性能是较大的损害。对于已经看别的连锁店有对比参照的客户来说，这几乎是不可接受的结果。

造成Panorama Studio的方案加载看起来慢，其中有个似乎为bug的问题：低分辨率preview图片被请求后根本未被使用。全景漫游方案一般先加载一张分辨率很低、文件量小的preview图片，用以缩短加载到首次呈现的时间。

在优化Panorama Studio实现方案中发现，其生成的1200x200px的64KB左右的preview图片，在被请求下载后，根本未被引擎使用，而在大分辨率图片还未加载完成的这段时间里，全景界面会呈现难看的黑色。在网络环境不好的情况下，这段时间会长达10多秒，这几乎是无法使人接受的。

另外Panorama Studio方案，在场景漫游间频繁切换后，有偶尔加载不了场景的bug。

场景切换时背景音乐中断

Panorama Studio方案里的背景音乐在场景漫游切换间，会使音乐重头开始播放，实际上它的每个场景是重复请求加载了一遍音乐资源。要避免这问题，只有自行将背景音乐放到嵌入全景的页面中，实现全局的音乐播放。

在krpano方案中，音乐播放作为皮肤中的插件存在，可设置为不同场景为同一个背景音乐。

这些问题和与其他连锁店实现的差异导致客户不满，最后只好重头来过，使用其他连锁店同样的krpano方案来重新实现。实现结果如下：

krpano方案

（在新窗口打开）

Panorama Studio与krpano一些对比

	Panorama Studio	krpano	pano2vr
HTML5与Flash支持	均支持	均支持	均支持
用户图形界面	好。可在软件中可视化编辑漫游热点，镜头光晕、初始视角、视野范围、输出图片分辨率。	差。使用droplet或命令行方式生成交互页面后，在浏览器中可视化编辑交互热点、初始视角。	一般。
加密与保护	无	好。能对图片、脚本进行加密保护，设置有效期、域名限制。	–
文档与支持	一般。无插件支持，简单明了的文档说明。	好。丰富的插件、API和清晰的文档，极大拓宽应用场景，给自行开发带来更多可能。	–
适合场景	适合初学者	有自定义功能需求，有能力二次开发者	–