基于Cesium的三維模型可視化

王曉艷，陳憲冬

（1.西安科技大學 測繪科學與技術學院，陜西 西安 710054）

隨著WebGL技術的發展，三維模型的網絡共享和可視化成為可能。現有的三維模型文件格式無法滿足其在Web中快速傳輸、高效渲染的需求，而GL圖形傳輸格式（glTF）在一定程度上解決了該問題。glTF模型采用JSON描述場景結構，易解析，能減少加載時間、提高渲染效率。目前常用的SKP、OBJ、FBX、COLLADA等格式均可轉換為glTF，具有廣泛的數據來源。在glTF的基礎上，增加分層層次細節（HLOD）模型構建的3D Tiles三維模型瓦片結構，能快速傳輸海量異質三維地理空間數據集。OSGB格式的傾斜攝影測量數據、3D建筑數據、BIM/CAD數據、實例要素集數據和點云數據等均可轉換為3D Tiles。

已有學者對Web三維模型的可視化進行了研究，如孫曉鵬[1]等基于Cesium實現了三維場景的搭建；郭建雄[2]等對Web三維復雜模型的簡化與可視化進行了研究；樂世華[3]等基于Cesium實現了電站場景仿真。本文對glTF和3D Tiles兩種模型進行了分析，并利用Cesium搭建三維場景，實現了glTF和3D Tiles模型的三維可視化。基于HLOD的3D Tiles模型，弱化了加載不同層級時造成的視覺跳躍感，保證了大規模三維模型加載的流暢性[4]。

1 Cesium簡介

Cesium是一個用于在Web瀏覽器上創建三維虛擬地球的Javascript地圖引擎[5]，支持2D、2.5D和3D形式的展示，支持WMS、TMS、WMTS以及時序圖像[6]等多種資源的圖像圖層，支持全球高精度地形數據可視化。Cesium可創建各種三維集合模型，并支持多種自定義模型格式的加載。Cesium的體系架構按照層級可劃分為Core、Renderer、Scene和Dynamic Scene四個部分[7]。在Cesium體系架構中，上層模塊依賴于下層模塊提供的功能，上層模塊對下層功能進行更高次的抽象和封裝[8]。

2 glTF簡介

glTF是為方便三維模型的Web傳輸而設計的三維模型文件格式[9]，目前已成為三維模型在網絡服務中的主流數據格式，具有數據量小、易解析、三維場景完整、格式轉換方便、兼容性和共享性強等優點。

glTF由JSON文件、bin和Textures三個部分組成[10]。glTF的核心是JSON文件，包括完整的場景描述和屬性信息；幾何圖形、動畫數據以及其他基于緩沖區的數據以二進制的形式存儲在bin文件中；紋理圖像文件（jpg、png等）存儲在Textures文件中。

JSON文件描述了3D模型場景的結構和組成，如圖1所示，文件的頂層元素包括場景的基本結構scene、node，場景的視圖配置camera，三維對象的幾何圖形mesh，數據引用和數據布局說明buffer、bufferView、accessor，渲染對象的定義material，物體的表面外觀texture、image，頂點蒙皮信息skin和隨時間變化的屬性animation。buffer包含幾何或動畫數據，image包含模型紋理數據的圖像文件（jpg、png等）。讀取和處理glTF是從解析JSON文件開始的，解析完成后，緩沖區和圖像對象分別在頂級緩沖區和圖像數組中可用。每個對象均可引用二進制數據塊，為了方便處理，將數據讀入內存，以二進制的形式存儲數據，對象之間的引用通過索引來查找。二進制存儲使其能比JSON格式更有效地在Web上傳輸，且二進制數據可直接傳遞給渲染器而不必解碼或預處理。

圖1 glTF JSON結構

3 3D Tiles簡介

3.1 基本結構

3D Tiles的基本框架為瓦片集[11]，通過一個主Tileset JSON文件作為入口點來定義Tileset[12]。Tileset JSON結構如圖2所示，JSON對象包括瓦片集資產（asset）、瓦片集中的要素元數據（properties）、瓦片集幾何體誤差（geometric Error）和瓦片集索引樹的根節點對象（root）4個頂級屬性。root存儲瓦片的屬性信息，以樹的形式表示整個瓦片集的空間結構，若存在子瓦片，則children定義一個對象數組，存儲子瓦片的屬性信息。content屬性存儲瓦片的地理空間范圍和數據引用，url指向瓦片的Tileset.json路徑。

