基于WebGL的勘探地形及探井信息三維可視化系統(tǒng)設(shè)計(jì)

譚傜月，張余強(qiáng)，何小海，卿粼波，陳岑

（1.四川大學(xué)電子信息學(xué)院，成都610065；2.成都西圖科技有限公司，成都610065；3.浙江大華技術(shù)股份有限公司，杭州310053）

0 引言

勘探生產(chǎn)信息是油田開(kāi)發(fā)中重要的數(shù)據(jù)資源，包括生產(chǎn)統(tǒng)計(jì)信息、探井結(jié)構(gòu)信息和地理信息數(shù)據(jù)等，傳統(tǒng)的數(shù)字油田信息平臺(tái)只是將勘探數(shù)據(jù)進(jìn)行圖表管理與二維GIS展示[1]，對(duì)三維空間特征表現(xiàn)不足。一些新型的油田空間數(shù)據(jù)可視化項(xiàng)目，需要依賴于ArcGIS或自主研發(fā)的專業(yè)軟件[2-3]，利用插件進(jìn)行開(kāi)發(fā)、跨平臺(tái)兼容性差。

隨著HTML5及WebGL技術(shù)的普及，瀏覽器端的三維空間數(shù)據(jù)可視化有了新的解決方案[4]。WebGL是基于OpenGL ES2.0的Web 3D繪圖標(biāo)準(zhǔn)，用于在支持HTML5的瀏覽器中實(shí)現(xiàn)2D和3D圖形繪制，并提供硬件3D加速渲染[5]，可以在無(wú)插件的情況下大幅度提升瀏覽器對(duì)三維圖形的繪制效率。Three.js是一個(gè)基于WebGL的3D建模圖形庫(kù)，它對(duì)WebGL錯(cuò)綜復(fù)雜的底層進(jìn)行了封裝和簡(jiǎn)化，提供了豐富的圖形對(duì)象和場(chǎng)景模擬組件，可以在Web端流暢地展示交互式的三維場(chǎng)景和模型[6]，因其簡(jiǎn)單易用、可擴(kuò)展性強(qiáng)而被廣泛使用。因此，本文在二維WebGIS的基礎(chǔ)上，選擇Three.js作為三維可視化工具，研究了基于WebGL的地形和探井分層信息三維可視化技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)集二維GIS、三維建模與傳統(tǒng)勘探信息為一體的Web可視化應(yīng)用系統(tǒng)，具有跨平臺(tái)、無(wú)插件、美觀易用的特點(diǎn)，有利于提高相關(guān)業(yè)務(wù)人員的工作效率。

1 系統(tǒng)功能設(shè)計(jì)

系統(tǒng)基于WebGIS和WebGL技術(shù)，使用SRTM 90M數(shù)字高程數(shù)據(jù)和勘探數(shù)據(jù)信息，實(shí)現(xiàn)了二維GIS、三維地形及探井建模展示，系統(tǒng)功能模塊如圖1所示。

圖1系統(tǒng)功能模塊圖

二維GIS模塊，首先從Google地圖服務(wù)器中在線加載所視區(qū)域內(nèi)的地圖瓦片數(shù)據(jù)，通過(guò)OpenLayers開(kāi)源地圖引擎進(jìn)行二維地圖初始化；接著通過(guò)WebGIS接口獲取勘探生產(chǎn)信息，從其中提取探井坐標(biāo)并在地圖對(duì)應(yīng)位置添加探井圖標(biāo)圖層，用戶通過(guò)點(diǎn)選或圈選一定范圍的地物目標(biāo)后進(jìn)行空間數(shù)據(jù)查詢及三維建模。

三維建模模塊，首先進(jìn)行場(chǎng)景、相機(jī)、光線等三維場(chǎng)景初始化設(shè)置，同時(shí)對(duì)查詢返回的地形和探井?dāng)?shù)據(jù)進(jìn)行處理和建模；對(duì)獲取到的高程數(shù)據(jù)下采樣生成多層地形Mesh對(duì)象并加入LOD模型，并根據(jù)需求進(jìn)行空間插值，接著生成等高線貼圖并更新Mesh對(duì)象材質(zhì)；對(duì)獲取的探井?dāng)?shù)據(jù)，根據(jù)分層信息生成圓柱體對(duì)象，接著綁定與其他二維圖表統(tǒng)計(jì)信息的交互操作，最后將其加入場(chǎng)景進(jìn)行渲染。本文主要研究重點(diǎn)為三維建模模塊，相關(guān)算法與實(shí)現(xiàn)將在后續(xù)章節(jié)進(jìn)行詳細(xì)說(shuō)明。

2 關(guān)鍵模塊設(shè)計(jì)及實(shí)現(xiàn)

