基于WebGL的數據中心三維可視化系統設計與研究

［摘 要］伴隨主流瀏覽器對HTML5標準與WebGL的全面支持，基于網頁技術展現三維模型成為可能。利用Three.js與ThingJS圖形框架，建立基于WebGL技術的數據中心三維可視化系統，實現無須插件的跨瀏覽器模型快速載入渲染，場景分層級瀏覽，面向對象的搜索、訪問與控制。通過直觀使用數據中心，用戶可使用Web方式便捷地監控機房運維指標數據、管理資產和進行業務狀態巡檢等，并為進一步開發基于三維虛擬場景的全自動化運維，提供數據與可視化框架基礎。

［關鍵詞］WebGL；數字化建設；3D渲染；Three.js；HTML5；數據中心

doi：10.3969/j.issn.1673-0194.2023.01.040

［中圖分類號］TP315 ［文獻標識碼］A ［文章編號］1673-0194（2023）01-0153-04

0" " "引 言

三維可視化是IDC機房數字信息化建設的重要組成部分，傳統數據中心管理系統可視化程度不高，缺乏實時性、可交互性管理。近年來，隨著高性能計算快速發展以及地球物理勘探領域業務需求不斷增加，其涉及的動態環境數據與軟硬件資產規模愈發龐大，涵蓋業務系統亦多樣復雜。在整個數據中心數字化建設運轉過程中積累散發出大量熱量，熱量空間問題越來越嚴重。如果不對環境指標數據進行實時準確的監控，將會嚴重影響整個機房的正常運行，建設低碳低能耗的“綠色數據中心”成為新的趨勢和要求。數據中心三維可視化系統作為保障數據存儲與高性能計算的數字基礎設施，面向不同功能用戶群體，使用三維可視化技術，可以解決數據中心發展過程中存在的安全、管理、環保和運維問題。

1" " "關鍵技術

1.1" "WebGL技術

WebGL是一項在網頁上繪制和渲染三維圖形，并可以和用戶進行交互的技術。它的出現解決了之前Web瀏覽器內進行三維動畫交互存在的兩個主要問題：第一，WebGL是作為HTML5中的canvas標簽的一個特殊的上下文（Experimental-WebGL）實現在瀏覽器中的，無須任何插件；第二，它通過跨語言、跨平臺的統一開放式圖形庫OpenGL來實現直接調用底層的GPU硬件進行圖形加速渲染［1］。WebGL使JavaScript具備了操作OpenGL接口構建三維對象的能力，該項技術渲染流程如圖1所示，大致可以分為以下三個步驟。

第一步，獲取頂點坐標，頂點坐標通常根據模型用框架生成，由于頂點數據非常多，在獲取到坐標后，將它存儲在GPU緩存區內，方便GPU快速讀取。

第二步，圖元裝配（即畫出一個個三角形），圖元裝配即由第一步一個個頂點生成一個個圖元三角形，頂點著色器接收由修飾符attribute傳遞的頂點數據，修飾符uniform傳遞的矩陣，然后再由GPU對每個頂點執行著色器程序，確定頂點的最終坐標值，同時進行坐標轉換處理。

第三步，光柵化（生成片元，即一個個像素點）在圖元裝配完畢之后，需要通過片元著色器對模型進行“上色”（陰影，質地，光照效果等），根據具體生成多少片元（像素），執行多少次，于顏色緩存區內存儲片元信息，完成整個渲染步驟。

1.2" "Three.js三維可視化框架

作為瀏覽器內置的底層的繪圖API，通常在進行渲染的過程中，WebGL開發人員必須人工實現設置矩陣變換、紋理、頂點著色器、片元著色器等包含大量底層細節的操作，因此直接使用WebGL開發渲染程序成本相對較高。利用對WebGL底層API進行二次封裝的三維引擎進行開發是可行性較高的技術方案，Three.js就是其中運用最廣泛的一種。它使得開發人員可以在無須掌握復雜的圖形學知識基礎的情況下，創建開發需求的場景（scene）和攝像機（camera），通過多種不同功能的渲染器（renderer）進行渲染，創建出構造三維場景所必需的點、線、面基本要素和在此之上延伸出的曲面、曲線等其他衍生要素［2］。

Three.js具備對常用三維數據格式的較好兼容性，可以將obj、dae數據格式導入轉換成自身的Object 3D對象，直接展示出其他工具已經創建好的三維模型和對象。同時支持使用廣泛應用的JSON數據格式構建出三維數據模型，能夠方便地使用網絡傳輸來的JSON三維數據創建場景和對象，并進行實時處理展示。

Three.js在多種光源和紋理三維場景中能夠實現進一步渲染創造出更生動豐富的可視效果。這一過程相比直接使用底層圖形API要簡單更接近認知常識。如圖2所示，首先創建各種形狀的幾何體，或者從外部導入建好的模型文件，然后為幾何體添加材質（紋理、顏色等），就組成了一個網格模型mesh，我們可以創建很多的模型，塞進場景里，還要為場景加入燈光，照相機需要燈光才能拍到場景里面的物體。在拍攝動態場景時，照相機連續拍攝然后通過渲染器循環渲染到屏幕上，最后屏幕展現的就是一個3D動態場景［3］。

2" " "數據中心三維可視化設計

基于數據中心設備環境和用戶使用需求，整個系統功能設計主要分為以下幾個方面：第一，模型的建立渲染優化與靜態屬性管理；第二，物聯網環境搭建、傳感器動態數據采集與數據庫設計；第三，數據與模型可交互映射關聯［4］。

2.1" "模型的建立與屬性管理

