基于WebGL的路面施工三維動(dòng)態(tài)展示技術(shù)研究

唐建亞

(江蘇中路信息科技有限公司 南京市 211106)

隨著物聯(lián)網(wǎng)技術(shù)的發(fā)展,在公路路面工程建設(shè)過(guò)程中運(yùn)用北斗高精定位、無(wú)線射頻RFID等技術(shù)開展遠(yuǎn)程質(zhì)量管控的案例日益增多[1],但當(dāng)前主要通過(guò)數(shù)據(jù)列表、圖表的方式查看路面施工現(xiàn)場(chǎng)狀態(tài),仍然是不夠直觀。近年來(lái),數(shù)字孿生技術(shù)迅速發(fā)展,將物理空間的實(shí)體、虛擬空間的物理模型,通過(guò)數(shù)據(jù)和信息交互在虛擬空間完成映射,讓用戶可以通過(guò)互聯(lián)網(wǎng)身臨其境地感受實(shí)體裝備的運(yùn)行狀態(tài)。研究基于WebGL(Web Graphics Library)的路面施工三維動(dòng)態(tài)展示平臺(tái)開發(fā)技術(shù),包括數(shù)據(jù)源采集、數(shù)據(jù)交互設(shè)計(jì)等問(wèn)題,設(shè)計(jì)了三維一體呈現(xiàn)的系統(tǒng)架構(gòu),實(shí)現(xiàn)了常規(guī)瀏覽器直接與路面施工模型進(jìn)行交互。

1 WebGL技術(shù)

WebGL是一種支持開發(fā)人員在瀏覽器中進(jìn)行三維繪圖的開放協(xié)議,用以在瀏覽器中繪制、顯示三維計(jì)算機(jī)圖形,可以在多種平臺(tái)上運(yùn)行,并與之交互的技術(shù)[2]。該技術(shù)在Web交互式三維動(dòng)畫有兩個(gè)突出優(yōu)點(diǎn):(1)通過(guò)HTML腳本本身實(shí)現(xiàn)Web交互式三維動(dòng)畫的制作,無(wú)需任何瀏覽器插件支持;(2)利用底層的圖形硬件加速功能進(jìn)行的圖形渲染,是通過(guò)統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺(tái)的OpenGL接口實(shí)現(xiàn)的。

目前WebGL技術(shù)框架典型有BabylonJS、ThreeJS、LayaboxJS、SceneJS,其中ThreeJS技術(shù)支持JSON(JavaScript Object Notation)、OBJ、Collada、STL等三維格式,并對(duì)原生WebGL的API進(jìn)行了封裝,將復(fù)雜的接口簡(jiǎn)單化?；诿嫦?qū)ο笏季S,將數(shù)據(jù)結(jié)構(gòu)對(duì)象化,定義了幾種基本對(duì)象,如場(chǎng)景、渲染器、相機(jī)、物體、光源等,開發(fā)人員可方便地組織三維場(chǎng)景設(shè)計(jì)。

2 平臺(tái)系統(tǒng)架構(gòu)設(shè)計(jì)

根據(jù)調(diào)研,工程管理人員關(guān)于路面施工三維動(dòng)態(tài)展示需求點(diǎn)主要包括:(1)立體展示路面施工技術(shù)場(chǎng)景,包括施工樁號(hào)位置、工程機(jī)械投入數(shù)量、路面碾壓組合工藝等;(2)查看施工過(guò)程工藝數(shù)據(jù),如路面材料拌和產(chǎn)量、攤鋪碾壓溫度、碾壓遍數(shù)等;(3)支持用戶通過(guò)網(wǎng)頁(yè)瀏覽器或手機(jī)端查看路面施工三維數(shù)字模型,提高真實(shí)感的體驗(yàn)度;(4)可以實(shí)時(shí)或是回放施工過(guò)程,基于三維數(shù)字環(huán)境實(shí)現(xiàn)施工質(zhì)量溯源。

根據(jù)工程管理人員的實(shí)際需求及對(duì)于WebGL技術(shù)的調(diào)研結(jié)果,研究設(shè)計(jì)了路面施工三維動(dòng)態(tài)展示平臺(tái)的系統(tǒng)架構(gòu),包括數(shù)據(jù)層、服務(wù)層、框架層和應(yīng)用層[3],見圖1。

圖1 路面施工質(zhì)量三維數(shù)字監(jiān)控平臺(tái)系統(tǒng)架構(gòu)