2.1 基于移動(dòng)窗口反距離權(quán)重法的DEM空間插值

數(shù)字高程模型（Digital Elevation Model，DEM），是地表地形的數(shù)字化表現(xiàn)形式，本文提前下載SRTM 90M分辨率的DEM柵格數(shù)據(jù)作為地形建模數(shù)據(jù)源，進(jìn)行拼接及轉(zhuǎn)換后輸出柵格化的XYZ格式點(diǎn)云數(shù)據(jù)以供后續(xù)查詢使用。由于DEM數(shù)據(jù)精度有限，生成的地形模型在地勢(shì)陡峭的區(qū)域刻畫(huà)不夠豐富，因此本文對(duì)小范圍內(nèi)地形變化大的區(qū)域內(nèi)空缺的高程點(diǎn)進(jìn)行空間插值。

DEM空間插值指的是根據(jù)已有區(qū)域高程值預(yù)測(cè)空缺單元的高程值，主要分為整體函數(shù)內(nèi)插和局部函數(shù)內(nèi)插兩大類，整體插值法一般用于預(yù)測(cè)區(qū)域內(nèi)的整體趨勢(shì)，局部插值法則使用鄰近數(shù)據(jù)點(diǎn)來(lái)預(yù)測(cè)空缺單元數(shù)值，常用的局部空間插值算法有反距離權(quán)重法（IDW）、克里金法（Kriging）、自然鄰域法（NNI）等[7]。綜合網(wǎng)格數(shù)據(jù)等距特點(diǎn)和局部地形精細(xì)化的需求，本文選用了簡(jiǎn)單高效的移動(dòng)窗口反距離權(quán)重法，該方法假設(shè)空間對(duì)象的特征是空間相關(guān)的，且與空間距離存在明顯關(guān)聯(lián)。該方法將距離平方的倒數(shù)作為權(quán)重值，對(duì)空缺點(diǎn)周圍多個(gè)鄰點(diǎn)的高程值進(jìn)行加權(quán)平均，樣本點(diǎn)到預(yù)測(cè)點(diǎn)的距離越近則對(duì)預(yù)測(cè)結(jié)果影響越大，適用于小范圍的空間插值預(yù)測(cè)[8]。

式（1）中ZP表示預(yù)測(cè)點(diǎn)P的高程值，Zi表示單元內(nèi)鄰點(diǎn)高程值，wi表示權(quán)重，式（2）為權(quán)重的計(jì)算過(guò)程，一般為兩點(diǎn)間距離平方的倒數(shù)即冪參數(shù)k為2?？紤]到選點(diǎn)的合理性及計(jì)算性能，所選點(diǎn)與待測(cè)點(diǎn)距離不宜過(guò)遠(yuǎn)，一般選擇待測(cè)點(diǎn)周圍3×3或5×5的窗口進(jìn)行插值。因本文所用DEM網(wǎng)格數(shù)據(jù)等距排列特性，可以提前計(jì)算窗口內(nèi)各單元權(quán)重值，減少插值運(yùn)算量，未知點(diǎn)窗口及權(quán)重分布如圖2所示。

圖2未知點(diǎn)窗口及權(quán)重分布圖

在實(shí)際插值過(guò)程中，本文選用3×3的窗口，從矩陣左上角水平移動(dòng)窗口，依次進(jìn)行空缺單元的高程值預(yù)測(cè)，最后將插值后的地形對(duì)象加入LOD模型中進(jìn)行渲染，以期在保證渲染性能和響應(yīng)速度的同時(shí)，盡可能展示更多地形細(xì)節(jié)。

2.2 基于Marching Squares算法的等高線貼圖生成S

為了模擬真實(shí)地貌特征，需要進(jìn)行地表紋理貼圖，等高線作為地表形態(tài)的主要表現(xiàn)形式，在地形模擬領(lǐng)域有著不可替代的優(yōu)越性，因此引入等高線對(duì)地形特征進(jìn)行進(jìn)一步的表示。常用的等值線生成算法分為規(guī)則矩形網(wǎng)格提取法和不規(guī)則三角網(wǎng)格提取法兩種，鑒于前文所述DEM數(shù)據(jù)特點(diǎn)，本文選擇基于規(guī)則網(wǎng)格數(shù)據(jù)的Marching Squares算法進(jìn)行等高線的提取和繪制。Marching Squares是一種從二維矩陣數(shù)據(jù)生成輪廓的圖形繪制算法，其生成的輪廓可以分為Isolines（等值線）和Isobands（等值帶）兩種，該算法典型應(yīng)用于地形圖等高線和天氣圖等壓線的生成[9]。由于等值帶計(jì)算復(fù)雜、渲染速度慢，因此本文采用Marching Squares算法快速繪制所選區(qū)域內(nèi)的地形等高線，具體算法步驟如下：

