移動室內地圖圖形引擎的設計與關鍵技術

田江鵬，游　雄，賈奮勵，夏　青

(信息工程大學地理空間信息學院，河南 鄭州 450052)

?

移動室內地圖圖形引擎的設計與關鍵技術

田江鵬，游雄，賈奮勵，夏青

(信息工程大學地理空間信息學院，河南 鄭州 450052)

移動室內地圖正處于快速發展時期，良好的圖形引擎是優質室內地圖系統的必要基礎。本文在分析移動室內地圖系統的技術需求的基礎上，設計并實現了一種跨平臺、二三維統一、具有多交互技術的輕量級圖形引擎。重點分析了基于Skia的二維圖形內核和基于OpenGL ES的三維圖形內核；設計了一種“場景樹→繪制堆棧”的圖形加速方案，以提高引擎的繪圖效率；提出并實現了一種二三維統一的圖形交互方案，以及繪圖區的雙緩存設計，優化了圖形引擎的用戶體驗。

圖形引擎；移動室內地圖；跨平臺；二三維一體化

室內地圖一般指大型建筑的內部地圖，與室外地圖相比，其關注的是小區域、大比例尺、高精度和精細化的內部元素展現[1]。室內地圖并不是一個新興的事物，其常見的形式是張貼在建筑物出入口、通道等顯著位置的，用于描述室內建筑格局和室內要素分布的地圖。隨著智能移動終端的普及、移動物聯網的發展，以智能手機為代表的移動終端大有取代傳統電腦終端的趨勢，桌面應用開始更多地向移動終端領域轉移。移動浪潮[2]的到來，逐漸改變著人們的生活方式，地圖也正在發生著深刻的變化，位置服務及位置地圖[3]將成為室內地圖乃至傳統地圖學進一步發展的主陣地。

技術的發展賦予了室內地圖全新的生命力，室內地圖逐漸以一種位置地圖的形式走入大眾的眼前。關于移動室內地圖的研究，學術界側重于其概念的探討[4-5]、認知特點的分析[1，6-7]、室內地圖的設計[8-9]、室內位置地圖服務[10]等方面。而在商業開發與應用角度，2011年11月，谷歌地圖6.0發布并推出了室內地圖服務[11]。隨后出現了專注于商場購物服務的Aisle411、FastMall和Meridian等，專注于機場服務并已涵蓋全球重要機場的PointInside應用等。國內，典型的室內地圖應用包括百度室內地圖、高德室內地圖、點道室內地圖等，還有一些與室內地圖相關的服務商和應用，如圖淵、尋鹿、積米等。可以看出，隨著位置服務和移動計算的成熟，各大地圖廠商爭先搶占移動室內地圖這一發展先機。

雖然技術和市場的巨大推動力使得室內地圖應用服務得到了快速發展，但仍需從理論和技術層面，對移動室內地圖進行更為深入的、系統化的探討。特別是對于移動室內地圖的圖形引擎而言，相關探討的文獻十分有限[12-13]。而圖形引擎又是一個電子地圖系統必須考慮的重要基礎組件之一，負責場景數據的組織、圖形快速繪制、交互行為的響應等，其設計優劣直接影響著整個地圖系統的運行效率和用戶體驗。因此，本文以移動終端環境下、面向移動室內地圖制圖的、跨平臺輕量級圖形引擎為研究對象，探討移動地圖圖形引擎的設計及相關關鍵技術。

一、圖形引擎設計

1. 移動室內地圖的技術需求

1) 跨平臺。由于移動終端使用的操作系統具有多樣化特征，主流的iOS、Android、WinPhone等開發環境和開發語言不盡相同，通常導致了同一個地圖應用需開發不同源碼版本，造成研發資源浪費。因此，需采用跨平臺技術，封裝操作系統的特殊性，并采用跨平臺的語言編寫系統的數據處理和圖形渲染的主體邏輯。

