基于Three.js 的鐵路數據中心運維數據可視化系統設計

樂建煒，孫遠運，宋燕蓉，喬晶鑫，春 玲

（1.中國鐵路信息科技集團有限公司，北京 100844；2.中國國家鐵路集團有限公司 科技與信息化部，北京 100844；3.中鐵信弘遠（北京）軟件科技有限責任公司，北京 100038）

隨著鐵路信息化事業的不斷發展，中國國家鐵路集團有限公司（簡稱：國鐵集團）和各鐵路局集團公司數據中心的設備及應用的數量快速增長，運維工作范圍和工作量迅速增加，現有的運維監控系統逐漸暴露出監控功能單一、信息共享不及時、可視化程度低的弊端，越來越無法滿足鐵路數據中心運維工作的需求。

國內關于數據可視化技術的研究已取得不少成果，秦鵬針對既往運維可視化系統、監控系統的構造及設備管理和維護功能存在的問題提出了優化措施，闡明了三維機房運維可視化系統的設計和構造思路[1]；龔昊等人提出利用二維、三維的圖形交互展示來提高用戶對海量數據的直觀理解，為數據管理提供便利[2]；閆海濤等人設計了一種電力三維可視化系統，用于電力設備及周邊環境三維模型的創建及展示[3]；高齊琦等人提出基于Three.js 引擎的磁盤陣列三維可視化的框架，以此來創建真實的三維場景，給用戶帶來流暢豐富的視覺及交互體驗[4]；張玄等人提出利用Three.js 特有的JSON 模型文件格式來加強用戶與系統的交互，以此提高管理效率[5]；余莉利用Three.js 的特性，實現了組合模型、外部導入模型的拾取及多對象拾取等特殊應用，基本滿足了虛擬場景的交互需求[6]；馮姣等人利用WebGL（Web Graphics Library）構建了數據驅動的三維飛行可視化系統，利用氣動數據驅動，實時模擬飛行器運動軌跡，增加仿真效果真實性[7]；趙海鵬等人利用傾斜攝影測量、Three.js、四叉樹索引數據結構等技術設計了一款虛擬校園系統，較好地解決了模型紋理失真、建模周期長、效率低等問題[8]。

本文針對鐵路數據中心運維監控系統的現狀和存在的問題，設計了一種基于Three.js 的運維數據可視化系統，為數據中心運維、巡檢、管理人員和用戶提供實時、規范、量化、準確的運維數據服務，對數據中心進行更準確、及時、有效地監控、預警和管理，降低數據中心運維成本，縮短報警響應處理時間，提高數據中心運維效率、安全性和管理水平。

1 系統架構

本文設計的數據可視化系統架構如圖1 所示，包括數據層、處理層、應用層。數據層通過接口集成鐵路數據中心現有應用監控數據、數據中心基礎設施管理系統（DCIM，Data Center Infrastructure Management）數據、智能巡檢數據，數據來源包括運維支撐平臺、鐵路云平臺、視頻監控系統、動力環境監控系統（簡稱：動環監控系統）、樓宇自動化（BA，Building Automation）系統、移動巡檢系統和機器人巡檢系統等；在處理層對運維數據進行數據分類、數據格式統一和數據加工，確定各種報警閾值并定時同步更新，實現對各類運維數據的實時統計分析；在應用層通過Three.js 三維引擎，將數據與三維展示環境中的場景、模型、標簽等進行關聯，實現各種運維信息可視化,從而對數據中心進行整體監控。

圖1 系統架構

2 系統功能

系統包括5 個功能模塊：基礎設施可視化，應用監控可視化，容量管理可視化，網絡管理監控可視化（簡稱：網管監控可視化）和動環監控可視化，如圖2 所示。

圖2 系統功能

2.1 基礎設施可視化

包括機房可視化、機柜可視化和設備可視化，通過三維圖形和列表的形式展示機房、機柜和設備的詳細信息，管理員可對其進行增加、刪除、修改、查詢和統計分析等操作。