我們可以使用3dmax，CampusBuilder等建模軟件建立常用的.obj、.dae三維數據格式模型文件，對模型的類別（空調、機柜、服務器、UPS等），及其對應的貼圖地址、坐標、型號、硬件信息進行統一管理，進而根據模型類別采用分層級渲染的技術方案，可顯著提升渲染計算效率，如圖3所示。

部分場景、攝像機及渲染代碼：

var renderer;

function Render（） {

renderer = new THREE.WebGLRenderer（{antialias：true}）;

renderer.setSize（window.innerWidth， window.innerHeight）;

//renderer.setClearColor（0xffffff）;

document.body.appendChild（renderer.domElement）;

}

var camera;

function Camera（） {

camera = new THREE.PerspectiveCamera（35， window.innerWidth/window.innerHeight， 0.1， 1600）;

camera.position.set（-20， -20， -200）;

camera.lookAt（new THREE.Vector3（0， 0， 0））;

}

var scene;

function Scene（） {

scene = new THREE.Scene（）;

}

部分建模代碼：

var cabinet（{

Type：`cabinet`，//類型

Name：`HUAWEI`，//名稱

Url：`https：//192.168.3.25/models/17fc17b416e94527bc6/

gltf` //模型地址

Position：［10， 10， 10］，//坐標

Complete：function（）{

Console.log（`created：` + this.name），//建模成功打印函數

}

}）

2.2" "物聯網環境搭建、傳感器動態數據采集與數據庫設計

Zigbee是一項新型的近距離、低成本、低功耗、短時延的無線網絡通信技術，基于IEEE 802協議，相較于傳統網絡通信技術，具有更敏捷、安全可靠、多路徑路由方式等特征。

Zigbee協議結構分為四層，最底層為物理層，提供最基礎的服務，向上為MAC層提供數據接口等服務；其次為MAC層，建立維護不同設備之間無線數據鏈路，驗證數據的發送與接收；再次為網絡/安全層，主要負責數據傳輸與完整性，也可對數據實現加密功能；最后為應用/支持層，根據不同應用需求實現傳感器元件之間的通信。

該技術通常適用于短距離數以千計的微小傳感器相互間自動搭建底層Zigbee組網監控環境的應用場景，數據流向下通過Zigbee協議與傳感器節點進行控制采集，向上通過萬兆以太網接入Influxdb與MySQL數據庫管理系統，其數據庫表設計見表1。

2.3" "數據與模型可交互映射關聯

作為系統核心功能，采用前后端分離的方案新增一臺處理響應靜態資源的服務器，請求Index獲取靜態數據，通過將視圖層和控制層部署于前端，使用node.js開發后臺服務端提供數據轉發和串接服務的方式，僅需處理數據存取處理以及業務邏輯相關，Ajax跨域異步模式向服務器發送HTTP請求并從數據庫中獲取響應數據組裝為指定JSON格式，瀏覽器將響應數據渲染至Web頁面上，整個過程大大降低了前臺展示頁面與后端數據服務的系統耦合度［5］。前后端解耦分離架構與數據功能應用流程如圖4所示。

Ajax連接函數主要代碼：

function update（obj） {

// ***采用不設置CORS的跨域實現方案***

// 請求傳入參數為 { \"id\"： id }

$.ajax（{

type： \"get\"，

url： \"http：//123.196.145.217：8081/480aliyun\"，

data： {\"id\"：obj.id}，

dataType： \"json\"， // 返回的數據類型 json

success： function （d） {

console.log（d）;// 更新傳感器物體上的自定義屬性monitorData4819相關信息

obj.monitorData［'溫度（℃）'］ = d.data.temper;

obj.monitorData［'濕度（%）'］ = d.data.wet;

obj.monitorData［'時間'］ = d.data.timeformat;

}

}）;

}

3" " "成果應用研究

基于物聯網數據技術和WebGL技術路線，通過對數據資源進行整合，深度分析與挖掘，完成基礎信息交互查詢與可視化展示。系統進一步開發了室內地圖導航、自動巡檢、熱力圖等功能模塊［6］，豐富了應用場景，結合現有的移動端釘釘機器人、微信公眾號等商業API實現了對業務狀態的實時分析、監控、預警，完成對數據中心基礎設施與核心業務的管理、監控、運維數字化上線［6］，數據中心三維可視化系統（局部）如圖5所示。

4" " "結 語

在全社會踐行碳中和碳達峰的新形勢下，建設“智能綠色數據中心”成為新的發展目標，三維可視化技術將傳統面向數據中心的管理運維提升至一個新的維度，通過將真實場地設備等客觀環境，甚至在運行的業務邏輯流程建立模型映射到虛擬數字化世界中，資產、數據、各項性能指標應用于場景進行三維展示［7］，可有效提升運維效率與故障診斷定位能力，降低運營成本，增強數據中心安全穩定性，實現綠色低能耗，具有十分重要的應用價值。

主要參考文獻

［1］寧靜.基于WebGL的實物交互技術及其實現的研究［D］.武漢：華中科技大學，2014.

［2］陸永芳.數據中心三維可視化呈現技術的研究與實現［D］.北京：北京郵電大學，2013.

［3］魏云申.基于WebGL的全景3D漫游系統［D］.南京：南京大學，2016.

［4］黃若思，李傳榮，馮磊，等.基于幾何的WebGL矢量數據三維渲染技術研究［J］.遙感技術與應用，2014（3）：463-468.

［5］汪浩，田豐，張文俊.基于WebGL的交互平臺設計與實現［J］.電子測量技術，2015，38（8）：119-123.

［6］陳林.基于Three.js的地下管線三維建?？梢暬芯浚跩］.測繪與空間地理信息，2018，41（8）：93-96.

［7］任宏康，祝若鑫，李風光，等.基于 Three.js的真實三維地形可視化設計與實現［J］.測繪與空間地理信息，2015（10）：51-54.