獨辟蹊徑：逆推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.

得知：