基于Three.js引擎模塊的隧道三維可視化系統(tǒng)設(shè)計與實現(xiàn)

林 杰,祝江林,肖 強,黃思璐,謝 俊,朱 軼,鄧儀莉

(1.湖北交投智能檢測股份有限公司,湖北 武漢 430220;2.武漢精視遙測科技有限公司,湖北 武漢 430070)

21世紀(jì)以來,我國公路隧道工程建設(shè)迅猛發(fā)展。截至2022年底,共建成公路隧道24 850座、26 784.3 km,與2021年相比,新增1 582座,里程年增速達2 085.4 km[1]。隧道工程的龐大體量給運管工作帶來巨大挑戰(zhàn)[2]。

目前,大多運營高速公路隧道依舊采用紙質(zhì)記錄、攝像記錄等傳統(tǒng)人工檢測方法,檢測效率低、檢測結(jié)果不直觀,大量定性描述的檢測報告遠不如一張標(biāo)記了病害特征參數(shù)的照片直接[3]。SONG等[4]將在隧道工程的規(guī)劃與設(shè)計階段引進BIM技術(shù)開發(fā)了工程協(xié)同管理平臺,成功實現(xiàn)了工程的整體優(yōu)化。LEE等[5]提出集成了BIM與GIS技術(shù)的系統(tǒng)框架,結(jié)合應(yīng)用案例為業(yè)內(nèi)提供了一種隧道設(shè)施全面監(jiān)測與管理的新思路。李健等[6]指出為獲取全面的信息以進行運營隧道良好管理,可通過建立與實體隧道對應(yīng)的三維模型來展示實際情況,結(jié)合適當(dāng)?shù)膱D文說明來提高隧道的管理效率。GE等[7]提出可實現(xiàn)多專業(yè)設(shè)備管控的公路隧道養(yǎng)護管理系統(tǒng)框架及關(guān)鍵模塊,為廣大研究人員提供了相關(guān)思路。王陽[8]結(jié)合傳統(tǒng)隧道控制與管理技術(shù)的,提出根據(jù)洞外光環(huán)境實時調(diào)控隧道內(nèi)燈具性能的智慧隧道管理平臺。梁彤[9]針對現(xiàn)有隧道管養(yǎng)工程中存在的大量養(yǎng)護數(shù)據(jù)失真度高、養(yǎng)護標(biāo)準(zhǔn)化與信息化程度低等問題,引入BIM和WebGL技術(shù),建立病害三維可視的公路隧道養(yǎng)護管理平臺。陳光景[10]建立集交通誘導(dǎo)、通風(fēng)與照明以及火災(zāi)報警等功能的隧道監(jiān)控系統(tǒng)。孫培培[11]基于BIM技術(shù)對地鐵隧道參數(shù)化建模,結(jié)合隧道測量機器人實現(xiàn)了結(jié)構(gòu)變形的自動化監(jiān)測。張倩茜等[12]分析通過網(wǎng)絡(luò)實現(xiàn)信息以及可視化服務(wù)的優(yōu)勢,提出基于Web的產(chǎn)品數(shù)據(jù)交換與共享結(jié)構(gòu)。沈柯[13]基于WebGL與HTML5技術(shù),實現(xiàn)3D網(wǎng)頁游戲的響應(yīng)式布局,實現(xiàn)網(wǎng)頁游戲與用戶的良好互動,為智慧隧道管理平臺的用戶交互提供參考。

綜上,現(xiàn)有的隧道管理系統(tǒng)研究不成體系,未見對隧道管養(yǎng)數(shù)據(jù)進行直觀化展示調(diào)整,現(xiàn)有隧道管理系統(tǒng)無法有效提高隧道運維管理效率。因此,筆者基于Three.js引擎模塊,設(shè)計并實現(xiàn)隧道三維可視化系統(tǒng)。系統(tǒng)允許用戶在三維場景中進行視角漫游,實現(xiàn)不同部位表觀病害及其詳情的動態(tài)展示。

1 技術(shù)簡介

Three.js是建立在WebGL技術(shù)之上的高級3D圖形庫,其提供更簡單、更易用的API,使開發(fā)者能更專注于網(wǎng)頁端三維模型的建模與展示。與WebGL相比,Three.js在多方面更具優(yōu)勢。在此對Three.js相對于原生WebGL的一些優(yōu)勢進行簡要介紹。

