基于WebGL的石油化工模型渲染和優(yōu)化

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

0 引言

石油化工行業(yè)是國(guó)民經(jīng)濟(jì)建設(shè)的基礎(chǔ)，基于WebGL的石油化工三維模型的建設(shè)[1]，可將石油行業(yè)的各種三維設(shè)計(jì)模型數(shù)據(jù)、屬性數(shù)據(jù)進(jìn)行高度融合，實(shí)現(xiàn)可視化和多維表達(dá)[2]。由于石油化工模型特有特性，存在大量重復(fù)性部件進(jìn)行建模，造成大量的模型建模工作。為實(shí)現(xiàn)大型煉化裝置模型中，局部小量模型裝置重復(fù)的部件渲染，降低這些小型的模型裝置因重復(fù)渲染而造成的系統(tǒng)資源性能占用，從而導(dǎo)致石油煉化模型裝置的剩余部分裝置分布不到足夠的處理資源，勢(shì)必導(dǎo)致石油化工模型的三維面量過(guò)大而導(dǎo)致的模型加載效率緩慢，迫切需要采用新的建模技術(shù)進(jìn)行石油化工模型結(jié)構(gòu)化建模。

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

1 WebGL概述

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

基于WebGL的應(yīng)用程序在傳統(tǒng)Web應(yīng)用的基礎(chǔ)，免去了開(kāi)發(fā)網(wǎng)頁(yè)專用渲染插件的麻煩，可快速實(shí)現(xiàn)Web環(huán)境下的三維模型可視化渲染處理及優(yōu)化[5]。

2 WebGL環(huán)境下模型渲染優(yōu)化技術(shù)分析

2.1 基于LOD分層技術(shù)的模型數(shù)據(jù)優(yōu)化分析

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

2.2 參數(shù)化解析技術(shù)研究分析

參數(shù)化解析技術(shù)采用基于組件的參數(shù)化方法為石油石化設(shè)計(jì)模型中各類部件數(shù)據(jù)建模方式，在加載、顯示石油化工模型部件時(shí)進(jìn)行動(dòng)態(tài)建模，對(duì)于石油化工模型參數(shù)數(shù)據(jù)，可快速生成預(yù)期石油化工模型，徹底解決了海量設(shè)計(jì)模型頂點(diǎn)存儲(chǔ)，數(shù)據(jù)量大，渲染效率慢的問(wèn)題。實(shí)現(xiàn)了場(chǎng)景圖與渲染對(duì)象的分離，第三方開(kāi)發(fā)者可以編寫(xiě)場(chǎng)景管理器來(lái)實(shí)現(xiàn)石油化工設(shè)計(jì)場(chǎng)景圖以及部分組件模型調(diào)度而不必重寫(xiě)渲染對(duì)象。異構(gòu)三維圖形庫(kù)統(tǒng)一渲染引擎對(duì)不同的底層石油化工組件圖形庫(kù)采用抽象工廠設(shè)計(jì)模式進(jìn)行統(tǒng)一抽象，應(yīng)用層以統(tǒng)一的接口對(duì)底層圖形庫(kù)進(jìn)行訪問(wèn)，無(wú)需關(guān)心底層實(shí)現(xiàn)，當(dāng)?shù)讓訄D形庫(kù)的版本發(fā)生變化時(shí)只需修改或重新相關(guān)的具體實(shí)現(xiàn)即可，對(duì)上層應(yīng)用不會(huì)產(chǎn)生影響。

石油石化模型部件的三維實(shí)體均采用參數(shù)化建模方式實(shí)現(xiàn)，三維場(chǎng)景中，組件信息都是以三角面方式存儲(chǔ)的，這種方式存儲(chǔ)數(shù)據(jù)量巨大，而參數(shù)化存儲(chǔ)，是以用戶輸入的參數(shù)為起點(diǎn)，經(jīng)過(guò)程序內(nèi)部邏輯的分析處理，最終生成模型對(duì)象的過(guò)程。同時(shí)可運(yùn)行多種瀏覽器，可同時(shí)拓展，與操作系統(tǒng)無(wú)關(guān)性的特點(diǎn)，基于WebGL的石油化工模型出了運(yùn)行正在Windows平臺(tái)外，也可運(yùn)行在Linux系統(tǒng)、及Android、IOS移動(dòng)操作系統(tǒng)。

2.3 基于E3M技術(shù)的動(dòng)態(tài)渲染技術(shù)研究分析

石油化工模型數(shù)據(jù)格式目前支持E3M格式，在模型渲染及優(yōu)化設(shè)計(jì)過(guò)程中，E3M格式它可減少石油化工模型中與渲染無(wú)關(guān)的冗余內(nèi)容，并且充分支持OpenGL，WebGL圖形加速標(biāo)準(zhǔn)，具有利于網(wǎng)絡(luò)傳輸?shù)奶匦?，而廣泛適用于在互聯(lián)網(wǎng)和移動(dòng)設(shè)備上展現(xiàn)三維模型。它采用頂點(diǎn)壓縮、紋理壓縮以及混合壓縮使數(shù)據(jù)體量更小。不可否認(rèn)的是在由于大模型渲染批次較多我們?cè)谠瓉?lái)的基礎(chǔ)上支持b3dm內(nèi)部復(fù)用進(jìn)而減少渲染批次提升渲染效率，并新增點(diǎn)選功能、屬性設(shè)置、獲取層級(jí)樹(shù)、部件定位功能。其中對(duì)于E3M模型瓦片格式更加適應(yīng)互聯(lián)網(wǎng)傳輸及Web運(yùn)行環(huán)境，極大提高了石油化工模型的渲染及優(yōu)化效率。

