【昼伏夜出】krpano vr 将瓦片图和立方体图还原成全景图

如何还原krpano全景图

前言

1. 在上一篇文字中介绍了如何去切图以及切图的分类，感兴趣可以去了解一下【独辟蹊径】逆推Krpano全景切图算法，实现在浏览器切多层级瓦片图
2. 当前demo还没有空做，不过看一下教程，应该就懂了
3. 后续会做，web端demo和一个node端（electron应用）
4. （本文我首发于掘金，所以图片带了它的水印）

切图分类，常用的有2种：

1. 六面体切图，将图片切成前后上下左右
2. 多分辨率切图，将图片切出六面体图，再将每一面的图片切割成瓦片图

（六面体切图）

（多分辨率切图）

还原图片，整体逻辑

1. 判断图片类型，是六面体图还是瓦片图
2. 如果是瓦片图，先要将瓦片图合成六张六面体图
3. 将六张六面体图，转为全景图

瓦片图合成六面体图

如下图所示，咱们可以知道瓦片图转六面体图的逻辑，知道逻辑后，写代码还不简单？

此时，我们还需要拿到：

1. 这一面的尺寸 = tiledimagewidth x tiledimageheight
2. 每一层级瓦片的标准大小
3. 通过标准大小去计算每张图片的大小和位置

我提供2种实现思路：

1. 自己通过掌握的数据拼接：如：使用canvas将图片拼接起来、Python、go、Java等，都一样，
2. 使用krpano官方命令行工具(我先讲这种)

使用krpanotools cli 拼接瓦片图

krpano官网有详细使用教程，以及各种参数的释义，https://krpano.com/docu/tools/#convert

瓦片图的XML代码，现在最新的切图方式会将level简写了，但道理都一样，我就以这种方式来讲解：

 <!-- 主要看image标签 -->
 <scene>
    ...
    <image multires="true" tilesize="512" type="CUBE">
        <level tiledimageheight="3840" tiledimagewidth="3840">
            <cube url="panos/test.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
        </level>
        <level tiledimageheight="1792" tiledimagewidth="1792">
            <cube url="panos/test.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
        </level>
        <level tiledimageheight="1024" tiledimagewidth="1024">
            <cube url="panos/test.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
        </level>
    </image>
    ...
</scene>

主要逻辑

1. 找到krpanotools 可执行文件
2. 拼接执行命令
3. 用krpanotools去执行命令
4. 完成

krpanotools位置
（我是Mac）如图所示，，无论是1.19版本，还是1.21版本，都能用：

拼接命令-全文核心内容，很多人就败在这里：

// 这是一段JS代码，仅供参考，大家想用什么鬼代码都可以，重在思路
let inputFiles = './test.tiles/%s/l3/%v/l3_%s_%v_%h.jpg' // 在images/level/cube中,拿到url的值
const outputFiles = './pano_b.jpg' // 输出文件的路径
const tiledimagewidth = 3840 // 在images/level中,拿到
const tiledimageheight = 3840 // 在images/level中,拿到
const insize = `${tiledimagewidth}x${tiledimageheight}`
const intilesize = 512 // 在images中,拿到tilesize的值
const resize = '2048x2048' // 输出图片的尺寸,最大不要超过[insize]
const faceName = 'b' // "b", "d", "f", "l", "r", "u"
inputFiles = inputFiles.replaceAll('%s', faceName) // 想要合成那一面,就把"inputFiles"中的 %s 替换成那一面
const cmd = `krpanotools.mac maketiles ${inputFiles} ${outputFiles} -insize=${insize} -intilesize=${intilesize} -insize=${insize} -resize=${resize}`

console.log(cmd)
//  krpanotools.mac maketiles ./test.tiles/b/l3/%v/l3_b_%v_%h.jpg ./pano_b.jpg -insize=3840x3840 -intilesize=512 -insize=3840x3840 -resize=2048x2048

大家可以在自己电脑上拿一个去测试，通过以上的方式去拼接命令，然后去执行就可以还原一面图片，以此类推依次还原6个面，如图所示，我个人测试的结果：

将6张立方体图片还原成全景图

先给个思路，还没再继续写：

1. 前端：使用OpenGL，glsl着色器去渲染
2. 后端：使用krpanotools工具，可以看官网

案例，日后再写

未完待续~