基于WebGL的石油化工模型渲染和優化

謝曉(北京華油信通科技有限公司，北京 100000)

0 引言

石油化工行業是國民經濟建設的基礎，基于WebGL的石油化工三維模型的建設[1]，可將石油行業的各種三維設計模型數據、屬性數據進行高度融合，實現可視化和多維表達[2]。由于石油化工模型特有特性，存在大量重復性部件進行建模，造成大量的模型建模工作。為實現大型煉化裝置模型中，局部小量模型裝置重復的部件渲染，降低這些小型的模型裝置因重復渲染而造成的系統資源性能占用，從而導致石油煉化模型裝置的剩余部分裝置分布不到足夠的處理資源，勢必導致石油化工模型的三維面量過大而導致的模型加載效率緩慢，迫切需要采用新的建模技術進行石油化工模型結構化建模。

伴隨著WebGis模型渲染處理技術的逐步發展，地理信息化展現的方式也逐步由二維轉向三維，想要在三維WebGis系統前端中快速有效的渲染顯示模型數據[3]，成為目前三維空間GIS數據可視化的研究重要方向。目前對于石油化工模型的渲染和優化技術的研究主要依托比較成熟的WebGL框架展開，主要依托瀏覽器把3D實體展示在網頁上，具體強大的擴展性，其中內置的部分三維空間算法受到廣泛使用。基于WebGL，主要采用LOD分層級技術、幾何體實例化模型渲染等技術進行模型的渲染優化，極大提高了石油化工模型的加載效率和渲染效果。

1 WebGL概述

WebGL(web graphics library)是一種3D繪圖協議，允許把JavaScript和OpenGL ES 2.0結合在一起，同時又可以為HTML5 Canvas提供硬件3D加速渲染，無需插件，通過此項技術，Web開發人員就能借助系統顯卡實現在瀏覽器里3D場景模型流程的展示。WebGL通過調動GPU進行硬件加速顯示模型，基于WebGL的3D圖形引擎主要有Three.JS、Babylon.JS、PlayCanvas、Cesium四種圖形引擎[4]。WebGL通過進行硬件的渲染加速，使得圖形渲染性能提高。在模型渲染引擎中，Three.JS偏向全面的模型展示，在小場景應用中有不錯的性能，Babylon.JS，PlayCanvas偏向游戲制作，Cesium在大尺寸下的GIS應用中優勢明顯。

基于WebGL的應用程序在傳統Web應用的基礎，免去了開發網頁專用渲染插件的麻煩，可快速實現Web環境下的三維模型可視化渲染處理及優化[5]。

2 WebGL環境下模型渲染優化技術分析

2.1 基于LOD分層技術的模型數據優化分析

了解決石油化工設計三維模型數據的實時可視化問題，建立了三維場景LOD可視化引擎，結合基于視點相關的LOD層次模型技術[6]，對原模型數據完成分層處理優化，從而來減少原模型數據的數量，在通過對模型數據的渲染，完成每個LOD數據層的顯示，以減少模型數據的渲染率，實現了對大型裝置海量三維模型數據的有效管理及處置。同時，在保障三維模型部件清晰展示的前提下，采用該技術可對復雜的三維模型數據行之有效的簡化，提高了大型石油煉化模型數據的顯示效率，提升了可視化展示效果。通過采用上述方法，實現了對海量石油化工三維模型數據快速漫游。為了提高真實感，在數據上疊加了用同樣方式處理和調度的圖片紋理，利用四叉樹，分割算法實現了三維模型數據的實時動態顯示，在有效簡化石油化工組件三維模型數據基礎之上，保證石油化工模型渲染效果不會明顯減弱，生成的三維模型能夠達到20到30幀的速度，基本滿足石油化工模型實時瀏覽要求。

2.2 參數化解析技術研究分析

參數化解析技術采用基于組件的參數化方法為石油石化設計模型中各類部件數據建模方式，在加載、顯示石油化工模型部件時進行動態建模，對于石油化工模型參數數據，可快速生成預期石油化工模型，徹底解決了海量設計模型頂點存儲，數據量大，渲染效率慢的問題。實現了場景圖與渲染對象的分離，第三方開發者可以編寫場景管理器來實現石油化工設計場景圖以及部分組件模型調度而不必重寫渲染對象。異構三維圖形庫統一渲染引擎對不同的底層石油化工組件圖形庫采用抽象工廠設計模式進行統一抽象，應用層以統一的接口對底層圖形庫進行訪問，無需關心底層實現，當底層圖形庫的版本發生變化時只需修改或重新相關的具體實現即可，對上層應用不會產生影響。

石油石化模型部件的三維實體均采用參數化建模方式實現，三維場景中，組件信息都是以三角面方式存儲的，這種方式存儲數據量巨大，而參數化存儲，是以用戶輸入的參數為起點，經過程序內部邏輯的分析處理，最終生成模型對象的過程。同時可運行多種瀏覽器，可同時拓展，與操作系統無關性的特點，基于WebGL的石油化工模型出了運行正在Windows平臺外，也可運行在Linux系統、及Android、IOS移動操作系統。

2.3 基于E3M技術的動態渲染技術研究分析

石油化工模型數據格式目前支持E3M格式，在模型渲染及優化設計過程中，E3M格式它可減少石油化工模型中與渲染無關的冗余內容，并且充分支持OpenGL，WebGL圖形加速標準，具有利于網絡傳輸的特性，而廣泛適用于在互聯網和移動設備上展現三維模型。它采用頂點壓縮、紋理壓縮以及混合壓縮使數據體量更小。不可否認的是在由于大模型渲染批次較多我們在原來的基礎上支持b3dm內部復用進而減少渲染批次提升渲染效率，并新增點選功能、屬性設置、獲取層級樹、部件定位功能。其中對于E3M模型瓦片格式更加適應互聯網傳輸及Web運行環境，極大提高了石油化工模型的渲染及優化效率。