2) 輕量級和快速渲染。由于移動終端處理器速度和計算能力較弱，因此移動端地圖系統一般都具有輕量級特征，這也導致了圖形引擎必須是輕量級的，以實現快速渲染為目的。因此，使用QT[14]或OSG[15]等圖形庫，通常需要進行功能的縮減，以節約有限的移動端處理器計算資源。

3) 多交互技術。移動終端主要是基于多點觸控屏進行交互的，因此交互方式和方法有別于PC端的鼠標和鍵盤。同時，移動地圖是以用圖者為中心的，用戶通常希望能夠將地圖“倒下”或與當前視線方向保持一致，這就要求圖形引擎能適應多種交互方式。

4) 二三維一體化。二維地圖通常表達抽象的現實世界，而三維地圖通常更為形象直觀，二三維室內地圖表達相結合，能充分發揮各自的優點。因此，室內地圖及其圖形引擎設計需顧及二三維一體化特征。

2. 跨平臺開發路線

根據技術需求，采用基于標準C++語言的開發路線。即盡可能地采用平臺無關的代碼編寫軟件模塊，同時限定與操作系統平臺相關的代碼規模至最小，保證同一套核心邏輯的源碼在不同平臺上編譯后運行。通過分析Windows下的*.vcxproj工程文件、Android下的*.mk工程文件和iOS下的*.xcodeproj等工程文件的相似性，構建了不同操作系統下的統一工程開發的模式，實現了同一套源代碼在不同操作系統環境下的軟件編譯和開發。

以*.mk工程組織模式為例，工程和代碼的組織邏輯結構如圖1所示。通過MK文件的級聯管理，使得每一個對象模塊均組織在同一個工程文件夾下，在同一個工程中實現對各個模塊的編譯和聯調聯試、共享和編輯同一套源碼文件。

3. 圖形引擎架構

通過分析主流二維和三維圖形引擎的設計，本文采用“視圖→場景→繪制體→圖形屬性”4個層次為設計原則，構建移動室內地圖圖形引擎。

(1) 視圖(View)

圖形引擎的頂層管理者，負責以下內容：①視圖的創建與管理；②不同操作系統平臺的圖形設備(Device Context)封裝；③二三維攝像機(Camera)和視圖操縱器(Manipulator)的關聯；④人機交互界面的設計與交互處理；⑤外部輸入交互消息的處理及圖形引擎內部消息(Message)循環；⑥圖形渲染緩存區(DrawBuffer)的交換機制；⑦繪制線程管理和線程池的維護。

(2) 場景圖(Scene Graph)

為地圖場景數據的有效組織和管理提供接口，主要包括組節點(GroupNode)、圖形操作節點(OperaNode)、對象節點(ObjectNode)，負責以下內容：①不同類型場景節點的創建與維護；②節點的遍歷與訪問方法；③場景樹的更新與維護。

(3) 繪制對象

提供不同類型的圖形繪制對象，如幾何體(點、線段、弧線、路徑等)、圖像、文本等。

(4) 圖形屬性

為繪制體提供了顏色、粗細、反走樣、特效等狀態屬性信息的描述。

圖形引擎的架構如圖2所示，主要由兩個層次組成。組件層次通過組件注冊的方式，提供二維(ComDrawEngine)或三維(ComRenderEngine)的圖形繪制服務組件。內核層次主要包括二維繪圖內核(DrawCore)和三維渲染內核(RenderCore)，圖形引擎分別采取Skia作為二維圖形繪圖驅動、OpenGL ES作為三維圖形渲染驅動；同時，圖形引擎采用統一的交互操縱方式，即通過統一的操縱器(Manipulator)產生模型視圖矩陣，并提交二三維各自的相機(Camera)進行處理，實現二三維統一的圖形操縱。

圖2　移動室內地圖圖形引擎的架構

二、圖形引擎的關鍵技術

1. 基于Skia的二維圖形繪圖內核

