郭建雄，程朋根，2，晏啟明，許 敏

(1.東華理工大學(xué) 測繪工程學(xué)院，江西 南昌 330013；2. 廣西空間信息與測繪重點實驗室，廣西 桂林 541004；3.宜春市房地產(chǎn)管理局，江西 宜春 336000)

隨著計算機技術(shù)、通信技術(shù)以及數(shù)字地球技術(shù)日益成熟和發(fā)展，在Web2.0時代虛擬地球逐漸從客戶端向網(wǎng)頁端過渡。為了解決有限帶寬與日益增長的三維模型數(shù)據(jù)之間的矛盾，一個有效的漸進(jìn)傳輸可視化策略十分必要[1]。以Cesium為主的利用純Web端技術(shù)(包括WebGL，HTML，Java Script)開發(fā)的虛擬地球平臺，可以無插件、跨平臺地在網(wǎng)頁上展示三維復(fù)雜模型[2]。Cesium 支持 GLTF和 3D Tiles[3]兩種模型數(shù)據(jù)格式，實現(xiàn)單體化模型和海量三維模型數(shù)據(jù)的漸進(jìn)傳輸可視化，大大提升Web 端三維模型可視化的性能[4]。

隨著對象模型的復(fù)雜度增加，其模型描述通常由數(shù)萬或數(shù)億個三角面片組成。為了滿足計算機分析、顯示和存儲的要求，一種常見的解決方案是在不嚴(yán)重?fù)p失物體視覺特性的前提下，簡化對象的網(wǎng)格模型，用較少數(shù)量的面片表示模型。對象模型的不同簡化版本構(gòu)成細(xì)節(jié)層次(LOD模型)或多分辨率[5]。為了簡化三維模型，Schroeder[6]提出了一個平面準(zhǔn)則，即在局部范圍內(nèi)擬合一個平面，刪除小于指定精度的樣本點并重新三角化保留點。以這種方式，大量的小三角形被少量的大三角形代替，從而可以獲得不同復(fù)雜度級別的相同場景模型的三角形網(wǎng)格描述。類似地，Hamann[7]提出了曲率準(zhǔn)則，即刪除曲率小于制定誤差的點。Turk[8]提出一種基于網(wǎng)格重建的簡化多邊形模型方法，該方法將一組新的頂點分布到原始模型中，通過使用原始網(wǎng)格三角形的頂點的曲率和三角形的面積作為因子來確定新頂點的位置。國內(nèi)學(xué)術(shù)界也在模型簡化領(lǐng)域開展有效的研究工作。周坤和施家英等提出基于頂點聚類的三角網(wǎng)格折疊算法，使用八叉樹進(jìn)行網(wǎng)格自適應(yīng)劃分，該方法通過點到平面的距離來執(zhí)行誤差控制[9]。潘志庚和馬小虎提出了一種基于三角形刪除準(zhǔn)則的網(wǎng)格模型簡化方法，減少了計算量，具有較高的刪除率[10]。熊仕勇提出一種基于半邊折疊的LOD三維模型簡化算法[11]，較有效地解決了簡化后模型重要幾何特征不明顯的問題，實現(xiàn)三維模型的LOD層次構(gòu)建。然而這些方法未能結(jié)合模型具體特征結(jié)構(gòu)，對于具有特殊結(jié)構(gòu)和紋理細(xì)節(jié)的模型不能達(dá)到很好的簡化效果。

本文在邊折疊算法的基礎(chǔ)上結(jié)合模型結(jié)構(gòu)識別，提出基于結(jié)構(gòu)的邊折疊算法。結(jié)合該算法利用開源工具將通用格式的原始復(fù)雜三維模型簡化并轉(zhuǎn)換為不同分辨率的GLTF模型和3DTiles模型，利用漸進(jìn)式傳輸可視化技術(shù)在Cesium平臺進(jìn)行模型展示。

1 模型簡化方法

