一種全景圖客戶端快速顯示的切片模型與實現

謝元禮， 姚　瑾， 許允波，張榮斌， 王　芹

(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