一种全景图客户端快速显示的切片模型与实现

谢元礼， 姚　瑾， 许允波，张荣斌， 王　芹

(1.南京大学 地理与海洋科学学院,南京　210093;2.西北大学 城市与环境学院,陕西 西安　710127;3.易智瑞(中国)信息技术有限公司 西安分公司，陕西 西安　710075； 4.陕西省水利电力勘测设计研究院 测绘分院，陕西 西安　710002)



·环境科学·

一种全景图客户端快速显示的切片模型与实现

谢元礼1,2， 姚瑾2， 许允波3，张荣斌4， 王芹2

(1.南京大学 地理与海洋科学学院,南京210093;2.西北大学 城市与环境学院,陕西 西安710127;3.易智瑞(中国)信息技术有限公司 西安分公司，陕西 西安710075； 4.陕西省水利电力勘测设计研究院 测绘分院，陕西 西安710002)

全景技术已经成为三维地理信息系统中不可或缺的部分,为探索网络环境下大幅全景图快速实时显示方法，该文提出一种将全景图进行分片切割的模型,并利用Flex技术根据可视区域进行分级分片加载显示。通过与全图加载显示的速度进行比较,切片模型能够有效提高全景图的加载显示速度。

全景图;切片模型;分级分片;快速显示

全景技术是一种虚拟现实技术,已经成为三维地理信息系统的技术架构中不可或缺的部分,谷歌的google earth和微软的virtual earth等都得到了成功的应用。全景技术主要包括全景图的制作和可视化两大内容。

全景图最终呈现给用户需要经过多个处理环节,包括全景图的获取、全景图的拼接、全景图的融合以及最终的加载显示。目前国内外的研究多集中在全景图的获取与拼接等制作方法上[1-7],对于全景图的加载显示多采用全图直接加载的方法。由于单幅全景图分辨率很高,一次性全图传输受限于带宽,浏览显示时因需要实时地处理大量数据,容易造成不流畅的体验,难以满足实时性要求。因此，研究如何高效地加载显示全景图十分必要。

本文着力于解决网络环境下高分辨率全景图的实时传输和快速显示的问题,利用加载显示全景图时只需要显示可视范围区域的特点,首先将单幅全景图切割组织成瓦片金字塔格式,然后通过分级分块加载全景图的机制实现按需加载显示,从而解决网络带宽限制,保证用户能够快速流畅地浏览全景图。

1　全景图切片模型

1.1全景图数据

全景图由真实场景构建生成,通过基于图像绘制的全景技术提供水平360度,上下90度的观察视角从而给人很强的沉浸感,如同置身于真实场景中一般。全景图按照投影模型分为柱面、球面和立方体面3种类型,本文采用柱面Equirectagular投影的全景图数据,该投影的全景图是目前默认的行业标准,它是一种将球面坐标转换到平面的投影方式。在这种投影下水平坐标用经度表示,垂直坐标用纬度表示。因为经度范围为-180度到180度,纬度为-90度到90度,展开后图像的宽高比例正好是2∶1,如图1所示。

图1　单幅Equirectagular投影的全景图Fig.1　A panoramic image by projection of the Equirectagular

在一张Equirectangular全景图中,经线和纬线组成方格网:赤道位于图像的中间,不存在变形,向上下两端变形逐渐增大,球体的两极位于图像的上下两边,由原来的一点拉伸成整个图像宽度的一条线,变形最大。如图1所示的图像的最低端有很大一片漆黑的区域,而实际对应的区域其实很小,因为投影把这一部分拉大变形了。

柱面Equirectagular投影的全景图是全景图的一种平面保存方式,并不是真实视觉效果。利用现有的一些3D引擎,如OpenGL，Direct3D或者Flash中的开源软件PV3D，alway3D,把图像作为材质直接添加到球体上,观察点设在球体的中心就能够实现360度的全景观察效果。

1.2切片模型

本文处理的全景图其分辨率为5 400*2 700,大小为1～2MB。如果直接把整幅全景图作为材质添加到球体上,从服务器传输到客户端这一步就比较耗时,造成场景加载缓慢。不仅如此,后续的场景渲染因需要处理大量数据,浏览漫游时会出现明显的延迟。

实际上在浏览全景图时,通常所看到的仅仅是全景图的很少一部分,因此没必要把整幅全景图一次性加载进来。随着视角的变化,加载所需要的场景部分即可。另外当视角较小时,所看到的场景比较细致,需要加载分辨率比较高的图片;视角较大时,看到的是景物的概要,只需加载分辨率比较低的图片。针对浏览全景图时这种分区域分细致程度的特点,对全景图进行分片分级处理,切割组成类似Deep Zoom的结构[6],然后将对应级别加载可视区域内的切片就能达到快速流畅地显示全景图的目的。

图像切割是地理信息系统中常用的图像处理方法,完全可以应用在全景图可视化中对全景图进行分级分片管理。分级分片这种以空间换时间的解决方案和以谷歌为代表的电子地图的机制是一致的[9-10]。在初始等级时,整个地球只投影到一张256*256的图片上。地图放大等级后原来的256*256的图片将变成512*512的图片,实际上是将原来的图片分裂成4张256*256的图片,以此类推,按照四叉树的组织方案,将一块区域一份为四,不断细分,形成一个金字塔,其结构如图2所示,等级划分如表1所示。