Skia是一個二維向量圖形處理的圖形驅動，用于谷歌瀏覽器、Android圖形驅動等，具有適用移動端、功能豐富、基于OpenGL的加速等特征。基于Skia的二維圖形繪圖內核接口模型的UML設計如圖3所示，主要包括5個部分：基本屬性接口部分、高級特效接口部分、繪圖對象接口部分、圖形節點組織接口部分及視圖部分。繪圖對象和基本屬性接口能夠用于構建任意地圖制圖需求的圖形及其繪制形式。高級特效提供了繪圖對象影音、光照、模糊等特殊效果形式，特效繪制方法特別適用于室內地圖制圖。圖形節點通過圖形對象節點(ObjectNode)和組節點(GroupNode)，能夠將所需要繪制的地圖數據按照一棵“場景樹[15]”的形式進行組織。場景圖組織圖形數據的設計，常見于三維圖形引擎設計。本文使用場景圖技術組織二維圖形數據，不僅有利于二三維圖形內核的統一，也為后續的制圖引擎效率優化提供了基礎。

圖3　基于Skia的二維圖形繪圖內核接口模型

2. 基于OpenGL ES的三維圖形渲染內核

三維圖形引擎方面，主要借鑒OSG設計的核心思想，基于OpenGL ES三維圖形驅動，設計了三維圖形渲染內核，其設計如圖4所示。主要包括以下4個部分：

1) 狀態集(StateSet)：封裝OpenGL ES的狀態及OpenGL狀態機。

2) 可繪制體(Drawable)：封裝了OpenGL ES可繪制幾何類型，主要為矢量數據類型、像素數據類型、文字數據類型，以及三者的組合。

3) 圖形節點(Node)：移植了OSG的基本設計，負責三維繪制數據的組織。三維圖形內核和二維圖形內核在圖形節點組織方面，公用一套接口，內部實現不同；這一設計有利于上層制圖系統中圖形組織的統一。

4) 視景(Viewer)：封裝了繪圖所需的視圖。

在移動終端上，OpenGL ES分為兩個版本，其主要差別在于使用GLSL著色語言版本的不同，三維圖形渲染內核采用了更為快速的GLES2版本驅動。

圖4　基于OpenGL ES的三維圖形渲染設計

3. “場景樹→繪制堆棧”的圖形引擎加速

為了加速圖形繪圖速度，圖形引擎內部對繪制數據進行了優化設計，圖形引擎的加速繪制設計如圖5所示。

圖5　多線程“場景圖→繪制堆棧”圖形加速技術

1) 使用多線程技術，使得Skia/OpenGL ES的圖形接口被封裝在一個繪制管線中，此時對于基于“場景圖”組織的繪圖數據，可以在渲染管線中進行批量繪圖處理，從而加速繪圖效率。

2) 使用了“場景圖→繪制堆棧”的轉換機制，節點排序回調能夠根據節點的繪圖對象及其屬性信息，對繪圖數據進行分類和排序，形成繪制數據堆棧。繪制堆棧在每一幀的刷新過程中提交繪制管線的繪制器進行圖形繪圖。

3) 使用了多線程技術，將節點排序回調、繪制數據堆棧及繪制管線分別封裝在獨立的線程中，并通過有效的線程互斥和線程安全保護，實現移動端處理器計算資源的有效利用，提高了室內地圖圖形引擎的效率。

4. 統一的圖形操縱與實現

Skia提供了繪圖時進行矩陣變換的接口，使得對二維圖形的操作可以與OpenGL ES的操作方式進行統一。假設有世界坐標系下的坐標Cworld，如為經緯度坐標(L,B,H)；定義矩陣Mview表示攝像機的觀察矩陣(view matrix)，即把對象從世界坐標系變換到攝像機坐標系；則觀察矩陣可以將世界坐標系坐標Cworld變換為攝像機相對坐標系坐標Clocal

Clocal=Cworld×Mview

定義投影矩陣Mproj(project matrix)，用于設置攝像機的拍攝參數，即創建了一個視錐體(Frustum)，并將包含在其中的場景對象投影到鏡頭平面上來。用Cproj表示投影后的坐標，則