(1)數(shù)據(jù)層主要包括路面施工設(shè)備的三維模型、道路施工場(chǎng)景、物聯(lián)采集數(shù)據(jù)及模型中不同狀態(tài)不同顏色對(duì)應(yīng)的施工工藝,其中物聯(lián)采集數(shù)據(jù)主要是路面施工現(xiàn)場(chǎng)采集的工藝數(shù)據(jù),采集設(shè)備需要綜合應(yīng)用到高精度定位RTK-GNSS、無(wú)線射頻RFID、紅外溫度傳感及4G網(wǎng)絡(luò)傳輸模塊等。

(2)服務(wù)層、框架層、應(yīng)用層主要是軟件系統(tǒng)平臺(tái)中承擔(dān)著數(shù)據(jù)分發(fā)、解算、渲染不同作用,要實(shí)現(xiàn)現(xiàn)場(chǎng)采集數(shù)據(jù)與機(jī)械BIM模型的集成,動(dòng)態(tài)分析與模擬、施工工藝數(shù)據(jù)的呈現(xiàn),包括模型知識(shí)庫(kù)、物聯(lián)數(shù)據(jù)庫(kù)、WebGL服務(wù)器、應(yīng)用服務(wù)器以及電腦瀏覽器端等模塊。

3 關(guān)鍵技術(shù)研究

平臺(tái)在開發(fā)過(guò)程中主要是解決基于物聯(lián)網(wǎng)的路面實(shí)時(shí)采集技術(shù)、基于WebGL的模型渲染技術(shù)、物聯(lián)數(shù)據(jù)驅(qū)動(dòng)的路面施工模擬等難點(diǎn)。

3.1 基于物聯(lián)網(wǎng)的路面施工數(shù)據(jù)采集技術(shù)

為掌握瀝青路面的施工中的工藝數(shù)據(jù),主要結(jié)合典型的物聯(lián)網(wǎng)采集技術(shù),建立對(duì)應(yīng)工藝的采集方法、數(shù)據(jù)采集范圍及頻率[1]。

(1)在瀝青混合料拌合站的控制電腦安裝數(shù)據(jù)采集程序及4G網(wǎng)絡(luò)傳輸DTU模塊,實(shí)現(xiàn)瀝青混合料生產(chǎn)中每盤瀝青混合料的拌和溫度、不同規(guī)格集料的稱量、瀝青材料的稱量及生產(chǎn)數(shù)據(jù)的采集。

(2)在瀝青混合料運(yùn)輸車輛上安裝定位測(cè)量、溫度測(cè)量及網(wǎng)絡(luò)傳輸模塊,實(shí)現(xiàn)瀝青混合料的出廠溫度、出廠時(shí)間、運(yùn)輸軌跡、到場(chǎng)時(shí)間、到場(chǎng)溫度的數(shù)據(jù)采集。并通過(guò)前期測(cè)量設(shè)備ID與運(yùn)輸車牌號(hào)的綁定,建立混合料運(yùn)輸車牌號(hào)與材料的映射關(guān)系。

(3)在瀝青混合料攤鋪設(shè)備上安裝RTK-GNSS定位、紅外溫度傳感及網(wǎng)絡(luò)傳輸模塊,實(shí)現(xiàn)瀝青混合料的攤鋪位置、溫度、時(shí)間的數(shù)據(jù)采集,并通過(guò)前期道路測(cè)量數(shù)據(jù),實(shí)現(xiàn)位置與道路左右幅、工程樁號(hào)的映射。

(4)在瀝青路面壓實(shí)設(shè)備上安裝RTK-GNSS定位、紅外溫度傳感及網(wǎng)絡(luò)傳輸模塊,實(shí)現(xiàn)瀝青混合料的壓實(shí)位置、溫度、時(shí)間的數(shù)據(jù)采集,并通過(guò)前期道路測(cè)量建模,獲取壓實(shí)遍數(shù)信息。

(5)在瀝青混合料拌合站、攤鋪施工現(xiàn)場(chǎng)安裝視頻采集設(shè)備,獲取實(shí)時(shí)作業(yè)視頻。

3.2 基于WebGL的模型渲染技術(shù)

路面施工的三維模型在Web瀏覽器上的渲染分為圖2所示的幾個(gè)步驟:

圖2 模型渲染流程圖

(1)路面施工所需的拌和機(jī)、攤鋪機(jī)、壓實(shí)機(jī)等設(shè)備模型應(yīng)用BIM建模軟件進(jìn)行建立,本項(xiàng)目應(yīng)用Autodesk Revit軟件進(jìn)行建模,并對(duì)模型的RVT文件進(jìn)行格式轉(zhuǎn)換,轉(zhuǎn)換為占用空間小的JSON格式,后期使用JavaScript進(jìn)行解析,保證較快的響應(yīng)速度。