1.1 簡化的API

使用WebGL進行場景創(chuàng)建并渲染一個立方體時,通常包含 “頂點著色器定義、片元著色器定義、創(chuàng)建著色器、創(chuàng)建看色器程序、獲取uniform和attribute位置、創(chuàng)建緩沖區(qū)并綁定數(shù)據(jù)、設(shè)置視口并清除畫布、啟用著色器程序和屬性、創(chuàng)建投影矩陣和模型視圖矩陣、更新uniform變量、繪制” 這一系列步驟,且代碼繁瑣;而Three.js僅需“創(chuàng)建場景、相機和渲染器、創(chuàng)建立方體、渲染場景”4個步驟,且代碼較為簡潔。因此,Three.js提供更高級、更簡化的API,使得網(wǎng)頁三維模型展示的開發(fā)過程更加便捷和高效。

1.2 更高級的抽象級別

在WebGL中,著色器、緩沖區(qū)、頂點和片元數(shù)據(jù)等需要手動處理,而Three.js將這些細節(jié)封裝在類和方法中,無需編寫或操作底層細節(jié)。此外,Three.js還封裝了光源、相機、投影矩陣、模型視圖矩陣等功能和工具,無需進行手動添加。因此,Three.js提供更高級的抽象級別,使得開發(fā)者更專注于設(shè)計與交互,充分提高開發(fā)效率。

1.3 增強的功能和效果

與WebGL相比,Three.js提供如粒子系統(tǒng)、后期處理效果、陰影效果、紋理映射、動畫等功能強大且易于使用的庫,允許開發(fā)者輕松創(chuàng)建如雨、雪、光暈、平行光陰影等復(fù)雜效果。因此,Three.js提供的增強的功能和效果,使得開發(fā)者更輕松的創(chuàng)造出奪人眼球的三維場景,讓網(wǎng)頁三維模型更具有視覺沖擊力以及更好的交互性。

綜上,Three.js在網(wǎng)頁三維建模中具有強大的功能與便捷的操作,與WebGL相比,優(yōu)勢顯著。因此,Three.js是在網(wǎng)頁三維模型展示中更常用和受歡迎的選擇。

2 隧道三維可視化系統(tǒng)設(shè)計與實現(xiàn)

2.1 隧道智能數(shù)據(jù)采集系統(tǒng)

筆者研究的隧道智能數(shù)據(jù)采集系統(tǒng)為自主研發(fā)的成套技術(shù),包含高速高精度圖像數(shù)據(jù)采集系統(tǒng)、隧道圖像拼接及識別系統(tǒng)、隧道數(shù)據(jù)可視化系統(tǒng)。

(1)隧道智能檢測系統(tǒng)(SmartTMS-mini)隧道智能檢測系統(tǒng)是公司研發(fā)出的新一代隧道快速檢測系統(tǒng),如圖1所示。該系統(tǒng)使用多個線陣相機和自主研發(fā)的LED線陣光源,以獲取隧道表面的高分辨率紋理信息。同時,為自適應(yīng)不同車道數(shù)的隧道,系統(tǒng)還配置了一臺激光掃描儀,用于獲取各相機到隧道斷面的距離信息,繼而通過反演,準(zhǔn)確獲得斷面影像上的單位像素對應(yīng)的實際尺寸。

圖1 隧道智能檢測系統(tǒng)

該系統(tǒng)在進行測試前需進行標(biāo)定。設(shè)計一個標(biāo)定架模擬隧道面,調(diào)整車輛位置,保證線陣相機和激光掃描儀同時可以采集到標(biāo)定架的數(shù)據(jù),如圖2所示?；诰€陣相機的成像特點,同時獲取像點及其對應(yīng)的物方點坐標(biāo),擬合出掃描面的方程,進而更新像點對應(yīng)的物方點坐標(biāo)。利用線陣相機的成像模型,物方點與像點共線,求得相機的焦距和像主點等內(nèi)參。

圖2 標(biāo)定架

