董忠波 李富年 杜榮武

摘? 要： 針對橋梁健康監(jiān)測系統(tǒng)直觀、高效的業(yè)務(wù)需求，研究當(dāng)前的工業(yè)監(jiān)測系統(tǒng)模式，提出了融合虛擬現(xiàn)實技術(shù)的橋梁監(jiān)測系統(tǒng)的設(shè)計方案。該系統(tǒng)能夠應(yīng)用開源框架Three.js對橋梁信息進(jìn)行三維可視化監(jiān)測顯示，全方位展現(xiàn)橋梁內(nèi)外部結(jié)構(gòu)，并結(jié)合傳感器的實時數(shù)據(jù)實時反映其當(dāng)前健康狀態(tài);為優(yōu)化Web系統(tǒng)實時訪問監(jiān)測數(shù)據(jù)的速度，提出實時和歷史數(shù)據(jù)分離的二層數(shù)據(jù)存儲結(jié)構(gòu)。實踐應(yīng)用結(jié)果表明，以Web3D模型為主，多層數(shù)據(jù)分離存儲為輔的監(jiān)測系統(tǒng)，可以對橋梁監(jiān)測數(shù)據(jù)高效地、直觀地呈現(xiàn)以及預(yù)警，對橋梁管養(yǎng)單位分析、維護(hù)橋梁健康情況具有重要意義。

關(guān)鍵詞： 橋梁健康監(jiān)測; 虛擬現(xiàn)實技術(shù); 預(yù)警; 數(shù)據(jù)顯示; 數(shù)據(jù)存儲; 數(shù)據(jù)分離

中圖分類號： TN911?34; TP311.1? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識碼： A? ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2019）16?0044?05

0? 引? 言

隨著我國經(jīng)濟(jì)的快速發(fā)展，交通基礎(chǔ)設(shè)施也隨之迅猛增加，橋梁在交通運行中起到了不可替代的作用，其健康狀態(tài)不容忽視[1?2]。目前，橋梁管理單位多采用人工巡檢的方式來對橋梁出現(xiàn)的不利情況依據(jù)定期數(shù)據(jù)采集進(jìn)行描述，但是對橋梁健康的病變規(guī)律和其根本原因不能做確切的分析，這直接影響到橋梁的日常安全運營。隨著物聯(lián)網(wǎng)技術(shù)迅速發(fā)展，使得橋梁的監(jiān)測技術(shù)也日新月異。通過在橋梁上布置不同種類的傳感器，實時采集數(shù)據(jù)并進(jìn)行統(tǒng)計分析，能給出及時預(yù)警以及防護(hù)措施。為了精確反應(yīng)橋梁的結(jié)構(gòu)動力特性，監(jiān)測系統(tǒng)需要直觀反映橋梁結(jié)構(gòu)特點以及安裝的各種傳感器的位置特性。傳統(tǒng)的監(jiān)控系統(tǒng)大多以二維平面為主，常用二維圖紙或者繪制相關(guān)的SVG（Scalable Vector Graphics）可縮放矢量圖形來展示橋梁的結(jié)構(gòu)。這種方式需要大量全方位的平面圖來展示整個橋梁的結(jié)構(gòu)，但是在監(jiān)測的過程中難以在平面上直觀地定位監(jiān)測點。目前，虛擬現(xiàn)實、三維立體模型技術(shù)的迅速發(fā)展，使得應(yīng)用三維技術(shù)對橋梁信息的可視化監(jiān)測成為更直觀、更科學(xué)的管理方式[3]。本文結(jié)合橋梁監(jiān)測和維護(hù)的實際需求，將虛擬現(xiàn)實技術(shù)融合到橋梁結(jié)構(gòu)監(jiān)測系統(tǒng)，采用主流的Web3D圖形化技術(shù)全方位地展現(xiàn)橋梁內(nèi)外部結(jié)構(gòu)，結(jié)合各監(jiān)測點的數(shù)據(jù)實時反映橋梁各構(gòu)件的當(dāng)前健康狀態(tài)，為橋梁監(jiān)測、預(yù)警以及維護(hù)提供依據(jù)。

1? 虛擬現(xiàn)實和Web3D技術(shù)

1.1 虛擬現(xiàn)實技術(shù)