(2)路面施工場(chǎng)景是所有物體的容器,將需要顯示的物體加入場(chǎng)景中,項(xiàng)目應(yīng)用WebGL Renderer渲染器開啟地圖陰影;設(shè)置三維空間中物體投影到二維屏幕空間的相機(jī),不同相機(jī)參數(shù)呈現(xiàn)出多個(gè)角度的效果,項(xiàng)目系統(tǒng)的投影方式應(yīng)用透視相機(jī)(Three Perspective Camera);設(shè)置光照效果,在場(chǎng)景內(nèi)添加直射光形成立體陰影效果。

(3)三維模型在Web瀏覽器上渲染,是通過(guò)向服務(wù)器請(qǐng)示模型對(duì)應(yīng)JSON文件,利用ThreeJS提供的Three.JSON Loader類和load函數(shù)來(lái)加載JSON文件,以獲得模型的位置和材質(zhì)信息,利用ThreeJS提供的Three.Mesh Face Material類將單風(fēng)格多材質(zhì)合成一個(gè)材質(zhì),并讀取模型的材質(zhì)和貼圖[2-4]。

3.3 物聯(lián)數(shù)據(jù)驅(qū)動(dòng)的路面施工模擬技術(shù)

三維動(dòng)態(tài)技術(shù)平臺(tái)要模擬出路面施工實(shí)際場(chǎng)景,保證數(shù)據(jù)驅(qū)動(dòng)模型變化的功能實(shí)現(xiàn),在建模階段賦予每個(gè)機(jī)械模型獨(dú)立的識(shí)別編碼(設(shè)備SN號(hào)),施工現(xiàn)場(chǎng)安裝的物聯(lián)采集裝置設(shè)置獨(dú)立的識(shí)別編碼(終端SN號(hào)),終端SN號(hào)需要與設(shè)備SN號(hào)、工程項(xiàng)目建立對(duì)應(yīng)關(guān)系表,見圖3,支撐物聯(lián)數(shù)據(jù)與模型的交互。

圖3 物聯(lián)設(shè)備與機(jī)械模型對(duì)應(yīng)表

在路面施工現(xiàn)場(chǎng)的攤鋪、壓實(shí)機(jī)械上安裝RTK-GNSS物聯(lián)采集裝置獲取到坐標(biāo)點(diǎn)數(shù)據(jù),計(jì)算在柵格圖形化的道路模型內(nèi)繪制出壓路機(jī)的軌跡點(diǎn)陣,并驅(qū)動(dòng)機(jī)械設(shè)備的三維模型在路面施工場(chǎng)景中變換[5]。在實(shí)時(shí)施工顯示模式下,網(wǎng)頁(yè)向服務(wù)器請(qǐng)求路面施工場(chǎng)景內(nèi)所有機(jī)械設(shè)備的位置信息,在施工場(chǎng)景內(nèi)模擬于路面施工現(xiàn)場(chǎng)狀態(tài)[6]。由于瀝青路面攤鋪壓實(shí)施工中,設(shè)備均處于作業(yè)狀態(tài),項(xiàng)目在頁(yè)面刷新率設(shè)置為1Hz,當(dāng)同一場(chǎng)景中作業(yè)機(jī)械設(shè)備達(dá)到10臺(tái)時(shí),仍然能保持著較為流暢的速度,沒有加載遲滯現(xiàn)象。

4 平臺(tái)功能

在完成上述關(guān)鍵技術(shù)研究的基礎(chǔ)之上,采用Java語(yǔ)言開發(fā)后臺(tái)服務(wù)端,采用JavaScript編寫前端網(wǎng)頁(yè),采用分布式數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ),完成基于WebGL技術(shù)的路面施工三維動(dòng)態(tài)展示平臺(tái)的開發(fā),主要實(shí)現(xiàn)以下功能。

4.1 路面施工BIM模型查看

用戶無(wú)需安裝任何插件,可在常規(guī)的瀏覽器上不同角度查看帶紋理貼圖和光照效果的三維模型,包括路面施工的瀝青加工廠、拌和后場(chǎng)、施工前場(chǎng)等,體驗(yàn)實(shí)際施工場(chǎng)景。平臺(tái)支持漫游、視角切換、縮放等瀏覽方式,更直觀了解路面施工現(xiàn)場(chǎng)情況,見圖4。

圖4 不同視角查看路面施工模型

4.2 實(shí)時(shí)采集數(shù)據(jù)查看