（1）對(duì)于每個(gè)2×2像素形成的網(wǎng)格單元，分布判斷其4個(gè)頂點(diǎn)的高程值與等高線閾值的大小，0表示低于閾值，1表示高于閾值，遍歷矩陣網(wǎng)格單元，輸出二值化的網(wǎng)格數(shù)據(jù)。

（2）現(xiàn)在每個(gè)頂點(diǎn)有0/1兩種狀態(tài)，對(duì)于每個(gè)網(wǎng)格單元，順時(shí)針?lè)较蚶@單元格記錄頂點(diǎn)數(shù)值生成4位二進(jìn)制碼即查詢索引，每個(gè)單元格有24種可能狀態(tài)。使用查詢索引訪問(wèn)預(yù)先構(gòu)建的查找表，得到對(duì)應(yīng)索引值下的輪廓線的繪制方法，如圖3所示，其中黑色圓點(diǎn)表示狀態(tài)1，藍(lán)色線段表示該索引值對(duì)應(yīng)的劃線方式。

圖3查找表示意圖

（3）第二步中只是粗略地選擇邊緣中點(diǎn)進(jìn)行劃線，現(xiàn)結(jié)合原始頂點(diǎn)值和等高線閾值沿單元邊緣進(jìn)行線性插值，修正劃線位置得到更精確的輪廓線位置。

得到區(qū)域內(nèi)的地形數(shù)據(jù)后，對(duì)高程值范圍進(jìn)行分組得到多個(gè)閾值，對(duì)每個(gè)閾值調(diào)用Marching Squares算法生成等高線并利用貝塞爾曲線進(jìn)行平滑處理，與模擬地形底圖疊加生成等值線圖，并將其作為地形Mesh對(duì)象的紋理貼圖進(jìn)行渲染顯示，增加地形真實(shí)感、提升用戶體驗(yàn)。

2.3 地形及探井三維建模

本文使用Three.js中的PlaneGeometry平面模型生成對(duì)應(yīng)長(zhǎng)寬的二維平面，再通過(guò)修改相應(yīng)坐標(biāo)頂點(diǎn)的z值（對(duì)應(yīng)高程值）形成連綿起伏的地勢(shì)，最后將平面繞X軸進(jìn)行90度的3D旋轉(zhuǎn)，完成基于WebGL的三維地形建模。同時(shí)，考慮到初始化DEM數(shù)據(jù)量冗余量較大、加載渲染時(shí)間長(zhǎng)，因此本文引入層次細(xì)節(jié)模型（Lev?els Of Detail，LOD）對(duì)地形渲染進(jìn)行效率優(yōu)化，即對(duì)距離屏幕較近的區(qū)域進(jìn)行精細(xì)的模型渲染，而對(duì)遠(yuǎn)離屏幕的區(qū)域采用粗略的模型顯示[10]。具體的，本文對(duì)初始加載的高程數(shù)據(jù)分別間隔1、2個(gè)數(shù)據(jù)點(diǎn)進(jìn)行下采樣，在長(zhǎng)寬不變的情況下減少數(shù)據(jù)量、增大數(shù)據(jù)間隔，再對(duì)多組高程值矩陣分別進(jìn)行地形建模，按照距離相機(jī)越遠(yuǎn)、模型越粗糙的標(biāo)準(zhǔn)生成3層LOD模型并加入場(chǎng)景渲染。對(duì)于需要插值的區(qū)域，先進(jìn)行空間插值計(jì)算，再將插值后的數(shù)據(jù)生成地形對(duì)象并加入LOD模型中。在實(shí)際使用中，通過(guò)監(jiān)控LOD的update函數(shù)判斷當(dāng)前顯示的地形Mesh對(duì)象，從而進(jìn)行等高線繪制和地形紋理貼圖更換、等高線圖例展示、高程值標(biāo)注等動(dòng)態(tài)的交互操作。三維地形建模的流程圖如圖4（a）所示。

