基于WebGL的智能樓宇可視化系統(tǒng)關(guān)鍵技術(shù)研究

葉 濤，周宇清

（武漢理工大學(xué) 機(jī)電工程學(xué)院，武漢430070）

隨著越來越多的智能設(shè)備運(yùn)用于樓宇系統(tǒng)中，樓宇系統(tǒng)的信息愈加多樣化，系統(tǒng)之間的相互連通也越來越緊密。 因此，在智能樓宇中運(yùn)用將各子系統(tǒng)建立起協(xié)同關(guān)系的樓宇三維可視化系統(tǒng)，能夠最大限度地將樓宇宏觀設(shè)施管理數(shù)據(jù)、微觀數(shù)據(jù)細(xì)節(jié)化，提升樓宇運(yùn)營維護(hù)的效率。

針對智能樓宇運(yùn)維管理過程中，故障設(shè)備定位困難，監(jiān)控數(shù)據(jù)不形象、不直觀等問題，在此采用WebGL 技術(shù)設(shè)計實現(xiàn)了智能樓宇的三維可視化系統(tǒng)。 利用該系統(tǒng)，設(shè)備管理人員可以通過瀏覽器終端了解樓宇系統(tǒng)各子系統(tǒng)的實際運(yùn)行狀態(tài)和數(shù)據(jù)，還可以在三維場景中與關(guān)鍵設(shè)備進(jìn)行交互，極大地提高了運(yùn)維管理的效率和體驗。

1 系統(tǒng)總體方案設(shè)計

1.1 WebGL 繪制3D 模型

WebGL（Web Graphics Library）是一種3D 繪圖協(xié)議[1]。 它結(jié)合了JavaScript 和OpenGL，可以利用圖形處理器GPU（graphics processing unit）為HTML5 Canvas 進(jìn)行3D 加速渲染。 該技術(shù)相較于傳統(tǒng)的Web3D 技術(shù)更輕量化，無需依賴其他插件[2]。WebGL繪制3D 模型的流程如圖1所示。

圖1 WebGL 繪制3D 模型過程Fig.1 WebGL drawing 3D model process

1.2 3D 引擎工具Three.js

WebGL 的底層實現(xiàn)基于OpenGL，要求開發(fā)者對圖形學(xué)有很深入的了解，開發(fā)效率較低。

為解決這一問題，出現(xiàn)了基于JavaScript 語言的框架Three.js[3]。 Three.js 是一個輕量級的JavaScript腳本，封裝了底層的圖形接口，是比較優(yōu)秀的WebGL框架。 Three.js 中最重要的3 個概念是渲染器、照相機(jī)和場景[4]。 Three.js 渲染框架如圖2所示。

1.3 系統(tǒng)的結(jié)構(gòu)組成

智能樓宇可視化系統(tǒng)在原有的樓宇自動化系統(tǒng)[5]框架上加入三維場景，使得樓宇機(jī)電設(shè)備的管理運(yùn)維工作可以在一個虛擬現(xiàn)實的計算機(jī)環(huán)境中完成。

圖2 Three.js 渲染框架Fig.2 Three.js rendering framework

所提出的智能樓宇可視化系統(tǒng)采用B/S 模式設(shè)計，用戶可以直接在瀏覽器上通過輸入地址進(jìn)行訪問，使用極為便利。該系統(tǒng)的結(jié)構(gòu)組成如圖3所示。

由圖可見，智能樓宇的可視化系統(tǒng)分為數(shù)據(jù)存儲層、數(shù)據(jù)處理層和三維展示層。

1）數(shù)據(jù)存儲層 主要使用mysql 數(shù)據(jù)庫儲存用戶數(shù)據(jù)和采集到的警告信息，使用influx DB 數(shù)據(jù)庫儲存存儲設(shè)備相關(guān)的設(shè)備信息、關(guān)聯(lián)方式與時間戳。

圖3 智能樓宇可視化系統(tǒng)的結(jié)構(gòu)組成Fig.3 Structure composition of intelligent building visualization system

2）數(shù)據(jù)處理層 主要使用node.js 框架對數(shù)據(jù)進(jìn)行處理分析以及業(yè)務(wù)邏輯的實現(xiàn)。

3）三維展示層 主要使用Three.js 框架和HTML5技術(shù)完成對3D 場景的渲染和UI 界面的設(shè)計，通過對BIM 模型的輕量化和改進(jìn)的渲染算法解決加載大量3D 模型時瀏覽器加載緩慢的情況。

2 系統(tǒng)的功能設(shè)計

智能樓宇可視化系統(tǒng)主要包括3 個功能模塊：設(shè)備管理模塊、3D 場景漫游模塊，以及遠(yuǎn)程控制模塊。 該系統(tǒng)的功能結(jié)構(gòu)如圖4所示。

圖4 系統(tǒng)的功能結(jié)構(gòu)框圖Fig.4 System function structure block diagram