Cproj=Clocal×Mproj

定義視口矩陣Mwnd(window matrix)，其主要功能是把投影坐標變換到指定的二維視口中去，則最終的窗口坐標Cwnd為

Cwnd=Cproj×Mwnd

因此，定義Mvpw=Mview×Mproj×Mwnd，則一個世界坐標系下的坐標與其在屏幕上的坐標就可以通過以下公式進行可逆計算

根據上述原理，本文設計了圖形操作機制，如圖6所示。在圖形引擎中，攝像機Camera負責維護3個矩陣：wndMatrix記錄了視口變化的數值；projMatrix記錄了Camera投影參數的數據；viewMatrix為視圖矩陣，記錄了用戶對Camera視點操作的數據。

用戶交互事件產生的平移、旋轉等參數，通過Manipulator轉換為一個臨時的視圖矩陣，并通過該矩陣級聯至viewMatrix并修正。操縱器Manipulator通過回調接口的方式向用戶提供響應的方式，用戶只需重載回調函數即可完成交互事件的響應。如此，就可以用統一接口接收多點觸控手勢、筆、屏幕鍵盤等交互方式的交互事件。

5. 繪圖數據的雙緩存設計

雙緩存設計主要用于改善二維圖形繪圖內核的用戶感受效果。由于繪圖數據量、是否開啟特效、是否開啟反走樣、移動端在線等待數據下載等多種因素約束，直接繪制在設備緩存區的方法會導致地圖“卡頓”的現象，嚴重影響室內地圖的使用體驗效果。針對這一問題，本文設計了一種繪圖數據的雙緩存技術，其基本原理如圖7所示。

圖7　繪圖數據的雙緩存原理

根據顯示設備緩存的基本參數，構建了FrontBuffer和BackBuffer兩個像素緩存區。其中，BackBuffer位于繪制管線線程中，為繪制器提供一個畫板，將繪制數據堆棧中的數據渲染在該緩存上。FrontBuffer緩存區位于繪制管線線程外，負責緩存已經繪制完整的地圖幀。在緩存交換控制下，只有BackBuffer繪制工作完成后，繪制管線線程解除鎖定，前后緩存交換。由于FrontBuffer緩存了已經繪制好的地圖幀，使得用戶與制圖系統實時交互時，設備屏幕上顯示的地圖只需從FrontBuffer直接拷貝，極大地提高了地圖顯示的效率，避免了地圖顯示時的“卡頓”現象。同時，由于雙緩存機制是圖形引擎內部實現的，與顯卡和硬件無關，這一特點對于型號多樣化的嵌入式平臺和移動終端而言，具有一定的硬件無關性優勢。

三、圖形引擎在室內地圖制圖中的應用

本文設計的移動室內地圖圖形引擎，已經在主流的移動操作系統(已經測試的有Android4.2、iOS7和WindowsPhone8)及PC操作系統(Windows7、Ubantu12和MacOSX10)上進行了室內地圖制圖應用。圖8顯示了在Android系統上的二三維室內制圖效果圖，該圖也展現了在統一的操縱器控制下，二三維室內地圖交互和表達的統一。

圖9顯示了使用本文圖形引擎得到的不同室內地圖的制圖效果，包括二三維單樓層的表達效果和多樓層的表達效果。通過統一的圖形操縱器，能夠實現二維室內地圖的偽三維表達，這一特點在室內地圖多樓層切換、多樓層疊加統一表達方面具有顯著的優勢。

圖8　圖形引擎在Android系統上的二三維應用效果

圖9　圖形引擎在室內地圖表達中的綜合應用

四、結束語