本文根據(jù)探井?dāng)?shù)據(jù)中的層位代碼、層位顏色及高度信息將豎直分層的探井對(duì)象抽象為一組圓柱體，即一個(gè)探井模型由多層圓柱體對(duì)象組合而成，使用Three.js中的CylinderGeometry幾何體工具，按層位信息計(jì)算重心坐標(biāo)、起始高度、層位高度后進(jìn)行逐層建模，并對(duì)每一層分別綁定交互事件，進(jìn)行勘探生產(chǎn)信息包括探井基礎(chǔ)數(shù)據(jù)與統(tǒng)計(jì)數(shù)據(jù)的聯(lián)動(dòng)展示。Three.js中的對(duì)象無(wú)法直接綁定點(diǎn)擊事件，因此使用Raycaster射線工具監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊事件，生成一條由相機(jī)位置指向點(diǎn)擊坐標(biāo)的射線，若射線與探井層位對(duì)象有交點(diǎn)則判斷用戶點(diǎn)擊成功，場(chǎng)景相機(jī)與控制器中心點(diǎn)跟隨移動(dòng)至層位中心點(diǎn)高度，同時(shí)顯示探井基本信息框、層位信息框和層位圖例。點(diǎn)擊信息欄的統(tǒng)計(jì)信息按鈕，可跳轉(zhuǎn)至其他二維圖表頁(yè)面，了解更詳細(xì)的勘探統(tǒng)計(jì)數(shù)據(jù)信息。通過(guò)三維探井與二維圖表結(jié)合的方式，直觀立體地展示探井狀態(tài)、統(tǒng)計(jì)數(shù)據(jù)及周邊地形特點(diǎn)。三維探井建模的流程圖如圖4（b）所示。

圖4建模流程圖

3 系統(tǒng)測(cè)試

3.1 系統(tǒng)功能測(cè)試

對(duì)系統(tǒng)進(jìn)行功能測(cè)試，包括二維GIS、三維地形及探井重建、人機(jī)交互等主要功能。系統(tǒng)成功獲取并在二維地圖上標(biāo)注當(dāng)日探井分布信息，使用圈選工具在二維地圖上隨機(jī)選取一定范圍的地理區(qū)域，點(diǎn)擊三維展示按鈕，成功顯示該區(qū)域內(nèi)地形及探井的三維模型。該區(qū)域的三維地形如圖5所示，滑動(dòng)鼠標(biāo)對(duì)可視區(qū)域進(jìn)行放大縮小并觸發(fā)相應(yīng)的LOD模型，點(diǎn)擊可進(jìn)行高度標(biāo)注、等高線繪制、坐標(biāo)軸顯示等功能。三維探井如圖6所示，點(diǎn)擊圓柱體可在界面右側(cè)展示分層圖例信息，左側(cè)展示探井信息框，并能對(duì)探井進(jìn)行層位點(diǎn)擊、統(tǒng)計(jì)圖表信息顯示等聯(lián)動(dòng)操作。經(jīng)測(cè)試，系統(tǒng)所有功能均符合預(yù)期。

圖5三維地形圖

圖6三維探井圖

3.2系統(tǒng)性能測(cè)試

對(duì)本系統(tǒng)三維建模場(chǎng)景的流暢度性能進(jìn)行測(cè)試，幀率（FPS）表示圖形處理器每秒鐘更新的次數(shù)，F(xiàn)PS值越高、刷新越快、畫(huà)面越流暢。通常FPS值在30以上就可以保持畫(huà)面的流暢性，目前大多數(shù)瀏覽器的屏幕刷新率為60次每秒，因此Web端FPS值達(dá)到60時(shí)動(dòng)畫(huà)渲染性能最優(yōu)。本文借助Three.js的性能檢測(cè)插件Stats對(duì)三維建模頁(yè)面繪圖性能進(jìn)行實(shí)時(shí)監(jiān)測(cè)與分析，間隔5秒記錄一次FPS值，記錄結(jié)果如表1所示，隨著繪制范圍與數(shù)據(jù)量的增加，渲染幀率有所下降，但仍在預(yù)期范圍之內(nèi)。系統(tǒng)平均幀率在50-60FPS之間，頁(yè)面渲染流暢、交互性能良好。

表1三維場(chǎng)景渲染性能測(cè)試表

4 結(jié)語(yǔ)

本文設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)交互式的Web端可視化應(yīng)用系統(tǒng)，使用Three.js的地形工具通過(guò)曲面擬合的方法進(jìn)行三維地形建模，同時(shí)運(yùn)用細(xì)節(jié)層次模型、移動(dòng)窗口反距離權(quán)重空間插值法、Marching Squares等高線生成算法等進(jìn)行地形細(xì)節(jié)的豐富與渲染性能的提升。在地形建模的基礎(chǔ)上，將探井對(duì)象抽象為圓柱體，使用Three.js的幾何體工具進(jìn)行逐層建模，并通過(guò)交互操作進(jìn)行二維勘探生產(chǎn)信息圖表頁(yè)面的實(shí)時(shí)聯(lián)動(dòng)展示。通過(guò)對(duì)地形和探井信息的三維重建，直觀地展示了勘探統(tǒng)計(jì)和空間信息，便于油田工作人員觀測(cè)探井結(jié)構(gòu)及其周圍的地形地貌，提高其獲取和分析數(shù)據(jù)的效率。