該系統(tǒng)可在高速行駛中對隧道表觀病害進行無損檢測(0～80 km/h)。覆蓋單洞2～3車道隧道洞口、洞門、襯砌表觀病害、檢修道病害、標(biāo)志標(biāo)線等檢測。

(2)數(shù)據(jù)采集與處理。采用隧道智能檢測系統(tǒng)(SmartTMS-mini)對隧道襯砌圖像進行采集。檢測車行駛在準(zhǔn)備采集過程中,在離需要檢測隧道200 m時,車輛變更到預(yù)設(shè)需要采集車道,同時車速應(yīng)保持在60～70 km/h均速行駛,在離需采集數(shù)據(jù)隧道50～100 m前,打開采集軟件,開啟采集(提前對采集軟件進行必要參數(shù)設(shè)置,包括不限于隧道名稱、隧道道路名稱、隧道檢測反向等),采集完后出隧道30m左右停止采集。

由于不同鏡頭的相機和不同物距的存在,使得線陣相機一次采集的隧道襯砌圖像分辨率差異較大,同時相機之間采集的數(shù)據(jù)存在一定重疊區(qū)域,嚴重影響后續(xù)的圖像拼接。直接拼接分辨率差異較大的圖像導(dǎo)致結(jié)果產(chǎn)生變形。為此,筆者提出一種在預(yù)處理過程中拼接圖像采取分辨率歸一化,得到近似相同分辨率。具體流程如下:①通過標(biāo)定的相機和激光外參,以及激光的測距值獲得每個相機的分辨率;②對6個相機圖像分辨率進行統(tǒng)計分析,選擇某幅圖像作為基準(zhǔn),一般將分辨率最小的或者分辨率最低的那幅圖為基準(zhǔn),計算其他圖像分辨率與該參考圖像分辨率的比值;③根據(jù)步驟②計算得到的其他圖像與參考圖像的比值,對其他圖像做分辨率的調(diào)整,讓所有圖像的分辨率能達到一致。完成圖像分辨率的調(diào)整后,使用相機的焦距作為投影半徑進行柱面投影,以保證圖像因投影產(chǎn)生的變形是最小的,投影結(jié)果高度接近原始圖像。綜合攝影測量幾何拼接、輔以圖像特征分析技術(shù),對投影后圖像進行半幅以及全幅拼接。該方法有效避免了傳統(tǒng)圖像拼接技術(shù)中普遍存在的計算量大、耗時長、并且容易發(fā)生誤匹配等缺點,適合于隧道圖像的拼接。圖像拼接效果如圖3所示。

圖3 兩車道拼接完成全幅局部段示例

(3)隧道病害識別及處理。為實現(xiàn)隧道病害的精確識別,筆者提出結(jié)合人工智能與深度學(xué)習(xí)技術(shù)的方法。首先,利用自主研發(fā)的數(shù)據(jù)標(biāo)注軟件為Yolo V5深度學(xué)習(xí)模型提供相當(dāng)體量的訓(xùn)練數(shù)據(jù),如圖4所示。完成數(shù)據(jù)的標(biāo)注后,通過行業(yè)專家進行結(jié)構(gòu)化的整理及匯總,確保樣本數(shù)據(jù)是真實有效。

圖4 數(shù)據(jù)標(biāo)注軟件

在掌握大量真實有效的樣本數(shù)據(jù)后,針對不同的采集環(huán)境建立隧道圖像特征數(shù)據(jù)庫,分析總結(jié)隧道圖像及裂縫類病害的特征。在對特征充分認識的基礎(chǔ)上,基于粒度計算理論快速定位裂縫候選區(qū)域,保證裂縫定位的準(zhǔn)確性;基于裂縫發(fā)展趨勢的估算實現(xiàn)裂縫生長,保證裂縫檢測的完整性;建立隧道裂縫自動檢測試驗系統(tǒng)驗證算法的可靠性及適用性,隧道裂縫類病害識別總流程如圖5所示。

圖5 隧道裂縫類病害識別總流程

2.2 可視化渲染

為更好地在網(wǎng)頁上展示、處理并呈現(xiàn)三維隧道可視化模型及其病害表觀病害分布情況,根據(jù)以下4個步驟實現(xiàn)該項技術(shù):模型構(gòu)建、隧道曲面柱狀展開、病害圖片坐標(biāo)分區(qū)、病害紋理配置。

