基于Web的隧道場景建模與實時繪制

陳國軍，滕一諾，宋華婷，姜 朕，隋曉燕

( 中國石油大學(華東) 計算機科學與技術學院，山東 青島 266580)

0 引 言

傳統上基于客戶端的可視化應用存在著諸多限制，越來越難以滿足用戶的需求，各行各業開始著力研究Web3D的可視化應用[1]，隧道工程涉及專業多，對其施工管理的Web可視化提出了新的挑戰和思路。文獻[2-3]將隧道BIM模型通過簡化及復用等輕量化技術進行處理，結合WebGL渲染引擎開發隧道運營管理系統，實現模型快速加載及流暢漫游等功能。文獻[4-5]研究了隧道參數化快速建模的方法，采用Revit進行IFC標準的隧道族構件庫的建立，實現了隧道BIM模型在Web端顯示與部分信息集成。文獻[6-7]在實現隧道模型在Web端可視化的基礎之上，通過獲取隧道內全景貼圖，將隧道病害展示圖轉換為三維空間紋理，建立了基于Web的隧道養護管理階段的可視化應用。由于隧道模型復雜，數據量大，以上研究對隧道Web端可視化應用主要停留在模型3D展示的階段。

為實現隧道施工過程4D可視化，從兩個方面進行研究：(1)通過對隧道場景參數化建模研究，建立隧道BIM基礎數據模型，并基于Shader的布爾運算完成隧道合成場景的碰撞處理，結合施工數據實現隧道施工過程可視化；(2)通過對本地緩存機制的研究，實現本地緩存數據庫和服務器端數據庫的協同存儲以及場景動態調度策略，提高繪制效率，達到實時繪制的效果。

1 隧道場景建模

隧道參數化模型的建立是實現隧道可視化的基礎和關鍵[8]。基于BIM建模及應用的要求，根據隧道洞身結構特點提出基于橫斷面序列的參數化建模的方法，將施工數據集成到參數模型上可生成隧道施工進度模型，在可視化階段模擬隧道施工過程。

1.1 隧道橫斷面參數模型

根據隧道三心圓斷面結構進行初始橫斷面參數化定義，如圖1所示。令隧道中心線O點為三維坐標原點，橫斷面圖形在xoy平面上，根據斷面設計參數，輪廓線上每一點位置都可用坐標來表示。以拱頂段為例，已知此段圓弧的圓心坐標為(0,d,0)，半徑為R1，弧上坐標計算公式如式(1)。其中α根據圓弧離散化程度和對應圓心角確定。

(1)

圖1 隧道內輪廓設計圖

沿隧道中心線的方向，將初始斷面移動到每個隧道中心樁號對應的位置，每移動一次得到下一個斷面，最終形成斷面序列。初始斷面移動的過程就是將斷面進行相應的平移、旋轉等幾何變換。隧道的斷面垂直于相鄰中心樁號坐標之間的連線，變換過程可分解為先繞y軸旋轉再平移到對應中心樁號位置處。

假設橫斷面上某一點坐標為s(sx,sy,sz)，變換后坐標為t(tx,ty,tz)，旋轉矩陣為Ry，平移矩陣為T，中心樁坐標為v(vx,vy,vz)，將初始面坐標s轉變成齊次坐標s1，變換后坐標t轉變成齊次坐標t1，可根據公式(2)計算變換后坐標。

t1=T×Ry×S1

(2)

由于初始橫斷面在xoy平面上定義，因此中心樁坐標即為對應偏移量，其中平移矩陣T定義為公式(3)。設繞y軸旋轉角度為θ，可得旋轉矩陣如式(4)，其中θ值由式(5)計算得到。

(3)

(4)

(5)

在橫斷面序列實例化之后，連接相鄰橫斷面上坐標生成隧道竣工模型。相鄰兩個斷面之間按端點的順序依次連接，統一成三角形表示，如圖2所示。

圖2 隧道三角網線框圖

1.2 施工進度模型

在隧道的竣工模型基礎上構造隧道施工模型。根據隧道施工工序，將施工進度分為掘進、初襯、二襯支護、二襯完成等施工階段[9]。根據施工數據將隧道按施工進度分段，對于每段隧道確定起止樁號位置，如果起止點位于兩橫斷面之間則需要進行插值獲得該橫斷面位置，再將起止位置之間的橫斷面數據順序連接得到洞身進度模型。施工進程通過隧道內壁紋理變化來展現，繪制時根據進度情況綁定相關參數啟用對應紋理貼圖，展示符合隧道真實施工場景的隧道模型。

1.3 基于Shader的地形三角網布爾運算

隧道地形場景多為山地，采用不規則三角形格網(triangulated irregular net，TIN)進行地形建模。TIN用互不重疊的三角形上的各頂點作為數據點，用大量三角形表示地形表面[10]。根據公路設計樁號對地形進行分段處理，場景碰撞處理時可以快速定位到對應的地形三角面片，繪制時也可以實現基于視點的動態調度。

