基于Cesium 3D Tiles技術的模型分級加載研究

熊 英

(廣東華南水電高新技術開發有限公司，廣東 廣州 510611)

隨著技術的發展和用戶需求的提高，三維GIS逐漸受到越來越多學者的關注。同時，無人機的應用開始越來越大眾化，使大范圍三維模型的生成變得更加容易，這也進一步地促進了三維GIS的廣泛應用[1]。為了推進三維GIS的快速發展，許多學者、從業者做了相關方面的研究工作。吳風華、張亞寧[2]在基于SuperMap iServer 6R和3ds Max建設的二三維一體化系統中，為了解決三維數據量大、運行緩慢的問題，將3DS 模型轉換為 SuperMap 提供的一種三維模型存儲格式(SGM 格式)進行加載，在一定程度上提高了模型的加載速度和顯示效果。陳鵬等[3]通過Skyline 與SuperMap6R分別構建了二三維一體化系統，并對其性能、效果等進行對比。其中，Skyline性能顯著較優，因為其在三維場景優化上采用了比較先進的LOD 技術，地形地貌數據采用金字塔分級技術，顯示效率基本可以達到與數據量無關、模型顯示上采用了4 級LOD 分級顯示，同時通過視場靈活調度模型的顯示和剔除。曹晶等人[4]使用了一款Terra Vista軟件進行三維建模，并采用開源庫OSG實現三維地圖的漫游,實現了大范圍城市三維系統的快速建模及流暢漫游。但OSG僅對地形及地表影像提供LOD支持，對模型不支持。王子啟等[5]通過Skyline構建了具有紋理金字塔的xpl2 格式模型。它是一組在貼圖上進行層次細節分級顯示的模型金字塔格式，顯示時可以根據視距遠近控制顯示紋理精細度，從而有效地降低系統內存占用率，減少系統啟動時間，提高可視范圍內模型的讀取速度。李俊金[6]對 Cesium與無人機傾斜攝影技術結合應用在三維城市建模進行了初步探討。朱栩逸、苗放[7]討論了Cesium框架與Cesium下地形數據處理方法，提出了利用Cesium搭建開源三維GIS方案，并實現了Web GIS系統中的部分基本功能，并未對三維模型部分進行研究。任宏康等[8]利用HTML5 與WebGL 第三方類庫Three.js 技術，基于瓦片信息對真實三維地形進行了設計與實現，并采用Three.js提供的接口功能創建組織了4 層LOD 模型。Three.js作為一套經常與Cesium.js相提并論的開源三維客戶端技術，也不失為一套行之有效并具備開放、免插件、跨平臺等優點的3DWebGIS 方案。

綜合以上研究成果可見，三維GIS方面軟件工具眾多，有功能齊備、操作簡便的商業化軟件，如Skyline、SuperMap等，也有接口豐富、擴展性強的開源庫，如Cesium.js、Three.js、OSG等。在三維地形建模方面研究成果較多，技術也較為成熟，大部分均能提供三維地形的LOD能力。但在三維模型的LOD研究方面成果明顯較少，尤其是在開源庫、WebGL等基礎上的三維模型分級加載研究。本文通過在該方面的探索性研究和應用為廣大學者、從業者在技術選型與比較等方面提供了借鑒和參考。

1 方法

1.1 系統關鍵技術

a) OpenGL等相關技術。OpenGL為用于渲染2D、3D矢量圖形的跨語言、跨平臺的應用程序編程接口(API)[9]。OpenGL ES(OpenGL for Embedded Systems)則為OpenGL的子集，針對手機、PDA和游戲主機等嵌入式設備而設計[10]。WebGL是一項利用JavaScript API渲染交互式3D電腦圖形和2D圖形的技術，可兼容任何的網頁瀏覽器，無需加裝插件。通過WebGL的技術，只需要編寫網頁代碼即可實現3D圖像的展示。WebGL的規格尚在發展中，由非營利的Khronos Group管理。

b) Cesium技術[11]。Cesium是一個基于JavaScript編寫的使用WebGL的地圖引擎，一款開源3D GIS的javascript庫。Cesium支持3D、2D、2.5D形式的地圖展示，可以自行繪制圖形，高亮區域，并提供良好的觸摸支持，且支持絕大多數的瀏覽器和mobile。但是由于Cesium基于WebGL來渲染3D的，所以瀏覽器必須支持WebGL才可以運行。

c) 3D Tiles技術[12]。Cesium團隊2016年推出的數據規范，在glTF基礎上提供了LOD能力，定位是Web環境下海量三維模型數據的加載。該規范于2016年9月30日已開始了OGC標準化進程，在將來的三維模型數據加載中將占領重要的地位。

1.2 研究框架

本文研究的整體技術路線見圖1。通過三維建模軟件構建得到的模型一般為.dae格式，為了在網絡上進行傳輸進而支撐信息化應用，需要通過轉換工具[13]轉換為glTF格式。glTF(GL Transmission Format)是專為3D模型的網絡傳輸而設計的格式。它的核心是一個JSON文件，通過該文件描述了三維模型的結構、組成等。JSON文件中的一級節點包括scenes、nodes、cameras、animations、meshes、textures、images、samplers、buffers、bufferViewers、accessors、materials、techniques、programs、shaders、skins。其中，scenes、nodes、cameras、animations描述了模型整個場景的結構；meshes、textures、images、samplers則主要用來描述場景中的三維物體，如節點、紋理等；buffers、bufferViewers、accessors則是核心數據，buffers中存儲了所有的二進制數據，bufferViewers、accessors均建立在buffers基礎上；materials、techniques、programs、shaders則屬于OpenGL中的概念，通過它們完成對三維模型的渲染。