(1)模型構(gòu)建。Three.js渲染流程需要先定義場景。在成功導(dǎo)入Three.js的庫后,在HTML文件中創(chuàng)建用于顯示三維場景的畫布元素,之后創(chuàng)建包括模型、燈光、相機等所有三維元素的場景。設(shè)置好基本參數(shù)后,創(chuàng)建Three.js相機對象以定義觀察者的視角,并添加好光源以照亮場景中的模型;之后為模型添加材質(zhì)以決定其外觀和紋理,再將模型與材質(zhì)結(jié)合,創(chuàng)建最終在場景中顯示的Three.js網(wǎng)格對象。完成以上準(zhǔn)備工作后,添加動畫效果或者交互功能以完成模型的基本構(gòu)建。模型渲染流程如圖6所示。

圖6 模型渲染流程

(2)隧道曲面柱狀展開。因為相機拍攝的隧道襯砌為二維,為實現(xiàn)隧道三維可視化,需利用紋理映射技術(shù)。通過曲面柱狀展開方式,對隧道照片進行處理,如圖7所示。

圖7 柱狀展開圖

計算前,將隧道曲面中心設(shè)為原點,指定X軸與Y軸后可以得到隧道曲面柱狀展開的半徑;通過坐標(biāo)轉(zhuǎn)換公式將直角坐標(biāo)系轉(zhuǎn)化為極坐標(biāo)系,得到各點方位角。最后根據(jù)映射公式,如式(1)所示,將通過隧道智能檢測系統(tǒng)(SmartTMS-mini)獲取的二維襯砌圖像像素坐標(biāo)轉(zhuǎn)化為全景柱狀展開圖的像素坐標(biāo):

(1)

式中:x*、y*表示柱狀展開圖的橫、縱坐標(biāo);x、y表示全景圖像的橫、縱坐標(biāo);r1、r2表示隧道曲面展開區(qū)域的內(nèi)、外徑;θ表示隧道曲面柱狀展開后曲面像素坐標(biāo)的方位角。

(3)病害圖片坐標(biāo)分區(qū)。通過自動或人工識別完成后,將包含病害坐標(biāo)位置、里程等詳細數(shù)據(jù)完成輸出,并輸出工程病害信息展布圖,如圖8所示。在CAD中提取出的病害坐標(biāo)并非病害的實際位置信息,需通過計算來實現(xiàn)平面坐標(biāo)的轉(zhuǎn)化以反映病害在實際隧道斷面的具體位置。

圖8 工程病害信息展布圖

受襯砌表面污損等影響,柱面展開后的隧道曲面難以直接觀察,且不易標(biāo)注病害信息,如果將病害區(qū)域使用含有詳細信息的紋理來替代,那么可在實現(xiàn)病害可視化的同時,將模型輕量化。在使用紋理映射技術(shù)將隧道二維圖像進行柱狀展開后,對襯砌病害圖進行分區(qū),如圖9所示。結(jié)合已識別的隧道病害的頂點坐標(biāo),根據(jù)病害分區(qū)的頂點坐標(biāo)進行對應(yīng),確定病害貼圖的坐標(biāo)及紋理單元坐標(biāo)。通過工程病害信息展布圖中,病害分區(qū)圖片的絕對坐標(biāo),通過公式轉(zhuǎn)化,得到病害在隧道柱面展開后的極坐標(biāo)后,將紋理坐標(biāo)與頂點坐標(biāo)寫在同一緩沖區(qū),將兩者配對并記錄,用于后續(xù)開展病害紋理配置。

圖9 圖片分區(qū)示意圖