通常情況下三維模型由點、線和面基本元素構(gòu)成，因此三維模型簡化即是對模型點、線和面的基本操作。其中頂點刪除方式簡化的主要流程為：選中模型的一個頂點，計算它到其鄰面的距離，若距離小于指定的閾值則刪除，并重新三角化。該方法雖然占用計算資源較少，但因空洞問題，難以保持模型表面的光滑。邊折疊方法是目前較為廣泛應(yīng)用的簡化方式，其主要流程為：計算三維模型中所有邊的權(quán)值，刪除邊權(quán)值最小的邊，然后立即更新該局部區(qū)域的拓?fù)浣Y(jié)構(gòu)[12]。這類算法的幾何意義直觀，實現(xiàn)難度較小，因此是現(xiàn)階段研究的主流方向。面折疊算法和邊折疊算法類似，只是從刪除邊改為刪除面。因為面折疊算法減少的幾何元素數(shù)量是邊折疊的兩倍，所以簡化效率更高但是對模型的特征影響較大，因此簡化質(zhì)量不如邊折疊算法好。

一個模型往往由多個獨立的幾何體組合而成，每個幾何體可以單獨設(shè)置一個材質(zhì)(顏色、紋理)，以提高模型的視覺效果。三維模型根據(jù)幾何關(guān)系可分為主體結(jié)構(gòu)和細(xì)節(jié)結(jié)構(gòu)，主體結(jié)構(gòu)是指三維模型主要組成部分間的連接關(guān)系，為模型的整體框架和大體形象，細(xì)節(jié)結(jié)構(gòu)是指三維模型表面所有功能部件和結(jié)構(gòu)部件間的連接關(guān)系[13]。

本文提出基于結(jié)構(gòu)的邊折疊算法，主要思路為：首先，通過分析同材質(zhì)的三角面數(shù)量識別出模型的幾何主體結(jié)構(gòu)和細(xì)節(jié)結(jié)構(gòu)；其次，采取邊折疊算法對模型主體結(jié)構(gòu)進(jìn)行簡化、面折疊算法對模型細(xì)節(jié)結(jié)構(gòu)進(jìn)行簡化，以保證在大幅度提高模型簡化效率的同時達(dá)到主體結(jié)構(gòu)保持，細(xì)節(jié)結(jié)構(gòu)刪除的目標(biāo)。圖1為采用該方法得到的模型簡化對比圖，其中圖1(a)為原始模型，圖1(b) 為刪除小細(xì)節(jié)后的簡化模型，圖1(c) 為刪除大細(xì)節(jié)后的簡化模型。

2 三維復(fù)雜模型可視化

Cesium是國外一個基于Apache開源協(xié)議，基于JavaScript編寫的使用WebGL進(jìn)行硬件加速圖形化的地圖引擎?？蔁o插件、跨平臺、跨瀏覽器實現(xiàn)真正的動態(tài)數(shù)據(jù)可視化圖形繪制。Cesium加載三維模型有兩種格式：一種是針對單體化模型的GLTF；一種是針對海量數(shù)據(jù)的3DTiles格式。

2.1 GLTF

GLTF的全稱是GL傳輸格式，是一種針對GL(WebGL，OpenGL ES和OpenGL)接口的運行時資產(chǎn)(asset)。在3D內(nèi)容的傳輸和加載中，GLTF通過提供高效、可協(xié)作、易擴展的格式填補了3D建模工具和現(xiàn)代GL應(yīng)用程序之間的空白。使用GLTF的用戶可以使用現(xiàn)有工具來處理模型并減少模型中的數(shù)據(jù)量。圖2是 GLTF的一般結(jié)構(gòu)，分為4個大塊：頂部 json描述模型的節(jié)點級別、材質(zhì)、相機、動畫和其他相關(guān)的邏輯結(jié)構(gòu)；bin對應(yīng)于這些對象的具體數(shù)據(jù)信息；glsl是模型渲染的著色器；然后是紋理內(nèi)容。使用Base64編碼將大塊內(nèi)容移動到文件中，這樣便于復(fù)制和加載，也可用URI的外鏈方式，側(cè)重重用性。

圖2 GLTF結(jié)構(gòu)