虛擬現(xiàn)實技術(shù)是將數(shù)字圖像處理、計算機圖形學(xué)、多媒體技術(shù)、傳感器技術(shù)等多個信息技術(shù)融合為一體的一門嶄新的綜合性信息技術(shù)[4]。這項技術(shù)最早是由美國VPL公司的Jaron Lanier 提出，已廣泛運用于軍事、工業(yè)、 醫(yī)療、教育、農(nóng)業(yè)等各個領(lǐng)域[5]。基于Internet的三維虛擬現(xiàn)實技術(shù)由于不受地域和時間的限制，其應(yīng)用也越來越普及。網(wǎng)絡(luò)三維虛擬現(xiàn)實技術(shù)主要是通過Web3D 技術(shù)實現(xiàn)的，Web3D技術(shù)主要是指在互聯(lián)網(wǎng)絡(luò)的基礎(chǔ)上，開發(fā)出來的能夠?qū)崿F(xiàn)三維虛擬現(xiàn)實效果的一種技術(shù)，其核心在于其模型的設(shè)計和功能的交互。

1.2? Web3D技術(shù)的現(xiàn)狀

當(dāng)前Web3D技術(shù)的研究和應(yīng)用較為主流的解決方案有Java3D，F(xiàn)lash3D，VRML和Cult3D等， 但這些方案普遍存在開發(fā)效率低、兼容性差、不直接支持硬件加速、需要插件安裝等問題[6]。為了解決這些問題，一種基于HTML5和WebGL的設(shè)計方案逐漸受到關(guān)注。WebGL則是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)通過增加OpenGL ES 2.0的一個JavaScript綁定，可以為HTML5 Canvas提供硬件3D加速渲染，這樣開發(fā)者就可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場景和模型。WebGL的特點主要包括：通過JavaScript腳本本身實現(xiàn)Web交互式三維動畫的制作，無需任何瀏覽器插件支持;利用底層的圖形硬件加速功能進(jìn)行圖形渲染，實現(xiàn)了統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺的OpenGL接口[7?8]。

盡管WebGL所提供的各種接口非常豐富且強大，但其在創(chuàng)建三維圖形和動畫時非常繁瑣，且對于用戶使用過于復(fù)雜。為了減小開發(fā)難度，同時構(gòu)建高等級、用戶界面友好的WebGL開發(fā)環(huán)境，許多基于WebGL的框架，如SceneJS，PhiloGL，Three.js[9?10]等應(yīng)運而生。其中，SceneJS的API數(shù)據(jù)類型和JSON相似，開發(fā)難度小;PhiloGL對于WebGL接口的封裝不完全，導(dǎo)致使用PhiloGL開發(fā)時，開發(fā)者需要熟悉底層WebGL技術(shù)，增加了開發(fā)困難;Three.js比SceneJS量級更輕，支持多種數(shù)據(jù)類型（JSON，3DS，VTK，OBJ等），同時以簡單直觀的方式封裝了3D圖形編程中常用的對象，增加了很多圖形引擎的高級技巧，極大地提高了顯示性能，從而減輕了開發(fā)者的開發(fā)難度并提高了開發(fā)速率。因此，本文選擇Three.js框架來實現(xiàn)三維橋梁模型的開發(fā)。

2? 監(jiān)測系統(tǒng)總體架構(gòu)

橋梁監(jiān)測系統(tǒng)的邏輯層主要包括數(shù)據(jù)采集端和數(shù)據(jù)發(fā)布端，如圖1所示。在數(shù)據(jù)采集端，采集程序?qū)⒃紓鞲衅鲾?shù)據(jù)存儲到原始實時數(shù)據(jù)表中。為了方便歷史數(shù)據(jù)的查詢和分析，利用數(shù)據(jù)處理轉(zhuǎn)儲接口，定時將原始數(shù)據(jù)和預(yù)處理后的數(shù)據(jù)備份存儲到中心數(shù)據(jù)庫。數(shù)據(jù)發(fā)布端則主要負(fù)責(zé)數(shù)據(jù)的備份和數(shù)據(jù)發(fā)布，并與Web服務(wù)器進(jìn)行交互。Web服務(wù)器作為中間橋梁，將用戶和中心數(shù)據(jù)庫連接起來。Web數(shù)據(jù)管理系統(tǒng)接收到終端用戶的HTTP請求后與后端的中心數(shù)據(jù)庫進(jìn)行交互，并把數(shù)據(jù)通過HTTP回應(yīng)給終端用戶。

橋梁監(jiān)測系統(tǒng)功能如圖2所示，主要包含：

1） 用戶權(quán)限和日志，按照運營管理原則，給每個用戶授予不同的操作權(quán)限，保證數(shù)據(jù)的安全;

2） 數(shù)據(jù)子采集系統(tǒng)，對接收到的原始數(shù)據(jù)進(jìn)行初步處理，得到監(jiān)測數(shù)據(jù);