用戶可根據數據中心樓層、機房、設備編號等進行查詢。系統可顯示設備對應的機房、機柜和單元位置，通過點擊機柜標簽，可顯示機柜詳細信息及其所有服務器的位置標識框，點擊標識框后可顯示服務器的詳細信息。

2.2 應用監控可視化

負責接收鐵路應用運維監控類系統的監控和報警信息，經處理之后在機房和機柜場景中進行可視化展示。數據來源包括運維支撐平臺、鐵路云平臺及其他應用級監控系統。

2.3 容量管理可視化

此功能包括空間統計、功率統計、承重統計和機位統計。

（1）空間統計：系統可在三維可視化環境中展示機房、機柜空間容量的分布統計，根據不同的顏色區分機柜的單元位置使用情況；支持對機房、機柜空間的分布圖可視化渲染表現，同時，支持通過鼠標移動和轉動模型。

（2）功率統計：系統可在三維可視化環境中展示機房、機柜額定功率分布統計，或在其上方展示該機房的總功率和使用率，支持對機房、機柜功率分布圖的可視化渲染，也支持通過鼠標，移動或轉動模型，如圖3 所示。

圖3 容量管理可視化功能

（3）承重統計：系統可在三維可視化環境中展示機房承重分布情況統計，能夠以柱狀圖的方式直觀的展現當前機房中每個機柜的承重狀態，讓用戶實時了解機房布局并進行有效調整。

（4）機位統計：系統在三維可視化環境中展示目前機房已經使用的機位與剩余機位情況。

2.4 網管監控可視化

包括性能監控展示和告警監控展示。

（1）性能監控展示：用戶點擊機柜上方的普通標簽，可查看該機房監控的性能數據信息。

（2）告警監控展示：用戶點擊機柜上方的紅色標簽，可看到該機柜的所有告警信息。

2.5 動環監控可視化

包括不間斷電源（UPS，Uninterrupted Power Supply）監控、溫度云圖、配電柜監控和精密空調監控。

（1）UPS 監控：系統可展示用戶查詢區域內每個UPS 的輸入、輸出、電壓、電流、運行狀態等監控和告警信息。

（2）溫度云圖：系統可以云圖的方式呈現整個機房的溫度、濕度環境信息。

（3）配電柜監控：系統可展示用戶查詢區域內每個配電柜的輸入、輸出、電壓、電流、運行狀態等監控和告警信息。

（4）精密空調監控：系統可展示用戶查詢區域內每臺空調的溫度、濕度、運行狀態等監控和告警信息。

3 關鍵技術

3.1 WebGL 技術與Three.js 引擎

（1）WebGL 技術

WebGL 是一種基于OpenGL 技術的3D 繪圖標準，它融合了JavaScript 和OpenGL ES2.0，為HTML5 Canvas 提供了硬件3D 加速渲染。WebGL 能夠運行在任何支持Web 的系統中，不需要任何瀏覽器插件的支持，具有良好的兼容性和跨平臺性。

本文利用WebGL 技術，借助系統顯卡，可在瀏覽器中流暢地展示中國鐵路主數據中心園區的三維場景和模型，如圖4 所示。

圖4 中國鐵路主數據中心園區模型

（2）Three.js 引擎

在基于WebGL 的三維應用開發中，Three.js 是較為主流的選擇。Three.js 是使用JavaScript 編寫的WebGL 第三方庫，是一款運行在瀏覽器中的三維引擎，可以通過它創建各種三維場景。與Unity3D、UE4 等三維圖形引擎相比，Three.js 具有開源免費、容易上手、擴展性強等特點，且易連接Oracle、MySQL等各類數據庫。

Three.js 引擎的基本組件包括場景、攝像機和渲染器等。場景是用來容納圖形元素的容器，圖形元素只有添加到場景中，其坐標、大小才有意義；攝像機定義可視域，決定場景中哪個角度的內容會顯示出來；渲染器決定繪制結果及繪制方式。