在路面施工三維動(dòng)態(tài)展示平臺(tái)上,通過(guò)點(diǎn)擊選擇機(jī)械模型可以查看該機(jī)械設(shè)備對(duì)應(yīng)的當(dāng)前生產(chǎn)數(shù)據(jù),從而實(shí)現(xiàn)數(shù)據(jù)的可視化,方便綜合分析當(dāng)前的路面施工質(zhì)量。如果施工場(chǎng)景內(nèi)布置視頻監(jiān)控設(shè)備,可在頁(yè)面查看實(shí)時(shí)畫面,虛實(shí)結(jié)合了解路面施工現(xiàn)場(chǎng)狀態(tài),見圖5、圖6。

圖6 場(chǎng)景視頻監(jiān)控畫面交互

4.3 路面施工工藝模擬

在路面施工三維動(dòng)態(tài)展示平臺(tái)上,根據(jù)機(jī)械設(shè)備的物聯(lián)采集設(shè)備實(shí)時(shí)反饋的數(shù)據(jù)及位置信息,在平臺(tái)上渲染出路面施工現(xiàn)場(chǎng)的機(jī)械數(shù)量,如攤鋪單機(jī)施工,或雙機(jī)聯(lián)鋪的不同作業(yè)狀態(tài)。同時(shí)還可以根據(jù)機(jī)械設(shè)備的位置信息,真實(shí)模擬于路面碾壓組合工藝,如初壓用鋼輪壓路機(jī)還是膠輪壓路機(jī)、復(fù)壓投入幾臺(tái)設(shè)備、不同階段的碾壓段落長(zhǎng)度控制,以及壓實(shí)樁號(hào)左右幅信息,甚至是現(xiàn)場(chǎng)等候卸料的運(yùn)輸車數(shù)量。基于物聯(lián)采集數(shù)據(jù)驅(qū)動(dòng)施工場(chǎng)景內(nèi)的機(jī)械模型,可以達(dá)到身臨其境的真實(shí)效果,見圖7。

圖7 路面施工樁號(hào)位置、機(jī)械數(shù)量等工藝信息

4.4 路面施工工藝數(shù)據(jù)分析

路面施工的均勻性是工程質(zhì)量管理的重要環(huán)節(jié),三維動(dòng)態(tài)展示平臺(tái)根據(jù)柵格圖形化的道路模型內(nèi)繪制出壓路機(jī)的軌跡點(diǎn)陣,通過(guò)兩邊對(duì)稱的原則,計(jì)算繪制出壓路機(jī)的壓實(shí)遍數(shù)、碾壓軌跡、碾壓工作范圍與面積,并在柵格圖形化的道路模型中繪制出帶有顏色屬性與面積屬性的新碾壓軌跡。用戶可以對(duì)不同碾壓遍數(shù)自定義顏色,如2遍以內(nèi)為綠色、3～4遍為黃色、5～6遍為紅色,等等。在三維施工場(chǎng)景中即可快速查閱出路面壓實(shí)施工質(zhì)量的均勻性,見圖8,以及不同樁號(hào)位置的碾壓遍數(shù)數(shù)值,從而可以對(duì)路面施工工藝數(shù)據(jù)進(jìn)行分析。

圖8 顏色直觀反饋路面壓實(shí)的均勻度

5 結(jié)語(yǔ)

介紹了路面施工三維動(dòng)態(tài)展示平臺(tái)的開發(fā)及應(yīng)用效果,得出以下結(jié)論:

(1)基于物聯(lián)網(wǎng)技術(shù)可以實(shí)現(xiàn)路面施工的前后場(chǎng)施工狀態(tài)、進(jìn)度、質(zhì)量的信息化管理,進(jìn)行實(shí)時(shí)監(jiān)控、遠(yuǎn)程傳輸和數(shù)據(jù)協(xié)同分析。

(2)WebGL作為新興的Web技術(shù)應(yīng)用于工程建設(shè)三維場(chǎng)景模擬,采用B/S結(jié)構(gòu),用戶無(wú)需安裝任何插件或客戶端軟件,在常規(guī)瀏覽器即可登陸,克服了跨平臺(tái)的兼容性問(wèn)題。用戶可以從不同角度放大、縮小查看模型,全方位多角度地查看路面施工現(xiàn)場(chǎng),具有良好的交互性和體驗(yàn)效果。

(3)運(yùn)用WebGL技術(shù)的ThreeJS引擎構(gòu)建三維交互平臺(tái)并加載路面施工各類機(jī)械模型,在網(wǎng)頁(yè)端查看路面施工三維場(chǎng)景,物聯(lián)采集數(shù)據(jù)驅(qū)動(dòng)模型變換移動(dòng),形成更為逼真的道路施工場(chǎng)景,為路面施工信息管理系統(tǒng)建設(shè)帶來(lái)新思路。