独辟蹊径：逆推Krpano切图算法，实现在浏览器切多层级瓦片图( 三 ) _生活百科

把每一面的图使用canvas转成不同分辨率的图片，然后逐行对它进行切割

问题：

一张全景图需要分多少层级？
每一层级的分辨率是多少？
每一张瓦片图的最大尺寸和最小尺寸是多少？

为了能找出规律，我制作了非常多不同分辨率的全景图，使用krpano Tools去切图，并根据输出记录不同分辨率的层级、每一层级的分辨率，试图找出他们的规律。
如图所示，这是krpano Tools 1.20.10：

文章插图
从上图中可以发现，每次切图的时候控制台会输出几个参数：

全景图的分辨率
一共多少层级，如图中所示 levels=3，表示有3个层级
每一层级的分辨率，如图中所示，3200x3200 1664x1664 768x768，由高到低

根据这些数据，我制成了一个表格：

文章插图
为了让样本更具参考意义，全景图的分辨率我从1000x500 一直到 60000x30000 。为什么知道了6万就不往上测试了呢？因为我电脑Photoshop的极限就在这里了，没办法输出更高分辨率的图片了，从10个样本中，我依旧可以得出以下规律：

相邻层级分辨率之比约等于 2，波动为0.2
全景图的分辨率与最高层级的分辨率之比为 3.125 ，几乎所有都一样，仅有一个波动为0.012

3.125 这个数值我会把它当成一个突破口，即最高层级图片的分辨 = 全景图分辨率 / 3.125 。

接着我查看vtour-multtires.config文件，即多分辨率切图的配置文件，这是一份krpano Tools默认的配置文件，可以手动去修改切图的配置。一般几乎不会去改动这里，我们团队生产过几十万个场景都没有改过这里，所以默认的配置已经是符合绝大部分使用场景。故，我把其中的配置作为标准来参考。

文章插图
以下仅列举了部分配置，完整配置可以参考krpano官网文档

// 多分辨率切图配置multires=true //是否是多分辨率tilesize=512 // 瓦片图大小levels=auto // 自动层级levelstep=2 // (重点)每一层与上一层maxsize=auto // 最高层级分辨率（自动计算）maxcubesize=auto // 每一面最大的尺寸stereosupport=trueadjustlevelsizes=true // 允许调节每一层级的尺寸adjustlevelsizesformipmapping=true

<!-- XML中image节点信息 --><image>	<cube url="panos/IMG_1914.tiles/%s/l%l/%0v/l%l_%s_%0v_%0h.jpg" multires="512,1024,2048,3840,7680" /></image>

再通过官网，查看 cube节点的multires属性，第一个值表示单张瓦片图的大小。

文章插图
既然单张瓦片图尺寸是512，那我就打开查看生成的图片，看看到底是不是。结果发现：几乎所有的图片都是512x512，除了最后一张图片和最后一行。

官网对tilesize=auto的解读：

Size of the multi-resolution tile images.
Should be between 256 and 1024.
When using 'auto' the tool will automatically try find a good value for 'symmetric tile splitting'.
The today recommendation for best rendering performance is using 512 as tilesize.
It's a good compromise between the GPU-texture-upload-time and the number of GPU-draw-calls required to fill the screen.
Note - the tilesize affects the loading and decoding time and also the rendering performance.

得知：