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

唐建亞

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

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

1 WebGL技術

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

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

2 平臺系統(tǒng)架構設計

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

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

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

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

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

3 關鍵技術研究

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

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

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

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

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

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

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

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

3.2 基于WebGL的模型渲染技術

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

圖2 模型渲染流程圖

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

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

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

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

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

圖3 物聯(lián)設備與機械模型對應表

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

4 平臺功能

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

4.1 路面施工BIM模型查看

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

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

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

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

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

4.3 路面施工工藝模擬

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

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

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

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

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

5 結語

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

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

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

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