1）設(shè)備管理模塊 用戶可以查看機(jī)電設(shè)備的基本屬性信息，可以根據(jù)大樓內(nèi)部的監(jiān)測參數(shù)和各個設(shè)備運(yùn)行數(shù)據(jù)的統(tǒng)計分析大樓內(nèi)各個系統(tǒng)的運(yùn)行狀態(tài)，還可以查閱大樓各系統(tǒng)、各模塊相關(guān)的圖檔和圖表。

2）3D 場景漫游模塊 用戶可以在PC 端和移動端分別通過鼠標(biāo)、手勢來完成對整個場景的移動、旋轉(zhuǎn)、縮放、模型聚焦操作，從而滿足用戶360°查看場景的需要，給用戶帶來良好的互動感和沉浸感。

3）遠(yuǎn)程控制模塊 用戶可以通過二維控制頁面遠(yuǎn)程操作相關(guān)設(shè)備的啟停情況，還可以遠(yuǎn)程對設(shè)備的報警信息進(jìn)行處理。

3 系統(tǒng)的關(guān)鍵技術(shù)研究

建筑信息模型BIM（building information modeling）是一種三維數(shù)字技術(shù)，能夠?qū)⒔ㄖ椖咳芷谥懈鱾€不同階段的工程信息和項目資源集成在一個信息化模型中，建立虛擬的建筑三維工程模型，能夠與智能樓宇領(lǐng)域很好地結(jié)合起來。

在此采用在建筑領(lǐng)域常用的Revit 軟件，對智能樓宇相關(guān)建筑、機(jī)電管線和機(jī)電設(shè)備進(jìn)行了三維建模，得到了相應(yīng)的樓宇BIM 模型。

3.1 模型的加載與輕量化

由于WebGL 對一般的Revit 文件無法直接支持，因此需要轉(zhuǎn)換成其他格式的中間數(shù)據(jù)文件才能實現(xiàn)在Web 端的展示，而且在BIM 模型構(gòu)建階段中，模型在不停地進(jìn)行優(yōu)化與完善，大量的數(shù)據(jù)被保存而形成一個可供查詢和使用的巨大數(shù)據(jù)庫。 對于系統(tǒng)的運(yùn)維階段而言，該數(shù)據(jù)庫中大部分信息不會被使用，對于整個系統(tǒng)來說是冗余的，在進(jìn)行渲染時可能會消耗大量的瀏覽器資源，故需要對這部分?jǐn)?shù)據(jù)進(jìn)行篩選，舍去相對不重要的數(shù)據(jù)，實現(xiàn)BIM模型的輕量化[7]。 中間文件數(shù)據(jù)結(jié)構(gòu)如圖5所示。

圖5 中間文件數(shù)據(jù)結(jié)構(gòu)Fig.5 Intermediate file data structure

模型的幾何數(shù)據(jù)通過轉(zhuǎn)換，將數(shù)字坐標(biāo)數(shù)據(jù)轉(zhuǎn)化為二進(jìn)制數(shù)據(jù)儲存到.mesh 后綴的文件中，減少了文件數(shù)據(jù)大小，也加快了文件讀取速率。.world 后綴文件實質(zhì)是.xml 格式文件，由于其表示方法簡單，使存儲于其中的數(shù)據(jù)更容易被讀取和解析，更容易對虛擬空間進(jìn)行描述。 .world 文件主要描述了場景中的模型名稱、模型mesh 文件的url 地址、模型材質(zhì)、模型空間坐標(biāo)、模型ID、模型類型和相機(jī)坐標(biāo)。 world 文件的格式如圖6所示。

圖6 world 文件格式Fig.6 world file format

對于模型中關(guān)鍵構(gòu)件的的屬性信息提取，通過遍歷revit 文件中的指定構(gòu)件，將實例屬性與實例類型屬性一起存放在params 文件中，.params 后綴文件實質(zhì)是輕量化的json 格式文件。 json 文件數(shù)據(jù)格式簡單，易于讀寫，傳輸效率高[8]。 通過鍵值對的形式把模型與相關(guān)屬性信息關(guān)聯(lián)起來，便于查看系統(tǒng)的模型信息。json 文件的格式如圖7所示，模型的載入展示如圖8所示。

圖7 params 文件格式Fig.7 params file format

圖8 Web 端模型載入展示Fig.8 Web-side model loading display

3.2 模型合并

樓宇系統(tǒng)中存在大量的機(jī)械零件及電器元件等。 這些構(gòu)件數(shù)量過多，會增加模型烘焙時間，降低計算機(jī)運(yùn)行速度等。 所提系統(tǒng)通過對對象進(jìn)行語義判斷，將多個對象進(jìn)行合并，減少了模型數(shù)量，減少了WebGL 渲染管線提交的頂點(diǎn)次數(shù)，從而加快了整個3D 場景的速率。模型合并流程如圖9所示。遍歷系統(tǒng)中為contain 類型的模型，將其頂點(diǎn)數(shù)據(jù)存入數(shù)組，再重新計算頂點(diǎn)索引、uv 索引、材質(zhì)并存入相應(yīng)數(shù)組，通過Three.js 框架的BufferGeometry 函數(shù)進(jìn)行數(shù)據(jù)解析，得到新的geometry，結(jié)合材質(zhì)生成新的Mesh，完成模型合并。

