全景漫游方案PK – Panorama Studio VS krpano

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

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

全景漫游交互的方案,常用的有pano2vrPanorama Studiokrpano等,我结合最近自己的使用案例,比较一下不同方案优缺点。

最近为客户拍摄全景并制作漫游,用于他们网站上对店面进行展示。因为客户是一家连锁企业,所以有个棘手的方面——客户需要完全同已有全景漫游的连锁店页面相同的界面(如: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和清晰的文档,极大拓宽应用场景,给自行开发带来更多可能。
适合场景 适合初学者 有自定义功能需求,有能力二次开发者