在隧道場景中，地形和隧道模型分離建模，然后將建立好的隧道模型集成到地形場景中，在合成過程中會遇到模型之間交叉碰撞的問題。隧道屬于隱蔽的地下工程，在地形表面之下繪制，因此處理隧道場景碰撞問題的關鍵是隧道洞口處與地形坡面的融合[11]。以往的地形地物融合算法在前期需要復雜的幾何布爾運算過程[12-13],因計算存在誤差，影響算法穩定性。文中采用基于Shader的布爾運算解決隧道與地形間的碰撞問題，降低了計算復雜度，并且應用GPU并行運算[14]，在時間上具有更好的性能。該方法有兩個步驟：

(1)地形裁剪。將洞口模型空間輪廓投影到地形平面后得到洞口邊界多邊形，其與地形網格的關系如圖3所示，陰影部分即為待裁剪多邊形。采用Shader進行多邊形裁剪，需要在地形繪制時利用Fragment Shader判斷像素點與邊界多邊形位置關系。

圖3 地形裁剪示意圖

根據點與多邊形位置判斷的方法，假設判定點為V，多邊形四個頂點順時針為A、B、D、C，得到有向向量AV、BV、DV、CV、AB、BD、DC、CA，根據公式(6)計算向量積。若a、b、d、c同號，判定該點在多邊形內部，繪制時舍棄；反之不作處理，將該點輸出。

(6)

(2)裂縫修補。裁剪掉隧道上方的地形會造成地形和出入口模型之間有一個高度差，因此還需對裁剪形成的模型與地形之間的裂縫進行修補，如圖4所示。

圖4 洞口裂縫示意圖

具體實現過程如下：

首先確定邊界多邊形頂點對應地面坐標。洞口邊界多邊形的某個頂點在xoy平面上坐標為pi(xi,yi)，假設三角形頂點是P1、P2、P3,任意三角形內部的點P可以用公式(7)表示。

(7)

其中，c1和c2滿足：0≤c1≤1，0≤c2≤1，0≤(c1+c2)≤1。

將頂點pi代入公式(7)得到c1和c2，遍歷此段地形三角網，若符合所屬范圍，則頂點位于該地形三角形投影內部。將該點映射回地形三角形計算真實高程，得到對應三維坐標。然后通過地形三角形和洞口邊界多邊形坐標數據，計算兩者在二維平面上的交點。多邊形某邊的兩端點與地形三角形某邊的兩端點分別用參數方程表示，聯立求得多邊形與地形三角形的交點。將交點還原到洞口邊界和地形三角形邊界上插值求得對應的三維坐標。

最后對地形修正，將同一投影點對應邊界多邊形與地形三角形三維坐標按參數大小順序生成三角形作為修補地形三角形，繪制時與地形結合實現裂縫修補。隧道洞口碰撞處理前后效果如圖5所示。圖5(a)表示融合前洞口與地形存在重疊遮擋，圖5(b)表示地形裁剪后與洞口之間存在裂縫，修補后洞口與地形無融合，如圖5(c)所示。

圖5 隧道洞口融合效果圖

2 客戶端緩沖機制

隧道場景繪制所需數據量大，每次都從服務器端讀取數據必然造成時間和資源浪費，影響繪制速度。通過本地緩存數據庫與服務器數據庫的協同存儲并結合基于視點的動態調度策略，實現快速、高質量的交互。本地存儲的空間大，會被瀏覽器原生支持，不用依賴任何第三方插件，其中Indexed DB索引數據庫技術既可以用于持久化的本地緩存又能夠實現大量的結構化數據存儲，并且使用索引高效率搜索數據[15]。

2.1 本地緩存機制

本地緩存的工作流程如圖6所示，初始化繪制頁面后，獲取當前視點位置，并計算視點對應樁號，確定視點參數。向數據庫發行打開請求。如果數據庫存在，打開該數據庫，直接執行數據訪問，取數據并進行繪制。如果數據庫不存在，自動新建數據庫進行更新操作，此時需要訪問服務器取出設計參數和施工數據，根據參數化建模方法計算出隧道和地形模型數據，與施工數據一并存入IndexedDB數據庫中，繪制時從緩存中加載，并根據視點坐標將當前視點覆蓋范圍內場景模型進行繪制。通過本地數據庫與服務器數據庫的協同工作，減少頁面加載時間，提高訪問效率和繪制速度，實現場景模型的實時繪制。

圖6 本地緩存工作流程

2.2 本地緩存數據庫設計

首次繪制時新建四個對象倉庫，分別存儲隧道數據、地形坐標數據及施工數據。

隧道數據由屬性和模型數據組成。隧道集合由若干個隧道實體組成，每一個隧道離散化為連續的橫斷面序列，斷面上坐標按逆時針順序排列。按此層次結構得出模型數據的設計如表1所示。Tunnelid是區分隧道實體的標志。每個隧道由左右線兩個模型組成，其中0代表右線，1代表左線。Section為自定義對象，存儲橫斷面位置及坐標數據。屬性數據設計如表2，由隧道名、id、起止樁號組成。