(4) 病害紋理配置。在完成模型構(gòu)建、隧道二維圖像柱狀展開,且將病害紋理坐標(biāo)與分區(qū)頂點坐標(biāo)配對后,需進行病害紋理配置。借助紋理映射技術(shù),將病害紋理進行分割,最后如粘貼“瓷磚”一樣,將隧道病害元素如實在隧道模型上體現(xiàn)。在Three.js中,通過Texture命令來加載和存儲應(yīng)用于三維模型表面的已分割的病害圖像。病害紋理的具體配置流程如下:①使用TexturelLoader函數(shù)來加載已分割的病害紋理圖片,并在加載完成后創(chuàng)建紋理對象;②加載完紋理對象后創(chuàng)建一個合適的材質(zhì)對象,并將加載的紋理應(yīng)用到這個材質(zhì)上;③根據(jù)病害紋理尺寸需求,在建立的模型上創(chuàng)建網(wǎng)格;④根據(jù)配對并記錄下的紋理坐標(biāo)與頂點坐標(biāo),將應(yīng)用紋理對象的材質(zhì)應(yīng)用到幾何體上;⑤核查模型,調(diào)整紋理的重復(fù)和包裹方式等細節(jié)參數(shù)。紋理單元操作流程如圖10所示。以一張隧道病害展布圖為例,將其病害紋理坐標(biāo)與頂點坐標(biāo)匹配并將病害圖片分配到制定單元后,可實現(xiàn)隧道及其病害數(shù)據(jù)的三維可視化,如圖11所示。

圖10 紋理單元操作

圖11 隧道三維可視化效果圖

2.3 用戶交互設(shè)計

為與日常巡檢使用場景相對應(yīng),設(shè)計了能滿足用戶進行漫游巡查的用戶交互功能,將視角固定不變的二維場景變?yōu)槿S場景,充分提高了用戶的操作體驗。

系統(tǒng)設(shè)計的三維場景漫游包含了平移變換與縮放變換兩種功能。平移變換值通過算法實現(xiàn)三維場景的前進、后退和左右移動。對于整個三維場景的移動,我們通過計算確定好三個坐標(biāo)軸的平移分量,使用Object3D.setPosition函數(shù)實現(xiàn)整個場景中所有店的移動,以完成一次平移變換。平移前的原始場景如圖12所示,平移變換后的場景如圖13所示。

圖12 原始場景

圖13 平移后場景

為滿足用戶在三維場景上查看局部細節(jié)的需求,需要將模型放大一倍觀察,這時候就需要用到縮放變換。在明確需要縮放的倍數(shù)后,通過設(shè)置物體的Scale屬性,將其以三維場景的中心點進行場景坐標(biāo)的縮放以實現(xiàn)一次縮放變換?？s放后的場景如圖14所示。

圖14 縮放后的場景

3 結(jié)論

(1)為提高隧道管養(yǎng)效率,充分利用大量病害數(shù)據(jù),筆者引入Three.js引擎模塊的可視化技術(shù),開發(fā)了隧道三維可視化系統(tǒng)?；谧灾餮邪l(fā)的隧道智能數(shù)據(jù)采集系統(tǒng),實現(xiàn)了隧道數(shù)據(jù)采集與處理、襯砌病害高效、準(zhǔn)確識別,有效解決了傳統(tǒng)人工檢測的效率低、準(zhǔn)確率低的問題。

(2)基于空間坐標(biāo)轉(zhuǎn)換原理,將二維隧道病害展示圖轉(zhuǎn)換為三維空間紋理附著在隧道模型表面,實現(xiàn)了對隧道模型進一步的輕量化處理,有效解決了傳統(tǒng)定檢報告檢測數(shù)據(jù)體量大、結(jié)果不直觀的問題。

(3)實現(xiàn)了模塊全部基于云計算,所有軟硬件都基于云平臺,公路隧道養(yǎng)護管理平臺中建立的三維元宇宙隧道與病害展示模塊。

(4)基于實際觀測需求開發(fā)了各視角切換與放縮等功能,形成了方便用戶查看的用戶交互功能模塊。

(5)目前,研究成果已成功應(yīng)用于湖北交投高速公路智慧養(yǎng)護管理平臺,并成功對接“國家公路網(wǎng)技術(shù)狀況監(jiān)測評價”“公路養(yǎng)護年報系統(tǒng)”“湖北橋隧數(shù)字化管養(yǎng)平臺”“湖北省交通運輸廳高速公路管理局綜合辦公平臺”等相關(guān)信息平臺。下一步將努力融入基于襯砌病害特征的結(jié)構(gòu)安全性評估,以達到智慧運維的更高水平。