加載GLTF模型有兩種方法：一種是Entity方法，將Model視作幾何體進(jìn)行加載，方法簡單效果單一；另一種是以Primitive的方式，它可設(shè)置多樣化屬性。Cesium對Model的渲染是基于狀態(tài)的更新，Model有3個狀態(tài)：加載(NEEDS_LOAD)、解析(LOADING)和結(jié)束(LOADED)。首先解析GLTF 的頭信息，也就是json對象(是否有動畫、數(shù)據(jù)視圖具體情況、是否有擴展屬性等)，了解該模型的大概結(jié)構(gòu)；其次是解析 GLTF數(shù)據(jù)，對每個結(jié)構(gòu)中的數(shù)據(jù)解析并賦值(頂點數(shù)據(jù)和索引、材料、紋理等，動畫，Runtime封裝到對應(yīng)的 RuntimeNode)，這是最復(fù)雜，也是最關(guān)鍵的過程之一；三是更新動態(tài)屬性，將其傳遞給相應(yīng)的著色器參數(shù)(動畫、骨骼等，更新相應(yīng)變量的節(jié)點矩陣，重新組合對應(yīng)節(jié)點級別的矩陣等)；最后，在徹底解析完數(shù)據(jù)之后，構(gòu)造一個相應(yīng)的繪圖命令(Drawcommand)并將其添加到渲染隊列中；如果數(shù)據(jù)包含一些時態(tài)數(shù)據(jù)，例如動畫、蒙皮等，則必須動態(tài)調(diào)整每一幀。這是更新(update)的主要4種狀態(tài)和邏輯，其過程如圖3所示。

圖3 GLTF渲染流程

2.2 3DTiles

3DTiles是Cesium在GLTF基礎(chǔ)上推出的Web環(huán)境下海量三維模型數(shù)據(jù)規(guī)范，在繼承GLTF優(yōu)點的同時添加漸進(jìn)LOD方法，也就是通過視距來調(diào)整場景復(fù)雜度，漸進(jìn)LOD不直接置換模型，而是隨著視點的靠近，不斷地在模型上補充細(xì)節(jié)。3DTiles將大數(shù)據(jù)量三維數(shù)據(jù)以分塊、分層的形式組織起來，可以大量減輕瀏覽器和GPU的負(fù)擔(dān)，是一個優(yōu)秀的，并且格式公開的數(shù)據(jù)格式。

3DTiles的渲染也基于狀態(tài)的，如圖4所示，可分為3個狀態(tài)層，其中細(xì)線(紫色)箭頭表示狀態(tài)變化。從LOADING(加載)狀態(tài)開始，通過一系列的request，完成最初的數(shù)據(jù)加載過程，結(jié)束LOADING狀態(tài)，進(jìn)入PROCESSING(預(yù)處理)狀態(tài)，也就是數(shù)據(jù)解析。數(shù)據(jù)解析完后進(jìn)入READY(準(zhǔn)備)狀態(tài)，通過selectTile，最終調(diào)用Content對應(yīng)的update方法，構(gòu)造最終的drawcommand，加入渲染隊列。當(dāng)然，如果有需要釋放的Tile，則在unloadTiles中處理。無論是json的解析還是構(gòu)造DrawCommand，都與GLTF相同，在update完成，只是所在狀態(tài)不同，如圖4中的粗線(紅色)箭頭指示。

利用obj2gltf、obj23dtiles開源工具結(jié)合基于結(jié)構(gòu)的邊收縮算法，對原始模型進(jìn)行簡化，并轉(zhuǎn)換為GLTF格式以及構(gòu)建3DTiles格式的多分辨率模型，然后通過Draco算法將其壓縮。

Draco是由谷歌Chrome 媒體團(tuán)隊設(shè)計，旨在大幅加速 3D 數(shù)據(jù)的編碼、傳輸和解碼，可以被用來壓縮 mesh和點云數(shù)據(jù)。它還支持壓縮點(compressing points)、連接信息、顏色信息、紋理協(xié)調(diào)、法線等其他與幾何相關(guān)的通用屬性。

最后使用Node.js進(jìn)行解析和發(fā)布，Node.js是一個基于Chrome JavaScript運行時的平臺，可以輕松構(gòu)建響應(yīng)迅速且易于擴展的Web應(yīng)用程序。Node.js輕量且高效，使用事件驅(qū)動的非阻塞I / O模型，非常適合在分布式設(shè)備上運行數(shù)據(jù)密集型實時應(yīng)用程序。通過html網(wǎng)頁就可在瀏覽器查看已發(fā)布的3D模型。

圖4 3DTiles渲染調(diào)度流程

3 實驗與分析

3.1 實驗數(shù)據(jù)與實驗流程

本實驗使用的模型數(shù)據(jù)為電力模型，電力模型與一般城市模型不同，具有單體模型數(shù)據(jù)量大、密度高等特點，單個桿塔模型的數(shù)據(jù)量可達(dá)到300 M以上，對Web三維平臺造成巨大壓力，因此如何對這種單體電力模型進(jìn)行優(yōu)化，提高其傳輸和渲染效率是有待解決的重點問題。本文通過兩個實驗來分析Web環(huán)境下三維復(fù)雜模型簡化與可視化方法，實驗環(huán)境配置如表1所示。整個系統(tǒng)技術(shù)架構(gòu)如圖5所示。