本文通過Three.js 加載器加載中國鐵路主數據中心園區、樓層、機房和機柜的obj/mtl 模型，使用Three.js 提供的幾何形狀在機柜模型上繪制服務器等設備，便于提高用戶與系統的交互效果。

3.2 機房溫度云圖繪制

溫度云圖通過聚合溫度數據，以漸進的色帶展現機房內的溫度分布，在效果上優于離散點的直接表示，可更直觀的展示數據的疏密程度及溫度的實時變化。

在Three.js 引擎中，溫度云圖具有自己的內部數據存儲區和渲染器。

（1）創建溫度云圖實例后，通過調用setData方法進行數據的初始化，也可調用addData 方法動態添加數據，實現數據的實時變化；

（2）將該方法與Three.js 引擎相結合，獲取溫度云圖畫布；

（3）通過調用THREE.PlaneGeometry()、THREE.Mesh()、THREE.Mesh Basic Material()、THREE.Texture()等方法將溫度云圖展示在模型上方。var point={x:100,y:135,value:20,radius:35}，其中，point 代表機柜；x、y、value 和radius 分別表示機柜的x軸坐標、y軸坐標、溫度值和繪制的圓形半徑，通過聚合每個機柜的上述信息繪制出整個機房的溫度云圖，繪制結果，如圖5 所示。

圖5 溫度云圖繪制結果

3.3 三維模型展示和動畫效果

實際運用中，Three.js 默認的幾何形狀和材質比較簡單，不能滿足用戶需求。本文通過對機房、機柜的各項參數進行實際測量，借助3DS Max 等建模軟件還原機房機柜的實際物理位置及尺寸，建模完成后，將其導出為mtl 和obj 的格式模型，并導入系統。

通過三維可視化，可以增強不同種類運維數據的直觀性、提高運維效率。將虛擬場景和真實數據相結合,為數據中心的日常資產管理、工程建設等提供決策依據，加強對機房設備的監控。通過空間分布來展示固定資產位置,提高管理人員的工作效率，如圖6 所示。

圖6 機房三維模型可視化效果

Three.js 引擎封裝了很多創建幾何體的構造函數，本系統采用BoxGeometry()來創建機柜內的設備長方體，數據結構如下:

其中，sizeX、sizeY、sizeZ 分別表示立方體的長、寬、高；positionX、positionY、positionZ 則對應立方體的位置坐標，是通過測量實際設備的尺寸和位置信息來獲取的。

另外，為提高用戶使用體驗，通過調用Three.js引擎中的THREE.BoxGeometry()、THREE.MeshBasic-Material()、THREE.Mesh()、THREE.BoxHelper()等方法，實現根據綠、黃、橙、紅等顏色區分機柜功率大小的功能。

3.4 數據動態實時加載

本系統中的三維模型和數據展示均采用了動態加載技術，根據需求快速切換不同的模型，即使機房設備模型數量較多，也不會造成運行卡頓。動態實時加載技術的原理是設置數據加載和移除閾值，當場景中的攝像機運動到一定位置時，加載該視角中所有的模型，此時可遍歷該范圍內的模型；當攝像機遠離到一定程度，便移除此視角中的所有模型，循環往復直至遍歷結束。同時，還可設置更新時間，即使三維模型較多，也可清晰、準確、實時查看所選的各項數據，保證數據可視化的實時性和準確性。

4 結束語

本文提出的基于Three.js 的鐵路數據中心運維數據可視化系統，可以對鐵路各級數據中心的各類運維監控系統的運維數據進行規范化、可視化、集中化展示，為數據中心對應用、設備、環境資源進行安全高效集中管理提供一種高效、自動化、智能化的手段。該系統已在中國鐵路主數據中心和國鐵集團部分機房投入使用，實現了機房自動化巡檢，為鐵路信息機房及UPS 配電機房的運維工作提供了技術支持，減少了運維人員的工作量，降低了數據中心的運維成本，是“綠色數據中心”概念的一種實際體現。