目前，移動室內地圖正處于快速發展時期，良好的圖形引擎是優質室內地圖系統的重要基礎，因此圖形引擎的研究具有重要意義。本文分析了室內地圖圖形引擎構建的技術需求，設計了具有跨平臺特征、二三維統一、具有多交互技術的輕量級圖形引擎；分析了基于Skia的二維圖形內核和基于OpenGLES的三維圖形內核；設計了一種“場景樹→繪制堆棧”的圖形加速方案，以提高引擎的繪圖效率；通過統一的圖形交互設計，以及繪圖區的雙緩存設計，優化了圖形引擎的用戶體驗。圖形引擎的繪制效率和用戶交互體驗，是有待于進一步研究并提高的問題。

[1]張蘭. 室內地圖的空間認知與表達模板研究[D].鄭州：信息工程大學，2014.

[2]邁克爾·塞勒. 移動浪潮：移動智能如何改變世界[M]. 鄒韜，譯. 北京：中信出版社，2013.

[3]周成虎，朱欣焰，王蒙，等. 全息位置地圖研究[J]. 地理科學進展，2011，30(11):1331-1335.

[4]GOTLIBD,MARCINIAKJ.CartographicalAspectsintheDesignofIndoorNavigationSystems[J].AnnualofNavigation，2012，19(1).DOI: 10.2478/v10367-012- 0004-x.

[5]GOTLIBD,GNATM.SpatialDatabaseModelingforIndoorNavigationSystems[J].ReportsonGeodesyandGeoinformatics，2013,95(1)：49-63.DOI: 10.2478/rgg-2013-0012.

[6]FRANKENSTEINJ,BRüSSOWS,RUZZOLIF，etal.TheLanguageofLandmarks:TheRoleofBackgroundKnowledgeinIndoorWayfinding[J].CognProcess.DOI：10.1007/s10339-012-0482-8.

[7]H?LSCHERC,MEILINGERT,VRACHLIOTISG,etal.UptheDownStaircase:WayfindingStrategiesinMulti-levelBuildings[J].JournalofEnvironmentalPsychology, 2006, 26(4): 284-299.

[8]NOSSUMAS.IndoorTubesaNovelDesignforIndoorMaps[J].CartographyandGeographicInformationScience, 2011, 38(2): 192-200.

[9]鄧晨. 基于空間認知的移動室內地圖設計新模式[J]. 系統仿真學報，2014，26(9):2097-2103.

[10]朱欣焰，周成虎，咼維，等. 全息位置地圖概念內涵及其關鍵技術初探[J]. 武漢大學學報(信息科學版)，2015, 40(3): 285-296.

[11]NOSSUMAS.IndoorTubes:ANovelDesignforIndoorMaps[J].CartographyandGeographicInformationScience, 2011, 38(2): 193-201.[12]劉愛龍，張東，陳濤，等. 跨平臺嵌入式數字地圖可視化中間件設計與應用[J]. 地球信息科學學報，2015, 17(6): 675-681.

[13]劉小林,華一新,葛文,等. 嵌入式GIS 圖形中間件的設計與實現[J]. 測繪通報,2010(11):58-61.

[14]BLANCHETTE J, SUMMERFIELD M. C++ GUI Programming with Qt4[M]. 閆鋒欣, 曾泉人, 張志強,譯.2版.北京:電子工業出版社,2008:1-10.

[15]王銳，錢學雷. OpenSceneGraph三維渲染引擎設計與實踐[M]. 北京：清華大學出版社，2009.

Graphics Engine of Indoor Mobile Map: Design and Key Technologies

TIAN Jiangpeng,YOU Xiong,JIA Fenli,XIA Qing

田江鵬，游雄，賈奮勵,等.移動室內地圖圖形引擎的設計與關鍵技術[J].測繪通報，2016(10)：45-50.DOI:10.13474/j.cnki.11-2246.2016.0326.

2015-12-10

國家863計劃(2013AA12A202)；國家自然科學基金(41271393；41371382)

田江鵬(1987—)，男，博士生，研究方向為地圖制圖學與地理信息工程。E-mail：tjpeng2011@163.com

P208

B

0494-0911(2016)10-0045-06