圖1 技術路線

一般標準的glTF是文本格式，在對二進制數據的處理上一般有2種做法：一是把二進制文件(包括紋理圖片、buffer數據等)獨立出來，這樣會很大幅度地降低glTF文件大小，但在網絡傳輸過程中，則需要額外地加載二進制文件，增加網絡資源消耗，降低加載速度，該方法處理得到的.gltf格式模型文件見表1；二是把二進制部分按照base64編碼后以data URI的形式嵌入在glTF文件中，該方會極大幅度地增加文件大小，且需要額外的客戶端解碼。

表1 .gltf格式模型文件

為了克服這些不足，.glb格式應運而生[14]。它將JSON文件與二進制數據進行融合，具體由文件頭、場景描述JSON和二進制數據所組成，見圖2。

圖2 .glb格式模型規范

該.glb文件基本包括了所有buffer數據和紋理圖片，且文件較小，結構簡單清晰，使用起來更為方便。它是后面3D Tiles格式的重要基礎。

以上僅是整個模型的加載，并不具備LOD的能力。3D Tiles賦予了glTF分級加載的能力。它將二維地圖中金字塔的概念引入三維領域，特別適用于海量三維模型的加載。圖3中是官方給出的New York City三維模型實例。可見，比例尺較小的時候，僅是一些地標性的建筑得到加載，隨著地圖的放大，越來越多的模型得到展示。

截至目前，3D Tiles提供的僅是一套規范，但Cesium.js已具備了3D Tiles的支撐能力。按照這套規范對模型進行預處理，處理成的模型金字塔則可直接在Cesium中以Cesium 3D Tileset的類型來完成加載[15]。

a)小比例尺 b)中比例尺 c)大比例尺圖3 New York City模型分級加載效果

根據使用場景的不同，3D Tiles提出了Batched 3D Model(.b3dm)、Instanced 3D Model(.i3dm)、Point Cloud、Composite等不同類型的格式，其中，前兩者使用較多。Batched多使用于建筑，Instanced則適用于有多個重復對象的情況，如樹木等。與.glb類似，.b3dm和.i3dm也是由固定格式的文件頭、json和二進制文件組成，見圖4—5。

圖4 .b3dm模型文件規范

按照這些瓦片格式規范整理出的模型金字塔，便可在Cesium中進行載入，從而實現了三維模型的分級加載。瓦片格式規范見表2。

表2 瓦片格式規范

2 實驗分析

根據上文的技術路線展開實驗，以無人機拍攝的覆蓋大約7 km2的廣州開發區玉樹工業園為例，進行三維自動化建模，并對建模結果進行處理和轉換，最終按照3D Tiles數據規范生成模型瓦片金字塔，并在WebGIS系統中進行加載和展示，結果如下。

a) 三維模型的建模與切片。該步驟主要通過三維建模軟件Photo Scan完成自動化建模，并生成不同級別的瓦片數據。

b) 模型瓦片的格式轉換。采用不同工具，按照.dae->.gltf->.glb->.b3dm的流程對模型瓦片分別進行轉換。

c) 模型瓦片結構關系的建立。通過tileset.json文件，以內嵌的形式記錄各級模型瓦片之間的結構關系。目前tileset.json文件的生成需要計算多個bounding Volume、 transform，可編寫腳本工具實現json文件中子節點的自動添加和計算。

d) 模型金字塔的加載。按照該流程，對無人機航拍建模結果進行處理，得到金字塔，見表3。在Cesium中通過簡單的語句進行加載，效果見圖6。

e) 實驗結果。以筆者所使用的計算機進行測試(處理器為AMD A6-3600 APU with Radeon HD Graphics 2.10 GHz，8 Gb內存，WIN10 64位操作系統，瀏覽器為Google Chrome 59.0.3071.115版本)，如果在瀏覽器中直接加載原始模型(.glb格式大小約為115 M)，則內存占用接近3 Gb，模型加載時間約6.08 s(不含紋理渲染的耗費時間)，加載后整個地圖的拖動舉步維艱，嚴重地制約了三維WebGIS的推廣和應用。將該模型處理成瓦片后再進行加載，第1級含1個瓦片，第2級為4個，第3級為14個，每個瓦片大小最大不超過300 kb，加載時間均在5 ms以內。后面的級別雖然會呈指數級增長，但根據視錐體和水平裁剪等算法，僅位于當前視線范圍內的瓦片才會進行加載，因此即使在大比例尺下也不會帶來性能瓶頸。整個模型加載以后地圖拖動靈活自如，極大地提升了用戶體驗。該實驗結果有力證明了3D Tiles在提升WebGIS中三維模型加載效率的有效性。

表3 模型金字塔

a)第1級 b)第2級 c)第3級圖6 分級加載效果

3 結論

隨著近年來水利信息化的大力發展，各項水利業務對三維場景的構建提出了越來越多的應用需求，但無論是自動化的實景三維建模還是手工的精細化三維建模，得到的模型往往數據量較大。為了推廣三維場景的使用，三維模型的高效加載是一個亟需解決的瓶頸。在此背景下，本文提出了一套基于Cesium.js和3D Tiles技術的三維模型分級加載機制。基于該機制，以無人機拍攝建模結果為實例，預先構建了三維模型金字塔，并在瀏覽器中對金字塔模型進行分級分塊地加載，優化了三維模型的展示效果和加載效率，克服了三維WebGIS的性能瓶頸。該實驗結果有力證明了3D Tiles在提升WebGIS中三維模型加載效率的有效性，從而可為水利場景的構建和信息化推廣提供一定的借鑒。