表1 隧道模型數據設計

表2 隧道屬性數據設計

地形數據結構設計如表3所示，通過分段的方式組織數據，包括段號、地形三角形個數、起止樁號以及地形坐標。施工數據設計如表4，包含日期、隧道id、施工進度、施工長度。

表3 地形模型數據設計

表4 施工數據設計

2.3 基于視點的動態調度

隨著隧道場景規模的不斷擴大，逐漸形成大規模數據時，計算和繪制的負荷也越來越大，必然影響到場景的繪制速度，無法滿足實時要求。通過減少系統一次性處理的數據量，最大可能地利用系統資源，提高繪制效率[16]。采取基于視點的場景動態調度策略，流程見圖7。

圖7 動態調度流程

數據動態調度的效率和數據可視化的繪制效果都與數據組織有著密切的關系。預處理階段主要對數據組織進行處理，在參數化建模和緩存數據庫設計時依據分塊思想對數據進行組織和存儲，沿地形延伸方向按樁號將其分割為一系列間隔為200米的連續地形段。在視點移動時，視點位置以及視線方向決定了場景顯示區域，場景跟隨運動視點發生改變。在實時繪制過程中，根據場景中視點投影位置坐標計算對應樁號，并確定地形及隧道的視點調度參數，將緩存數據庫中數據加載到網頁，并遍歷每段地形及隧道起止樁號確定繪制場景模型范圍，返回隧道ID和地形索引。根據頁面返回的施工日期到本地數據庫中查詢當前隧道施工數據讀取到頁面。將施工數據與隧道模型數據相結合計算出當前視點范圍隧道的進度模型數據，包括坐標數據、法向量及紋理坐標，同時將相應地形塊的坐標數據一起存儲到緩沖區，實現隧道場景基于視點的實時繪制。

3 實驗結果與分析

采用客戶端設備的實驗平臺為Intel(R) Xeon(R) CPU E5-162，主頻3.70 GHz，系統內存16 GB，顯卡為NVIDIA Quadro K2000，顯卡內存為2 GB，操作系統為Windows 10，系統開發平臺采用的開發工具為HBuilderX，瀏覽器版本為Chrome 49.0 x64。本地局域網測試服務器為一臺PC設備，同時在阿里云服務器上搭建了服務，用來測試遠程服務器的加載速度。

系統使用Three.js渲染引擎進行開發。Three.js是利用JavaScript編寫的WebGL框架，用簡單直觀的方式封裝了WebGL常用方法，可以很好實現Web3D的繪制、渲染及動畫[17]。

實驗數據來源于山西省祁縣到離石高速公路第四合同段施工數據，起止樁號為K24320-K28608，全長4.28公里。包含北峪口隧道、西域口1號隧道和西域口2號隧道，長度分別為0.3公里，0.48公里，1.34公里，地形數據量為2.55 M，約8萬個三角形坐標數據，分段間隔為200米。無人機航拍圖像27.6 M，用作地表紋理。

在系統性能方面，針對實時渲染的幀率，借助stat.js監控施工模擬過程的FPS信息，除剛開始時的系統讀取服務器上文件數據并進行計算的初始化時間外，整個仿真過程中，畫面每秒傳輸幀數均大于30，保證了仿真系統的穩定性和流暢性。

針對系統響應時間，使用Chrome瀏覽器開發者工具Network分別對在遠程服務器、本地服務器端數據庫以及本地緩存IndexedDB數據庫的情況下的系統響應時間進行測試，結果如表5所示。從IndexedDB數據庫讀取數據進行繪制大大減少了等待服務器響應和資源下載的時間，從而提高了繪制響應效率，達到了實時繪制效果。

表5 響應時間測試對比

系統根據施工數據模擬當前隧道的施工進程，最終施工階段可視化渲染效果如圖8所示。其中圖8(a)表示隧道初襯階段施工完畢，圖8(b)表示隧道二襯鋪設防水板，圖8(c)表示隧道二襯架立鋼筋網，圖8(d)表示隧道二襯復噴混凝土。

圖8 隧道施工過程效果圖

4 結束語

通過對實現基于Web的施工可視化關鍵技術進行研究，建立了基于橫斷面序列的隧道參數化模型，該模型可進一步結合施工數據，生成隧道進度模型。提出了基于Shader的三角網布爾運算實現隧道場景的碰撞處理，算法利用GPU多核進行并行處理，提高了計算效率。采用客戶端緩存機制實現本地數據緩存和基于視點的動態調度，有效提高了系統的響應效率，實現實時繪制。系統運行流暢，效果良好，支持用戶的便捷訪問，對于隧道施工三維場景在瀏覽器端的模擬實現，具有一定的實際應用價值。