基于Cesium的三維模型可視化

王曉艷，陳憲冬

（1.西安科技大學(xué) 測(cè)繪科學(xué)與技術(shù)學(xué)院，陜西 西安 710054）

隨著WebGL技術(shù)的發(fā)展，三維模型的網(wǎng)絡(luò)共享和可視化成為可能?，F(xiàn)有的三維模型文件格式無(wú)法滿(mǎn)足其在Web中快速傳輸、高效渲染的需求，而GL圖形傳輸格式（glTF）在一定程度上解決了該問(wèn)題。glTF模型采用JSON描述場(chǎng)景結(jié)構(gòu)，易解析，能減少加載時(shí)間、提高渲染效率。目前常用的SKP、OBJ、FBX、COLLADA等格式均可轉(zhuǎn)換為glTF，具有廣泛的數(shù)據(jù)來(lái)源。在glTF的基礎(chǔ)上，增加分層層次細(xì)節(jié)（HLOD）模型構(gòu)建的3D Tiles三維模型瓦片結(jié)構(gòu)，能快速傳輸海量異質(zhì)三維地理空間數(shù)據(jù)集。OSGB格式的傾斜攝影測(cè)量數(shù)據(jù)、3D建筑數(shù)據(jù)、BIM/CAD數(shù)據(jù)、實(shí)例要素集數(shù)據(jù)和點(diǎn)云數(shù)據(jù)等均可轉(zhuǎn)換為3D Tiles。

已有學(xué)者對(duì)Web三維模型的可視化進(jìn)行了研究，如孫曉鵬[1]等基于Cesium實(shí)現(xiàn)了三維場(chǎng)景的搭建；郭建雄[2]等對(duì)Web三維復(fù)雜模型的簡(jiǎn)化與可視化進(jìn)行了研究；樂(lè)世華[3]等基于Cesium實(shí)現(xiàn)了電站場(chǎng)景仿真。本文對(duì)glTF和3D Tiles兩種模型進(jìn)行了分析，并利用Cesium搭建三維場(chǎng)景，實(shí)現(xiàn)了glTF和3D Tiles模型的三維可視化?；贖LOD的3D Tiles模型，弱化了加載不同層級(jí)時(shí)造成的視覺(jué)跳躍感，保證了大規(guī)模三維模型加載的流暢性[4]。

1 Cesium簡(jiǎn)介

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

2 glTF簡(jiǎn)介

glTF是為方便三維模型的Web傳輸而設(shè)計(jì)的三維模型文件格式[9]，目前已成為三維模型在網(wǎng)絡(luò)服務(wù)中的主流數(shù)據(jù)格式，具有數(shù)據(jù)量小、易解析、三維場(chǎng)景完整、格式轉(zhuǎn)換方便、兼容性和共享性強(qiáng)等優(yōu)點(diǎn)。

glTF由JSON文件、bin和Textures三個(gè)部分組成[10]。glTF的核心是JSON文件，包括完整的場(chǎng)景描述和屬性信息；幾何圖形、動(dòng)畫(huà)數(shù)據(jù)以及其他基于緩沖區(qū)的數(shù)據(jù)以二進(jìn)制的形式存儲(chǔ)在bin文件中；紋理圖像文件（jpg、png等）存儲(chǔ)在Textures文件中。

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

圖1 glTF JSON結(jié)構(gòu)

3 3D Tiles簡(jiǎn)介

3.1 基本結(jié)構(gòu)

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

圖2 3D Tiles Tileset JSON結(jié)構(gòu)

3.2 HLOD模型

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

3D Tiles融合了HLOD模型，可根據(jù)空間數(shù)據(jù)的分布密度和覆蓋區(qū)域，采用相應(yīng)的空間分割方法進(jìn)行不同層次不同粒度的剖分，生成連續(xù)的HLOD模型[14]。在渲染大規(guī)模模型時(shí)，相對(duì)于靜態(tài)LOD能保持較好的細(xì)節(jié)，相對(duì)于動(dòng)態(tài)LOD能加快渲染的效率，基于視點(diǎn)動(dòng)態(tài)調(diào)度場(chǎng)景的HLOD模型，采用視錐剔除方法。隨著視點(diǎn)變化，選擇不同分辨率的HLOD模型進(jìn)行繪制，同時(shí)剔除不可見(jiàn)的節(jié)點(diǎn)[15]，能保持較好的全局和局部細(xì)節(jié)，提高場(chǎng)景渲染效率，提升視覺(jué)繪制效果。

瓦片數(shù)據(jù)的細(xì)化包括替換優(yōu)化和加法優(yōu)化兩種方法，其中替換優(yōu)化利用較高分辨率且精細(xì)的子節(jié)點(diǎn)模型代替低分辨率且粗糙的父節(jié)點(diǎn)模型，幾何誤差逐級(jí)減小，當(dāng)子節(jié)點(diǎn)平鋪時(shí)，父節(jié)點(diǎn)模型不再顯示，適用于大規(guī)模模型的加載；而加法優(yōu)化在父節(jié)點(diǎn)模型的基礎(chǔ)上，增加了其他相對(duì)次要的模型，在細(xì)化時(shí)同時(shí)渲染自身和子切片，不重復(fù)下載數(shù)據(jù)，子級(jí)可在渲染兄弟級(jí)之前呈現(xiàn)，適用于簡(jiǎn)單模型的加載。

4 實(shí)驗(yàn)驗(yàn)證

實(shí)驗(yàn)以3ds Max構(gòu)建的故宮模型為研究對(duì)象，將原始模型轉(zhuǎn)換為可供Web前端使用的glTF模型和3D Tiles模型，轉(zhuǎn)換流程如圖3所示。首先將模型導(dǎo)出為obj格式，并通過(guò)obj2gltf[16]轉(zhuǎn)換工具將模型轉(zhuǎn)換為glTF格式模型；再利用開(kāi)源工具對(duì)obj切片，得到3D Tiles格式模型；最后分別將得到的三維模型加載到構(gòu)建的三維場(chǎng)景中。

圖3 格式轉(zhuǎn)換流程圖

在Cesium中加載模型的關(guān)鍵代碼為；

‘構(gòu)建三維場(chǎng)景

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所示，可以看出，遠(yuǎn)距離顯示模型的整體，幀率為25 FPS；中距離顯示模型的部分細(xì)節(jié)，幀率為21 FPS；近距離顯示模型的全部細(xì)節(jié)，幀率為18 FPS。HLOD加載方式能使用戶(hù)根據(jù)場(chǎng)景需求自行決定選擇何種模型層級(jí)，能高效地在三維場(chǎng)景中渲染模型，實(shí)現(xiàn)流暢三維空間瀏覽。

圖4 故宮glTF模型

圖5 故宮3D Tiles模型

5 結(jié) 語(yǔ)

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