全景漫游方案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和清晰的文档,极大拓宽应用场景,给自行开发带来更多可能。
适合场景 适合初学者 有自定义功能需求,有能力二次开发者



发表评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.