Web環境下三維復雜模型的簡化與可視化方法研究

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

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

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

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

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

1 模型簡化方法

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

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

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

2 三維復雜模型可視化

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

2.1 GLTF

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

圖2 GLTF結構

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

圖3 GLTF渲染流程

2.2 3DTiles

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

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

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

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

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

圖4 3DTiles渲染調度流程

3 實驗與分析

3.1 實驗數據與實驗流程

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

3.2 結果分析

首先利用3Dmax、Deep Exploration等工具將模型轉換為obj格式，使用自主開發的加入了基于結構的邊折疊算法的模型轉化工具對模型進行頂點優化、合并同材質幾何體、簡化細節等操作，結果如表2所示。

表1 實驗環境配置

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

圖5 技術架構圖

表2 模型簡化對比

表3 模型加載幀率變化

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

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

表4 幀率變化

由圖7、表4可以看出，近距離時加載LOD1，顯示全部細節，此時幀率為28FPS；中距離時加載LOD2，顯示部分細節，此時幀率為29FPS；遠距離時加載LOD3，顯示模型整體，此時幀率為30FPS。可見利用3DTiles形式加載電力桿塔模型，具有很好的LOD特性，可以隨著視距的變化增刪細節，減少不必要的渲染損耗，大大加快模型的渲染速度，減輕瀏覽器和GPU的負擔。

圖6 加載GLTF模型

圖7 加載3DTiles模型

4 結 論

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