2.4 基于幾何體實例化的渲染技術研究分析

針對石油石化模型固有特性，存在大量重復性部件，若每個部件都有實體，將占用大量存儲空間，因此有必要采用幾何實例化進行模型建模[7]。基于幾何實例的模型優化技術是一種用于大批量重復模型部件渲染的GPU技術[8]，通過降低客戶端和顯卡傳輸數據量的方式來提高模型渲染和優化的加載效率。

針對GPU渲染加速的特點，可實現同時渲染多個三維模型數據相同的部件時發揮作用，在石油石化煉化裝置設計中，有多個組件是重復構造，只是在顏色、位置方向上存在稍許的差異，可通過模型數據在不同的空間位置、紋理及顏色上進行區分，從而創造出各個不同的煉化裝置實例部件，包括煉化、催化等裝置模型中閥門、管道、油罐相同的部件構造等。它能夠實現只需構造出一個單體模型部件，就可以通過相同的渲染處理方式，實現多個模型部件結構的復制使用。通過解析RVM，采用幾何體實例模型渲染復用方法，分批次對模型部件進行拼接，這樣建模出的石油化工設計三維模型體量小，從而提高石油化工模型的渲染效率。

2.5 煉化廠三維模型渲染優化驗證分析

為保障基于WebGL的石油石化模型數據渲染技術效果可行性的驗證[9]，著重進行了石油化工煉化廠三維模型的設計并進行三維模型系統研發并進行了渲染優化效果對比分析實驗。

3 模型試驗環境

煉化廠三維模型的加載渲染效果測試需要支持WebGL的瀏覽器GoogleChrome9+來運行石油化工模型應用。由于石油化工模型的渲染效果測試對Web服務器的要求并不高，只要能響應HTML頁面和其他文件的請求，有必要通過WebStorm開發三維圖形應用對3D圖形庫進行模型加載渲染效果測試。因此，本實驗以谷歌瀏覽器作為三維圖形應用和3D圖形庫運行環境[10]。

石油化工煉化廠三維模型渲染流程中各個環節表述如下：

(1)模型頂點處理 對頂點數據傳進來的每一個頂點，實現頂點的空間變化，將頂點數據組合成線段或三角形圖元。裁剪和剔除不在相機范圍內的視錐體圖元，得到相機視錐體內的圖元集合。這些信息可以通過對三個頂點進行插值得到的。煉化廠三維模型處理會針對圖元進行顏色計算、陰影計算和紋理映射等操作，并通過線性插值的方法得到像素點顏色值，從而輸出像素數據。煉化廠三維模型優化在網頁端上渲染煉化廠三維模型，使用WebGL技術在網頁端上渲染大規模的石油化工模型[11]，對比在客戶端上使用OpenGL渲染大規模的三維模型限制更大[12]，需要針對模型數據和渲染方式進行對應的優化。在對煉化廠三維模型進行優化時，著重從模型物體實例化進行繪制、模型非實時刷新渲染優化、模型分類別渲染優化、網格合并渲染優化四個環節。

(2)模型物體實例化進行繪制 該繪制方式的接口為DrawArraysInstanced。其參數有渲染方式Mode、初始偏移量First、圖元的索引數量Count、實例化繪制圖元的數量InstanceCount。除了以上參數外，要使用實例化繪制網格傳入每個網格變換矩陣。

(3)模型非實時刷新渲染優化 在當前構建石油化工模型WebGL煉化裝置過程中[13]，任何一個部件的裝置渲染處理，都會導致前端展示的效果，因為采用的均為實時刷新渲染方式，基于在靜態模型裝置的情況下查看其他部件時，避免了其他加載的模型數據共同刷新渲染，從而實現了所在視角范圍內的石油模型數據非實時畫面的渲染刷新。

(4)模型分類別渲染優化 在瀏覽石油化工模型的過程中，基于三維模型進行定位并移動到瀏覽人員關心的視角方向上。因此視角轉動時僅渲染石油化工部分組件模型，當視角轉動停止時才渲染整體的石油化工模型。

(5)網格合并渲染優化 在經石油化工模型物體實例化繪制渲染、模型非實時刷新渲染和模型分類別渲染后，大規模石油化工模型實時渲染的網格對象數量依然很大，通過將材質參數相同的網格對象合并渲染的方式，降低實時渲染時的網格對象的數量，達到減少渲染流水線調用次數，提升渲染效果。

建模工程師對煉化廠三維模型開展了渲染處理優化實驗。得出加載效果有了較為明顯的提高。原始煉化廠區三維模型渲染線段數為3 142，每秒渲染幀數(FPS)為30，當視點拉遠，優化后渲染矢量線段數為1 218，FPS為60，渲染速度提升了將近一倍。具體局部場景視角轉動6 s的單幀渲染時間優化效果如表1所示。

表1 煉化廠三維模型局部場景視角轉動6 s的單幀渲染時間

4 結語

文章針對現有石油化工模型的建模特性在渲染速度與渲染效果方面存在明顯不足的問題，對基于WebGL三維設計模型渲染技術以及優化效果進行研究并進行建模實例驗證，利用LOD分層技術、參數化解析等先進的模型渲染優化設計技術，構建石油化工煉化廠三維模型，實現三維模型進行部件模型批量構建以及動態化建模、模型數據計算對接，提升了石油化工模型渲染速度，為后期該領域的三維模型渲染優化提供了技術指點，進一步提高了石油化工模型建模效率和水平。