3.2 結(jié)果分析

首先利用3Dmax、Deep Exploration等工具將模型轉(zhuǎn)換為obj格式，使用自主開發(fā)的加入了基于結(jié)構(gòu)的邊折疊算法的模型轉(zhuǎn)化工具對模型進(jìn)行頂點優(yōu)化、合并同材質(zhì)幾何體、簡化細(xì)節(jié)等操作，結(jié)果如表2所示。

表1 實驗環(huán)境配置

通過obj2gltf數(shù)據(jù)轉(zhuǎn)換工具分別將原始模型SZ30101.obj和簡化模型SZ30101-low.obj轉(zhuǎn)換為精細(xì)模型SZ30101-high.gltf和簡化模型SZ30101-low.gltf。首先使用Cesium加載天地圖作為基礎(chǔ)場景，此時幀率為30～33 FPS。之后通過viewer.scene.primitives.add( Cesium.Model.fromGltf)方法分別加載1個、100個、200個、1 000個、2 000個GLTF模型查看幀率變化，可視化效果如圖6所示，幀率統(tǒng)計如表3所示。

圖5 技術(shù)架構(gòu)圖

表2 模型簡化對比

表3 模型加載幀率變化

由圖6、表3可以看出，隨著精細(xì)模型數(shù)量大量增加，幀率大幅度降低，在加至100個左右時瀏覽器已有明顯卡頓，模型數(shù)量增加至200個瀏覽器接近卡死；反觀簡化模型加載至1000個還有余力，可見在某些可忽視細(xì)節(jié)的情況下使用簡化模型能大大提高繪制效率。

使用viewer.scene.primitives.add(new Cesium.Cesium3Dtileset())方法加載3DTiles格式的多分辨率模型可視化效果如圖7所示。幀率統(tǒng)計結(jié)果如表4所示。

表4 幀率變化

由圖7、表4可以看出，近距離時加載LOD1，顯示全部細(xì)節(jié)，此時幀率為28FPS；中距離時加載LOD2，顯示部分細(xì)節(jié)，此時幀率為29FPS；遠(yuǎn)距離時加載LOD3，顯示模型整體，此時幀率為30FPS?？梢娎?DTiles形式加載電力桿塔模型，具有很好的LOD特性，可以隨著視距的變化增刪細(xì)節(jié)，減少不必要的渲染損耗，大大加快模型的渲染速度，減輕瀏覽器和GPU的負(fù)擔(dān)。

圖6 加載GLTF模型

圖7 加載3DTiles模型

4 結(jié) 論

本文利用開源工具采用基于結(jié)構(gòu)的邊折疊算法對復(fù)雜模型進(jìn)行簡化，并通過開發(fā)工具將dae、obj等通用格式模型數(shù)據(jù)轉(zhuǎn)換為GLTF格式和Cesium的3DTiles格式，實現(xiàn)模型數(shù)據(jù)LOD分層組織。利用優(yōu)秀的開源地圖引擎Cesium實現(xiàn)模型的加載和可視化，得到Web環(huán)境下精細(xì)模型和簡化模型的加載效率，最后使用Cesium加載3DTiles方式完成Web環(huán)境下三維復(fù)雜模型的漸進(jìn)式LOD可視化方案。通過兩個對比實例進(jìn)行實驗結(jié)果顯示，將模型簡化算法與Draco模型壓縮編碼算法相結(jié)合，并采用流技術(shù)進(jìn)行數(shù)據(jù)傳輸，使用漸進(jìn)式LOD加載3DTiles進(jìn)行模型可視化，能夠大大優(yōu)化模型數(shù)據(jù)、減少簡化結(jié)果的數(shù)據(jù)量、提高網(wǎng)絡(luò)傳輸效率和渲染效率。本方案具有操作簡單、支持?jǐn)?shù)據(jù)格式多、可視化效果好等特點，可作為構(gòu)建Web三維系統(tǒng)的技術(shù)之一，提高三維復(fù)雜模型的使用率，使三維復(fù)雜模型在建設(shè)、規(guī)劃、國土、測繪等部門中發(fā)揮更大作用。