圖2 3D Tiles Tileset JSON結構

3.2 HLOD模型

3D Tiles支持海量瓦片集的加載，可對大規模模型進行均勻或非均勻分割，避免一次性加載過大模型[13]。3D Tiles對于樹的結構沒有約束，可采用不同樹和細化方法的任意組合[12]，常見的分割樹包括四叉樹、八叉樹、K-d樹等，實現了異構數據集的靈活性。實現分割后，再利用HLOD模型進行加載。

3D Tiles融合了HLOD模型，可根據空間數據的分布密度和覆蓋區域，采用相應的空間分割方法進行不同層次不同粒度的剖分，生成連續的HLOD模型[14]。在渲染大規模模型時，相對于靜態LOD能保持較好的細節，相對于動態LOD能加快渲染的效率，基于視點動態調度場景的HLOD模型，采用視錐剔除方法。隨著視點變化，選擇不同分辨率的HLOD模型進行繪制，同時剔除不可見的節點[15]，能保持較好的全局和局部細節，提高場景渲染效率，提升視覺繪制效果。

瓦片數據的細化包括替換優化和加法優化兩種方法，其中替換優化利用較高分辨率且精細的子節點模型代替低分辨率且粗糙的父節點模型，幾何誤差逐級減小，當子節點平鋪時，父節點模型不再顯示，適用于大規模模型的加載；而加法優化在父節點模型的基礎上，增加了其他相對次要的模型，在細化時同時渲染自身和子切片，不重復下載數據，子級可在渲染兄弟級之前呈現，適用于簡單模型的加載。

4 實驗驗證

實驗以3ds Max構建的故宮模型為研究對象，將原始模型轉換為可供Web前端使用的glTF模型和3D Tiles模型，轉換流程如圖3所示。首先將模型導出為obj格式，并通過obj2gltf[16]轉換工具將模型轉換為glTF格式模型；再利用開源工具對obj切片，得到3D Tiles格式模型；最后分別將得到的三維模型加載到構建的三維場景中。

圖3 格式轉換流程圖

在Cesium中加載模型的關鍵代碼為；

‘構建三維場景

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.imageryLayers.add(guge);

var terrain=Cesium.createWorldTerrain({

requestWaterMask: true,

requestVertexNormals: true

});

viewer.terrainProvider=terrain;

‘加載glTF模型

var entity = viewer.entities.add({

position : position,

orientation : orientation,

model : {

url:'./SampleData/gugong/gugong.gltf'

}});

viewer.trackedEntity = entity;

‘加載3D Tiles模型

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

url: './SampleData/故宮模型/tileset.json'

}));

glTF模型加載如圖4所示。3D Tiles模型加載如圖5所示，可以看出，遠距離顯示模型的整體，幀率為25 FPS；中距離顯示模型的部分細節，幀率為21 FPS；近距離顯示模型的全部細節，幀率為18 FPS。HLOD加載方式能使用戶根據場景需求自行決定選擇何種模型層級，能高效地在三維場景中渲染模型，實現流暢三維空間瀏覽。

圖4 故宮glTF模型

圖5 故宮3D Tiles模型

5 結 語

本文基于Cesium構建三維顯示場景，加載兩種格式的模型，并對模型進行了理論分析。結果表明，基于WebGL和HTML5技術的Cesium引擎，用戶無需安裝插件，可直接在瀏覽器中對模型進行可視化研究；通過轉換工具能將一系列通用格式模型（obj、dae、collada）轉換為glTF和3D Tiles格式，具有廣泛的數據來源。基于漸進式HLOD思想的3D Tiles模型，能根據視點變化基于空間幾何誤差與屏幕誤差確定LOD層級，保證只加載和渲染與當前精度匹配的數據。通過對不同層級下模型的加載幀率進行對比發現，3D Tiles模型的加載模式能減少模型層級之間的冗余，大大提高網絡傳輸效率和模型渲染速率。