图2　电子地图的金字塔结构Fig.2　The structure of Pyramid electronic map

不同的是,电子地图最终展现在平面上，没有明显的接缝边界,而全景图最终展现在球面上,每个切片需要保证能与上下左右的相邻切片无缝对接。除此之外,也需要选取合适的瓦片大小。

为了避免切片后会带来很多的碎片,本文处理的全景图分辨率为5400*2700,而不是通用的256*256或512*512的瓦片大小。将全景图分成若干个等级,切片数量可为2*1,4*2,8*4,16*8并依次类推,切片数量根据全景图的分辨率确定。本文最终图片的大小为337.5*337.5,切片数量为16*8。

表1　DeepZoom格式下的显示等级

参照表1,原始图片大小为5 400*2 700,显示等级为13,可划分成16*8=144张大小为337.5*337.5的切片。在显示等级12级,将原始图片缩放一个等级,其大小为2 700*1 350,可划分成8*4=32张大小为337.5*337.5的切片,依次类推,可得到表2。

表2显示等级与划分个数的对应关系

Tab.2The relation between levels and number of fragmentations

Level10111213Number2*14*28*416*8

因为级别10只有2张切片,太少不予处理。因此以337.5*337.5为基准,共划分成3个等级:11，12，13级,分别对应8，32，144张切片。

每个等级对应一个文件夹,如图3,每个等级中的图片以行号加上-列号的方式进行命名,例如0-2,代表第一行第一列的图片,如图4所示。这样,给定显示等级和行列号就能够唯一确定一张切片。切片的总大小为1.89MB,为原始图像(大小为1.53MB)的1.24倍。

图3　每个显示等级对应一个文件夹Fig.3　The folds of levels

图4　文件夹11中的切片Fig.4　The fragmentations in the fold of level 11

2　全景图切片加载显示方法

2.1分片加载全景图

对于3D渲染引擎,本文使用的是PV3D。PV3D中基本的对象是三角形,其支持的基本元素诸如球面、立方面、平面等都是由三角形构成。对于球体而言,他们只能将整幅全景图作为材质贴在表面。因此需要对其加以改进,从而支持分片加载功能。

以4*2的球体为例,即水平分成4部分,垂直分成2部分。总共可划分成8个tile,每个tile有4个点,由2个三角形组成。上下半球从左到右各有4个tile组成,每个tile对应一张切片,设置其UV坐标的范围为0-1,使该切片恰好完全覆盖该tile。

图5　4*2的球体Fig.5　The sphere of 4*2

然而对于第11级的切片,其切片数量为4*2,但对应的球体不能是4*2,因为4*2的球体过于粗略,接近菱形体,如图5所示。因此球体的划分需要更细致一些,需是4*2的整数倍,使贴图后球体显得比较平滑。本文统一采用64*32的球体。对于第11级别的切片来说,16*16个tile对应一个切片。对于第12级的切片,8*8个tile对应一个切片,对于第13级的切片,4*4个tile对应一个切片。对于其中的每个tile设置其对应的切片和UV坐标,就能保证贴上对应切片的区域。

2.2加载可见区域的全景图切片

由于在浏览全景图时,看到的仅是全景图的一部分,因此只加载可视区域的全景图切片,可大幅度地提高系统的加载和显示效率。在实现分片加载的基础上,通过以下步骤实现按需加载和显示:

1) 根据摄像头的pov以及pitch和yaw值,计算出视口viewport的4个坐标点对应的球体坐标。

2) 根据球体坐标,计算其组成的范围内和与该范围相交的所有tile。仅仅加载这些tile对应的切片,并设置其UV坐标,同时记录已经处理的tile和已经加载的切片。

3) 在浏览全景图时,如果范围发生变化需要重新计算时,可根据步骤1)和2)计算出对应的所有tile,然后逐一判断该tile是否已经处理。如果已经处理,则跳过,否则判断其对应的切片是否已经存在;如果存在,则直接设置,否则需要先加载后设置。

4) 判断是否已经全部加载。如果已经全部加载,则不再进行是否已经加载的判断。

因为PV3D自身的机制能够避免对不在可视范围内的三角形进行渲染,因此这里本文只关注全景图切片的加载问题。同时对已经加载的全景图切片和已经处理的tile进行记录,避免重复加载和重复处理。

2.3等级切换

前述把全景图切割分成3个等级,分别对应不同的详细程度。当对全景图进行缩放时,全景图的细致程度会随之发生改变,此时需要进行等级切换处理。

为了简便起见,本文使用3个同样位置、均为64*32的球体来分别加载3个等级的图片。当然也可以采用一个球体,等级切换时需要更换每个tile的UV值和对应的切片,只是处理起来繁琐一些。

以camera的zoom属性作为等级切换的指标,采取的机制是首先确认当前的显示等级,该等级对应的球体开始加载全景图。当需要等级切换时把当前球体视为不可见,下一个等级的球体开始加载全景切片并设置为可见。为了提高效率,当前等级容器加载完所有的全景图后,设置不可见等级的容器在后台加载,同时设置消隐渐变动画来减少直接切换时的跳跃突兀感。