3） 虛擬現(xiàn)實監(jiān)測子系統(tǒng)，采用3D模型展示橋梁結(jié)構(gòu)，提供全方位的視角進(jìn)行監(jiān)測;

4） 數(shù)據(jù)分析子系統(tǒng)，分析采集的數(shù)據(jù)，將結(jié)果反饋到3D模塊;

5） 擴(kuò)展模塊，由于手持終端軟件客戶端同樣采用B/S模式，其數(shù)據(jù)的訪問和控制與本系統(tǒng)框架完全一樣，因此這種擴(kuò)展功能模塊可以平滑過渡，做到無縫連接。

在橋梁的健康監(jiān)測中，需要各種類型的大量傳感器通過高頻（如50 Hz）數(shù)據(jù)采集來綜合測評橋梁的安全指數(shù)，如加速度、應(yīng)力、傾角變化量等。面對這些海量數(shù)據(jù)，為保證系統(tǒng)的健壯性，在設(shè)計該監(jiān)測系統(tǒng)時需從以下兩方面考慮：

1） 數(shù)據(jù)的存儲問題，以單個傳感器為例，利用50 Hz的高頻采集，每天的數(shù)據(jù)量可達(dá)432萬條，傳統(tǒng)的方式大多將數(shù)據(jù)分類和分區(qū)來存儲，但隨著時間的推移，數(shù)據(jù)庫中單表數(shù)據(jù)量的增大必然導(dǎo)致其實時監(jiān)控性能有所下降。

2） 傳感器在監(jiān)測系統(tǒng)中的直觀顯示，在實際的監(jiān)測中，相同類型的傳感器數(shù)量多，且分布在橋梁的不同位置上，傳統(tǒng)的方式是給傳感器命名和文字描述來確定其監(jiān)測位置，在監(jiān)測系統(tǒng)中同樣通過其描述來確定該傳感器在橋上的具體位置。這種方式在傳感器量少的情況下可以達(dá)到監(jiān)測的目的，并且要求監(jiān)測人員對橋梁的結(jié)構(gòu)有清晰的認(rèn)知。

為解決橋梁監(jiān)測匯總的這兩個重要因素，本文將從數(shù)據(jù)庫和各監(jiān)測點的直觀呈現(xiàn)來優(yōu)化監(jiān)測系統(tǒng)，使得系統(tǒng)能更穩(wěn)定、直觀。

3? 系統(tǒng)軟件設(shè)計

3.1? 數(shù)據(jù)庫的設(shè)計

針對數(shù)據(jù)采集過程中速率快以及數(shù)量大等問題，本文采用Oracle 11g R2作為系統(tǒng)的存儲數(shù)據(jù)庫。為保證Web服務(wù)器總是快速地讀取到最新的監(jiān)測數(shù)據(jù)，通過在數(shù)據(jù)庫中創(chuàng)建兩個表：一個稱為實時表;一個稱為歷史表。兩個表的結(jié)構(gòu)一致，數(shù)據(jù)采集程序?qū)?shù)據(jù)通過串口直接存儲到實時表中，采用Oracle的定時任務(wù)機制和其存儲過程，每間隔10 min，將實時表中的數(shù)據(jù)復(fù)制到歷史表中，并將已復(fù)制的數(shù)據(jù)在實時表中刪除，這樣實時表中的數(shù)據(jù)最多只存儲10 min的數(shù)據(jù)。以50 Hz為例，實時表最多存儲3萬條數(shù)據(jù)，該數(shù)量級對于Web服務(wù)器的讀取非常迅速。這樣設(shè)計降低了因查詢數(shù)據(jù)的時間而使得實時監(jiān)測的延遲，其原理如圖3所示。對于歷史數(shù)據(jù)的查詢，Oracle還提供了分區(qū)設(shè)計和建立索引的方式來提高查詢速率，針對歷史表，采用每天一個分區(qū)，根據(jù)數(shù)據(jù)的采集時間建立索引，以保證歷史數(shù)據(jù)查詢的效率。

3.2? Web3D橋梁的設(shè)計

在橋梁監(jiān)測系統(tǒng)的服務(wù)中，3D橋梁模塊是本系統(tǒng)的重要設(shè)計流程，本文將3D橋梁模型作為其所有監(jiān)測功能的入口，以直觀地呈現(xiàn)傳感器在橋梁上的分布情況以及各監(jiān)測點的實時監(jiān)測數(shù)據(jù)。通過Three.js創(chuàng)建一個有效的場景包括渲染器（Renderer）、場景（Scene）、照相機（Camera），以及場景中創(chuàng)建的物體（Object）等，渲染結(jié)構(gòu)如圖4所示。

