酷家乐全景图启动后会加载全景图的六面图的缩略图,同时开始加载 6 个面的完整图片,每一面加载完后去除对应面的预览图,这在全景图分辨率较高时会使得整体加载速度显著变慢,长时间处于显示预览图状态。同时因为图片加载速度不一,加载过程中已加载的面和未加载的面交界很明显。随着图片分辨率的提升,这些问题将越来越明显。
之前线上的做法是加载 WebP 格式(默认质量)的图片,但存在显著的画质损失,需要调研如何更快的加载高质量全景图。
经过调研发现,使用 krpano 的 Multires 功能可以做到将全景图的图片进行分块懒加载。
Multires 概述从 krpano 1.17 开始,加入了 HTML5 Multiresolution 功能(简称 Multires),用于加载超高分辨率的全景图。
和一般网页图片的懒加载类似,Multires 通过自动分层和分块来推迟不可见范围内的内容的加载,基本规则如下:
将全景图分为多个不同分辨率的层级(Level)将每个 Level 划分为多个大小都为 tilesize 的 Tile从第一级开始,逐层加载优先加载当前可见的 Tile加载完当前视野内可见的 Tile 后,预加载一部分不可见的 Tile当不可见区域进入视野中时,重复上述几步进行加载其加载顺序大致为 L1落在可见范围内的tile -> L2落在可见范围内的tile -> L3落在可见范围内的tile -> ... -> 部分不可见的 Tile。具体顺序与 FOV 及 aspreview 等设置有一定关系。
Multires 基于 HTML5 实现,其兼容性和 HTML5 基本保持一致,不支持 IE8、9。兼容性参考
XML 配置想要开启 Multires 需要在 XML 中进行对应的配置:
...全景图加载过程中会将 url 内的占位符进行替换:
%s: 六面体的面%h: 水平索引%v: 垂直索引最新版本的 Krpano(1.20.9)还支持更简单的写法,不需要写分为多个 level:
为什么 tilesize 取 512px?
取 2 的指数的 tilesize 可以自动触发 mipmapping,mipmapping 会在渲染时带来视觉和性能的提升(可能耗费