3　实验结果与效率分析

利用瓦片地图的原理,参照DeepZoom格式事先将高分辨率的全景图按等级进行切片,然后基于Flex利用PV3D引擎开发一个全景客户端,并将加载显示整幅全景图和加载显示第11级的全景图做一个对比。图1所示的整幅全景图大小为1.53MB,切割生成的第11级的8张切片的总大小为130kB,大小仅为原来的1/12。图6为按指定区域加载的一个示例,上下左右部分区域没有加载图片,所以显示为空白。

图6　按指定视域加载全景图的结果Fig.6　The result of displaying in visual range by fragmentations

全图加载与切片加载的速度分别为136毫秒和89毫秒。实验中发现,加载整幅全景图在显示速度上出现明显的延迟,这主要是全景图显示时,需要进行重采样等一系列变换,渲染绘制十分耗时。而对于分片加载的全景客户端而言,因为视域一定,无论位于哪个显示等级,需要显示的一般不会超过8张切片。这种机制下其渲染的效率很高而且十分稳定。

4　结论与探讨

从理论上来看,当用户浏览视域仅仅为全景的一部分时,切片加载方法能够按照视域范围加载部分切片而不用加载整幅全景图,这样传输的图像信息量少,加载的速度必然快。实验证明,本文的切片模型是一种高效的全景图显示模型,利用该切片模型实现全景图在视域内加载与显示的效率大大高于全图加载与显示的效率,从而大幅度地提升了浏览的流畅性,可以很好地满足网络环境下用户连续快速浏览的需要。可以预见,当整幅全景图很大时,切片加载与显示速度的优势会更明显。

这种按切片模型加载的客户端不仅可以适用于简单的全景的展现,而且结合电子地图,可拓展基于位置的应用。本文虽然仅针对全景图的快速显示研究,但该方法还可以为实现对全景图的切换、街景以及带有深度信息的全景图的快速显示提供参考。

[1]陈辉，龙爱群，彭玉华.由未标定手持相机拍摄的图片构造全景图[J].计算机学报,2009(2):328-335.

[2]宋延爽，耿楠. 基于SURF算法的全景图拼接技术研究与实现[J].计算机工程与设计,2012(12):4647-4665.

[3]蔡丽欢，廖英豪，郭东辉.图像拼接方法及其关键技术研究[J]. 计算机技术与发展,2008(3):1-4,20.

[4]刘晓妮，卢奕南，杨华民，等.基于OpenCV的曲面全景投影算法研究[J].计算机仿真,2011(2):272-275,307.

[5]赵毅力，武仲科，张雁，等.基于图结构的全景图自动识别与拼接方法[J].计算机工程与设计,2013(6):2067-2070.

[6]HAENSELMANN T, BUSSE M, KOPF S, et al. Multi perspective panoramic imaging[J]. Image and Vision Computing,2009,27:391-401.

[7]CHEN Hai-peng, SHEN Xuan-jing, LI Xiao-fei, et al.Bionic mosaic method of panoramic image based on compound eye of fly[J]. Journal of Bionic Engineering,2011,8:440-448.

[8]维基百科. Deep Zoom[EB/OL] http://en.wikipedia.org/wiki/Deep-Zoom,2012-10-23.

[9]高皓亮. 基于Google Map的空间数据整合技术[J/OL]. http://www.paper.edu.cn/releasepaper/content/200901-307,2009-01-08.

[10] 殷福忠,孙立民. 基于瓦片金字塔技术的地图发布平台开发研究[J]. 测绘与空间地理信息,2010(5):16-17,20.

(编辑徐象平)

A model of fragmentations for displaying panoramic image quickly and implementation in the client

XIE Yuan-li1,2, YAO Jin2, XU Yun-bo3，ZHANG Rong-bin4, WANG Qin2

(1.School of Geographic and Oceanographic Sciences, Nanjing University, Nanjing 210093, China; 2.College of Urban and Environmental Science, Northwest University, Xi′an 710127, China; 3. Xi′an Branch, Esri China Information Technology Co., Ltd. ， Xi′an 710075, China; 4.Shaanxi Province Institute of Water Resources and Electric Power Investigation and Design, Xi′an 710002, China)

Panoramic technology has become a part of 3D GIS, the purpose of this paper is to improve the efficiency of panoramic image real-time displaying in the network.This paper provides a model of cutting. Panoramic image is cut into fragments, and then compared with the whole panoramic image in the speed of loading and displaying based on the Flex technology at the same viewing area. Compared with whole loading methods, this model can improve the efficiency in the speed of loading and displaying panoramic image.

panoramic image; model of fragmentations; hierarchical fragmentation; display quickly

2014-10-11

陕西省水利厅科研基金资助项目(2013SIKJ-28)

谢元礼，男，湖南衡阳人，西北大学副教授，南京大学博士生,从事遥感与GIS应用研究。

TP399

ADOI：10.16152/j.cnki.xdxbzr.2016-01-020