Web場景中橋梁的3D模型設(shè)計主要分為兩步：首先，使用3D模型制作軟件3ds MAX制作橋梁的基礎(chǔ)3D模型，生成模型數(shù)據(jù)文件;然后，通過Three.js向Web系統(tǒng)導(dǎo)入模型文件，調(diào)整模型的位置以及在橋梁上對應(yīng)監(jiān)測點嵌入傳感器等，并鏈接實時數(shù)據(jù)查詢、斷面結(jié)構(gòu)圖等功能模塊。設(shè)計的詳細(xì)流程如圖5所示。

3.2.1? 創(chuàng)建渲染器、場景和相機

渲染是圖形在屏幕上的繪制過程，主要用來渲染3D模型。Three.js提供了豐富的渲染器選擇，不同渲染器渲染的效果有所不同，本文采用Three.js提供的WebGL類型渲染器，創(chuàng)建渲染器后，還需要設(shè)置渲染器的像素比、陰影模式以及渲染器的大小等相關(guān)因素。

場景即3D模型所需要放置的位置，任何的3D對象需要在添加場景中經(jīng)過渲染才能顯示，相機決定哪些對象將要渲染。在Three.js中，相機的類型主要有正交相機（Orthographic Camera）、透視相機（Perspective Camera）、全景相機（Cube Camera）和3D相機（StereoCamera）。其中，正交相機的效果類似設(shè)計圖，重在表現(xiàn)物體的實際尺寸，沒有近小遠(yuǎn)大的效果;透視相機拍攝的效果類似人眼所見，有近小遠(yuǎn)大的效果;全景相機就是360°拍攝的相機;3D相機是用兩個不同位置的透視相機同時拍攝，將拍攝的結(jié)果合成為一個畫面。在3D的開發(fā)中，透視相機最符合人們的觀察習(xí)慣，因此本文設(shè)計時選擇透視相機。透視相機的原理如圖6所示。

3.2.2? 導(dǎo)入3D模型，添加傳感器示意模型

在3ds MAX繪制好模型后，將模型導(dǎo)出為OBJ和MTL格式的文件。OBJ是一種開放的幾何定義文件格式，它僅表現(xiàn)3D幾何體，即各頂點的位置;MTL文件則是OBJ附屬文件，用以描述幾何體的表面屬性，其主要作用是給模型添加材質(zhì)，即模型上的貼圖、紋理等。Three.js中提供了OBJ Loader和MTL Loader的接口，分別可以加載對應(yīng)的文件，在加載的過程中，由于模型的材質(zhì)屬性等較多，可先預(yù)加載MTL文件來提高加載的效率。

4? 應(yīng)用效果

在橋梁3D模型結(jié)構(gòu)設(shè)計步驟完成后，通過渲染場景，即可顯示所設(shè)計的橋梁模型，如圖7所示。通過Three.js加載后的橋梁模型，可通過旋轉(zhuǎn)、拖拽、放大或縮小來查看橋梁的全方位信息，如橋梁的正視圖、背面圖、俯視圖以及橋面的平視圖等。

查看橋梁上某具體傳感器信息如圖8所示。通過鼠標(biāo)滑過橋梁上嵌入的傳感器，可在左上區(qū)域顯示該傳感器的基本信息和實時數(shù)據(jù)，當(dāng)實時數(shù)據(jù)達(dá)到預(yù)警值時，該處的傳感器會閃爍預(yù)警。右側(cè)的控制面板可提示操作信息，包括模型的旋轉(zhuǎn)、縮放、拖拽等，還可選取傳感器類型，使其在橋梁上顯示或者隱藏。

為方便用戶進(jìn)行數(shù)據(jù)分析，本系統(tǒng)還設(shè)計了二維的平面信息展示頁面，通過在3D模型點擊相應(yīng)的截面快捷通道，可跳轉(zhuǎn)到相應(yīng)的截面信息頁面，如圖9所示。在該頁面可選擇選中截面中包含的傳感器，提供查看實時數(shù)據(jù)、歷史數(shù)據(jù)、數(shù)據(jù)的幅頻特性分析以及該傳感器的現(xiàn)場布置圖等，經(jīng)測試，在查看其實時數(shù)據(jù)曲線時，數(shù)據(jù)的延遲在5～10 s內(nèi)。

5? 結(jié)? 語