2.4 基于幾何體實(shí)例化的渲染技術(shù)研究分析

針對(duì)石油石化模型固有特性，存在大量重復(fù)性部件，若每個(gè)部件都有實(shí)體，將占用大量存儲(chǔ)空間，因此有必要采用幾何實(shí)例化進(jìn)行模型建模[7]?；趲缀螌?shí)例的模型優(yōu)化技術(shù)是一種用于大批量重復(fù)模型部件渲染的GPU技術(shù)[8]，通過(guò)降低客戶端和顯卡傳輸數(shù)據(jù)量的方式來(lái)提高模型渲染和優(yōu)化的加載效率。

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

2.5 煉化廠三維模型渲染優(yōu)化驗(yàn)證分析

為保障基于WebGL的石油石化模型數(shù)據(jù)渲染技術(shù)效果可行性的驗(yàn)證[9]，著重進(jìn)行了石油化工煉化廠三維模型的設(shè)計(jì)并進(jìn)行三維模型系統(tǒng)研發(fā)并進(jìn)行了渲染優(yōu)化效果對(duì)比分析實(shí)驗(yàn)。

3 模型試驗(yàn)環(huán)境

煉化廠三維模型的加載渲染效果測(cè)試需要支持WebGL的瀏覽器GoogleChrome9+來(lái)運(yùn)行石油化工模型應(yīng)用。由于石油化工模型的渲染效果測(cè)試對(duì)Web服務(wù)器的要求并不高，只要能響應(yīng)HTML頁(yè)面和其他文件的請(qǐng)求，有必要通過(guò)WebStorm開(kāi)發(fā)三維圖形應(yīng)用對(duì)3D圖形庫(kù)進(jìn)行模型加載渲染效果測(cè)試。因此，本實(shí)驗(yàn)以谷歌瀏覽器作為三維圖形應(yīng)用和3D圖形庫(kù)運(yùn)行環(huán)境[10]。

石油化工煉化廠三維模型渲染流程中各個(gè)環(huán)節(jié)表述如下：

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

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

(3)模型非實(shí)時(shí)刷新渲染優(yōu)化 在當(dāng)前構(gòu)建石油化工模型WebGL煉化裝置過(guò)程中[13]，任何一個(gè)部件的裝置渲染處理，都會(huì)導(dǎo)致前端展示的效果，因?yàn)椴捎玫木鶠閷?shí)時(shí)刷新渲染方式，基于在靜態(tài)模型裝置的情況下查看其他部件時(shí)，避免了其他加載的模型數(shù)據(jù)共同刷新渲染，從而實(shí)現(xiàn)了所在視角范圍內(nèi)的石油模型數(shù)據(jù)非實(shí)時(shí)畫(huà)面的渲染刷新。

(4)模型分類別渲染優(yōu)化 在瀏覽石油化工模型的過(guò)程中，基于三維模型進(jìn)行定位并移動(dòng)到瀏覽人員關(guān)心的視角方向上。因此視角轉(zhuǎn)動(dòng)時(shí)僅渲染石油化工部分組件模型，當(dāng)視角轉(zhuǎn)動(dòng)停止時(shí)才渲染整體的石油化工模型。

(5)網(wǎng)格合并渲染優(yōu)化 在經(jīng)石油化工模型物體實(shí)例化繪制渲染、模型非實(shí)時(shí)刷新渲染和模型分類別渲染后，大規(guī)模石油化工模型實(shí)時(shí)渲染的網(wǎng)格對(duì)象數(shù)量依然很大，通過(guò)將材質(zhì)參數(shù)相同的網(wǎng)格對(duì)象合并渲染的方式，降低實(shí)時(shí)渲染時(shí)的網(wǎng)格對(duì)象的數(shù)量，達(dá)到減少渲染流水線調(diào)用次數(shù)，提升渲染效果。

建模工程師對(duì)煉化廠三維模型開(kāi)展了渲染處理優(yōu)化實(shí)驗(yàn)。得出加載效果有了較為明顯的提高。原始煉化廠區(qū)三維模型渲染線段數(shù)為3 142，每秒渲染幀數(shù)(FPS)為30，當(dāng)視點(diǎn)拉遠(yuǎn)，優(yōu)化后渲染矢量線段數(shù)為1 218，F(xiàn)PS為60，渲染速度提升了將近一倍。具體局部場(chǎng)景視角轉(zhuǎn)動(dòng)6 s的單幀渲染時(shí)間優(yōu)化效果如表1所示。

表1 煉化廠三維模型局部場(chǎng)景視角轉(zhuǎn)動(dòng)6 s的單幀渲染時(shí)間

4 結(jié)語(yǔ)

文章針對(duì)現(xiàn)有石油化工模型的建模特性在渲染速度與渲染效果方面存在明顯不足的問(wèn)題，對(duì)基于WebGL三維設(shè)計(jì)模型渲染技術(shù)以及優(yōu)化效果進(jìn)行研究并進(jìn)行建模實(shí)例驗(yàn)證，利用LOD分層技術(shù)、參數(shù)化解析等先進(jìn)的模型渲染優(yōu)化設(shè)計(jì)技術(shù)，構(gòu)建石油化工煉化廠三維模型，實(shí)現(xiàn)三維模型進(jìn)行部件模型批量構(gòu)建以及動(dòng)態(tài)化建模、模型數(shù)據(jù)計(jì)算對(duì)接，提升了石油化工模型渲染速度，為后期該領(lǐng)域的三維模型渲染優(yōu)化提供了技術(shù)指點(diǎn)，進(jìn)一步提高了石油化工模型建模效率和水平。