圖9 模型合并流程圖Fig.9 Model merge flow chart

3.3 LoD 優(yōu)化技術(shù)

LoD多細(xì)節(jié)層次（Levels of Detail）技術(shù)[9]的核心思想，是根據(jù)對象到視點(diǎn)的距離以及對象在環(huán)境中的重要度，來決定對象的渲染資源分配，在不影響畫面視覺效果的前提下，通過簡化渲染模型的表面細(xì)節(jié)，從而提高繪制算法的效率。

在系統(tǒng)讀取加載Mesh 的過程中，對不同的模型分類并設(shè)定合理的閾值，遍歷模型的包圍球球心到相機(jī)的距離，設(shè)置模型的visible 屬性，當(dāng)距離小于設(shè)定的閾值，則visible 值變?yōu)閠rue，當(dāng)前模型顯示并渲染，當(dāng)距離大于閾值，則visible 值變?yōu)閒alse，當(dāng)前模型隱藏而不渲染。 這種場景優(yōu)化技術(shù)能夠降低對GPU 的消耗，使整個系統(tǒng)的運(yùn)行更加流暢。 偽代碼描述如下：

4 系統(tǒng)的具體實現(xiàn)

所提出的智能樓宇可視化系統(tǒng)，主要對樓宇自控系統(tǒng)下的光伏發(fā)電模塊、給排水模塊、暖通模塊、照明模塊和報警模塊進(jìn)行三維可視化和監(jiān)控管理。

1）光伏發(fā)電模塊 光伏發(fā)電模塊針對樓宇頂層的光伏發(fā)電系統(tǒng)進(jìn)行三維監(jiān)控。 三維空間展示智能樓宇的光伏發(fā)電相關(guān)設(shè)備，UI 界面主要對逆變器能效、能源回收比、逆變器發(fā)電量、總發(fā)電量進(jìn)行實時展示。 光伏發(fā)電模塊如圖10所示。

圖10 光伏發(fā)電模塊Fig.10 Photovoltaic power generation module

2）給排水模塊 給排水模塊針對樓宇負(fù)二層的給排水系統(tǒng)進(jìn)行三維監(jiān)控。 三維空間展示智能樓宇的給排水系統(tǒng)相關(guān)設(shè)備，包括管道、閥門、無負(fù)壓供水設(shè)備、集水坑排污泵等，UI 界面主要對水泵變頻器頻率、水泵進(jìn)出口壓力進(jìn)行實時展示。 給排水模塊如圖11所示。

圖11 給排水模塊Fig.11 Water supply and drainage system module

3）暖通模塊 暖通模塊針對每一樓層的暖通系統(tǒng)進(jìn)行三維監(jiān)控。 三維空間展示空調(diào)系統(tǒng)、新風(fēng)系統(tǒng)相關(guān)機(jī)電設(shè)備，包括空調(diào)機(jī)組、新風(fēng)機(jī)組、配電設(shè)備等，UI 界面主要對空調(diào)系統(tǒng)啟停狀態(tài)、日耗電量和功率統(tǒng)計進(jìn)行實時展示。 暖通模塊如圖12所示。

圖12 暖通模塊Fig.12 HVAC module

4）照明模塊 照明模塊針對每一樓層的照明系統(tǒng)進(jìn)行三維監(jiān)控。 三維空間展示照明配電柜、照明控制柜和強(qiáng)弱電橋架等三維模型，UI 界面主要對照明系統(tǒng)日耗電量、系統(tǒng)功率進(jìn)行實時展示。 照明模塊如圖13所示。

圖13 照明模塊Fig.13 Lighting module

5）報警模塊 智能樓宇可視化系統(tǒng)具有自動報警的功能，系統(tǒng)會根據(jù)收集到的數(shù)據(jù)信息，并在后臺進(jìn)行分析處理。 當(dāng)設(shè)備出現(xiàn)故障或其他異常時，系統(tǒng)就會及時發(fā)出報警，并將信息匯總到報警模塊。 歷史報警信息如圖14所示。

圖14 歷史報警信息Fig.14 Historical alarm information

5 結(jié)語

將智能樓宇各子系統(tǒng)關(guān)聯(lián)起來，將樓宇運(yùn)維中各種設(shè)備的運(yùn)行狀態(tài)立體地展現(xiàn)給管理者，一直是智能樓宇領(lǐng)域研究的熱點(diǎn)。基于WebGL 技術(shù)設(shè)計了智能樓宇可視化系統(tǒng)。使用該系統(tǒng)可在瀏覽器終端對智能樓宇各子系統(tǒng)進(jìn)行三維模擬仿真，運(yùn)用模型輕量化加載、模型合并和LoD 優(yōu)化的關(guān)鍵技術(shù)，實現(xiàn)了智能樓宇光伏發(fā)電模塊、給排水模塊、暖通模塊、照明模塊和報警模塊各設(shè)備的運(yùn)行數(shù)據(jù)的立體展示，從而使樓宇運(yùn)維管理者具有良好的交互感和沉浸感。