融合虛擬現實技術的橋梁監測系統設計與實現

董忠波 李富年 杜榮武

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

關鍵詞： 橋梁健康監測; 虛擬現實技術; 預警; 數據顯示; 數據存儲; 數據分離

中圖分類號： TN911?34; TP311.1? ? ? ? ? ? ? ? ? ? ?文獻標識碼： A? ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2019）16?0044?05

0? 引? 言

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

1? 虛擬現實和Web3D技術

1.1 虛擬現實技術

虛擬現實技術是將數字圖像處理、計算機圖形學、多媒體技術、傳感器技術等多個信息技術融合為一體的一門嶄新的綜合性信息技術[4]。這項技術最早是由美國VPL公司的Jaron Lanier 提出，已廣泛運用于軍事、工業、 醫療、教育、農業等各個領域[5]?；贗nternet的三維虛擬現實技術由于不受地域和時間的限制，其應用也越來越普及。網絡三維虛擬現實技術主要是通過Web3D 技術實現的，Web3D技術主要是指在互聯網絡的基礎上，開發出來的能夠實現三維虛擬現實效果的一種技術，其核心在于其模型的設計和功能的交互。

1.2? Web3D技術的現狀

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

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

2? 監測系統總體架構

橋梁監測系統的邏輯層主要包括數據采集端和數據發布端，如圖1所示。在數據采集端，采集程序將原始傳感器數據存儲到原始實時數據表中。為了方便歷史數據的查詢和分析，利用數據處理轉儲接口，定時將原始數據和預處理后的數據備份存儲到中心數據庫。數據發布端則主要負責數據的備份和數據發布，并與Web服務器進行交互。Web服務器作為中間橋梁，將用戶和中心數據庫連接起來。Web數據管理系統接收到終端用戶的HTTP請求后與后端的中心數據庫進行交互，并把數據通過HTTP回應給終端用戶。

橋梁監測系統功能如圖2所示，主要包含：

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

2） 數據子采集系統，對接收到的原始數據進行初步處理，得到監測數據;

3） 虛擬現實監測子系統，采用3D模型展示橋梁結構，提供全方位的視角進行監測;

4） 數據分析子系統，分析采集的數據，將結果反饋到3D模塊;

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

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

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

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

為解決橋梁監測匯總的這兩個重要因素，本文將從數據庫和各監測點的直觀呈現來優化監測系統，使得系統能更穩定、直觀。

3? 系統軟件設計

3.1? 數據庫的設計

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

3.2? Web3D橋梁的設計

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

Web場景中橋梁的3D模型設計主要分為兩步：首先，使用3D模型制作軟件3ds MAX制作橋梁的基礎3D模型，生成模型數據文件;然后，通過Three.js向Web系統導入模型文件，調整模型的位置以及在橋梁上對應監測點嵌入傳感器等，并鏈接實時數據查詢、斷面結構圖等功能模塊。設計的詳細流程如圖5所示。

3.2.1? 創建渲染器、場景和相機

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

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

3.2.2? 導入3D模型，添加傳感器示意模型

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

4? 應用效果

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

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

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

5? 結? 語

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

參考文獻

[1] 李志鵬.橋梁健康監測數據可視化系統設計與實現[D]. 重慶：重慶大學，2016.

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

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

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

[3] 吳桐桐，周國輝.基于虛擬現實的三維建模技術的研究[J].智能計算機與應用，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的虛擬現實技術的對比研究與分析[J].湖南第一師范學院學報，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虛擬現實技術在農業技術推廣中的前景分析[J].農業網絡信息，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可視化技術的研究與應用[J].計算機技術與發展，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展示系統的創建[J].電子技術與軟件工程，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引擎的三維網頁實現與加密[J].企業技術開發，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開發指南：WebGL的JavaScript 3D庫[M].北京：機械工業出版社，2015.

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