本文設(shè)計了基于Web3D虛擬現(xiàn)實技術(shù)的橋梁監(jiān)測系統(tǒng)。針對監(jiān)測數(shù)據(jù)的特點，設(shè)計實時數(shù)據(jù)和歷史數(shù)據(jù)分離的存儲方式，優(yōu)化了系統(tǒng)對海量數(shù)據(jù)的訪問速度，從而提高了系統(tǒng)的監(jiān)測實時性。在橋梁的3D可視化設(shè)計方面，采用功能強、開發(fā)效率高的Three.js框架來實現(xiàn)，系統(tǒng)不依賴于運行環(huán)境，無需任何插件或第三方工具軟件的支持，降低了部署和維護(hù)成本。在功能方面，包含3D模型的基本操作、監(jiān)測點的直觀顯示、數(shù)據(jù)的基礎(chǔ)分析以及預(yù)警等，并能根據(jù)實際情況將系統(tǒng)進(jìn)行拓展。該系統(tǒng)已成功地部署在了某高校人行天橋上，對于橋梁管養(yǎng)人員實時監(jiān)測、評估大橋的結(jié)構(gòu)狀態(tài)和維護(hù)橋梁的安全等具有很大的幫助。

參考文獻(xiàn)

[1] 李志鵬.橋梁健康監(jiān)測數(shù)據(jù)可視化系統(tǒng)設(shè)計與實現(xiàn)[D]. 重慶：重慶大學(xué)，2016.

LI Zhipeng. Design and implementation of bridge health monitoring data visualization systems [D]. Chongqing：Chongqing University，2016.

[2] 李志紅.交通道路橋梁的病害與維護(hù)分析[J].工程技術(shù)，2016（29）：145.

LI Zhihong. Analysis of diseases and maintenance of traffic roads and bridges [J]. Engineering technology， 2016（29）： 145.

[3] 吳桐桐，周國輝.基于虛擬現(xiàn)實的三維建模技術(shù)的研究[J].智能計算機與應(yīng)用，2016，6（2）：113?115.

WU Tongtong， ZHOU Guohui. Research of visual reality 3D modeling technology [J]. Intelligent computer & applications， 2016， 6（2）： 113?115.

[4] 胡偉，李兵.基于Web3D的虛擬現(xiàn)實技術(shù)的對比研究與分析[J].湖南第一師范學(xué)院學(xué)報，2012，12（4）：121?124.

HU Wei， LI Bing. A comparative study of virtual reality technology based on Web3D [J]. Journal of Huan First Normal University， 2012， 12（4）： 121?124.

[5] 羅演，黃紅星，李靜紅.基于Web3D虛擬現(xiàn)實技術(shù)在農(nóng)業(yè)技術(shù)推廣中的前景分析[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2014（5）：25?29.

LUO Yan， HUANG Hongxing， LI Jinghong. The application prospect of Web3D virtual reality technology in agricultural technology extension [J]. Agriculture network information， 2014（5）： 25?29.

[6] 卞敏捷，高玨，高洪皓，等.Web3D可視化技術(shù)的研究與應(yīng)用[J].計算機技術(shù)與發(fā)展，2015（6）：141?144.

BIAN M J， GAO J， GAO H H， et al. Research and application of Web3D visualization technology [J]. Computer technology & development， 2015（6）： 141?144.

[7] 李連民，翟陽陽.基于WebGL的汽車3D展示系統(tǒng)的創(chuàng)建[J].電子技術(shù)與軟件工程，2017（11）：72.

LI Lianmin， ZHAI Yangyang. Creation of auto 3D display system based on WebGL [J]. Electronic technology & software engineering， 2017（11）： 72.

[8] KIM K S， LEE K W. Visualization of 3D terrain information on smartphone using HTML5 WebGL [J]. Korean journal of remote sensing， 2012， 28（2）： 245?253.

[9] 王騰飛，劉俊男，周更新.基于Three.js 3D引擎的三維網(wǎng)頁實現(xiàn)與加密[J].企業(yè)技術(shù)開發(fā)，2014，33（1）：79?80.

WANG Tengfei， LIU Junnan， ZHOU Gengxin. 3D web page implementation and encryption based on Three.js 3D engine [J]. Technological development of enterprise， 2014， 33（1）： 79?80.

[10] DIRKSEN Jos. Learning Three.js開發(fā)指南：WebGL的JavaScript 3D庫[M].北京：機械工業(yè)出版社，2015.

DIRKSEN J. Learning Three.js： The JavaScript 3D library for WebGL [M]. Beijing： Mechanical Industry Press， 2015.