張玄+黃蔚

摘要：針對傳統(tǒng)的數(shù)據(jù)中心機房運維系統(tǒng)不夠直觀、易造成機房管理的安全隱患等問題，對三維可視化技術(shù)WebGL及其應(yīng)用框架Three.js進(jìn)行了深入研究，主要對機房的整體構(gòu)建，實時監(jiān)控，設(shè)備管理和自動巡檢功能進(jìn)行了設(shè)計與實現(xiàn)，并進(jìn)行了性能優(yōu)化，闡述了3D機房運維可視化系統(tǒng)的設(shè)計思路和架構(gòu)，采用了three.js特有的JSON模型文件格式，并使用對three.js有良好支持的Blender進(jìn)行模型制作，通過仿真的三維場景，給用戶帶來了沉浸感和流暢豐富的交互體驗，提高了數(shù)據(jù)中心機房的管理效率。

關(guān)鍵詞：三維可視化；WebGL；Three.js；JSON

引言

隨著互聯(lián)網(wǎng)、云計算的迅猛發(fā)展、海量數(shù)據(jù)的產(chǎn)生，信息中心的規(guī)模越來越大，中型和大型信息中心市場未來會有大幅增長。據(jù)《20121～2015年中國IDC產(chǎn)業(yè)發(fā)展研究報告》顯示：2014度中國的IDC（Internet Data Center）市場規(guī)模已達(dá)到372.2億元，同比增長達(dá)41.8%。伴隨著信息中心規(guī)模的快速增長，給信息中心管理人員帶來了巨大挑戰(zhàn)，使得信息中心的運維管理存在較大安全隱患，一旦出現(xiàn)重大問題，損失將非常嚴(yán)重。同時管理人員數(shù)量的增加，造成維護(hù)成本的大幅增長。因此建立一個直觀、有效的信息中心運維管理系統(tǒng)變得非常迫切。近些年出現(xiàn)的HTML5技術(shù)給了我們一個解決這些問WebGL技術(shù)及其框架Three.js構(gòu)建信息中心機房三維視圖，用來展示機房設(shè)備及其運行狀態(tài)，使得管理人員能夠清晰的了解信息中心的總體健康狀況、各種設(shè)備的性能、運行情況，能夠直觀、快捷地發(fā)現(xiàn)信息中心中存在的問題和隱患，從而降低運維成本、加強運維管理的有效性，確保信息中心業(yè)務(wù)的正常運行。

1WebGL技術(shù)與Three.js框架

1.1WebGL技術(shù)

WebGL是2009年8月Khronos提出的繪圖技術(shù)，它是一個跨平臺的，免費的，用于在Web瀏覽器創(chuàng)建三維圖形的API。它基于OpenGL ES2.0標(biāo)準(zhǔn)，并使用OpenGL的著色語言GLSL，而且還提供了類似于OpenGL的API。WebGL可以直接在HTML5的Canvas元素中繪制三維動畫并提供硬件三維加速渲染，利用WebGL實現(xiàn)Web3D不需要安裝瀏覽器插件，只需要編寫網(wǎng)頁代碼即可實現(xiàn)三維動畫的展示。

WebGL技術(shù)的提出解決了現(xiàn)有Web交互式三維的問題，它免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可用于創(chuàng)建具有復(fù)雜三維結(jié)構(gòu)的網(wǎng)站頁面，甚至可以用來設(shè)計三維網(wǎng)頁游戲，相對于其他Web3D實現(xiàn)方式，WebGL的優(yōu)勢主要體現(xiàn)在：

（1）WebGL是通過JavaScript來制作網(wǎng)絡(luò)交互式三維動畫，基于此技術(shù)，客戶端不需要安裝插件即可支持三維圖形展示以及GPU硬件加速；

（2）WebGL具有開放性。目前，雖然AdobeFlashPlayer 11，Silver light 3.0都已經(jīng)支持GPU加速，但他們開放性較差，使用環(huán)節(jié)復(fù)雜，而WebGL是開源的，同時HTML5的開放標(biāo)準(zhǔn)也使PC和移動終端能夠擺脫IOS、安卓等系統(tǒng)應(yīng)用的壟斷與限制，且支持輕量級3D應(yīng)用；

（3）WebGL中引用了OpenGLES2.0的可編程處理器，利用了底層的圖形硬件加速功能進(jìn)行圖形渲染，使得Web開發(fā)人員能夠借助系統(tǒng)GPU在瀏覽器里更流暢的展示三維場景和模型，同時還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)可視化效果，這也是WebGL的關(guān)鍵所在。

1.2 Three.js框架

但是，WebGL原生API非常底層，直接使用WebGL編程非常復(fù)雜，需要了解WebGL的內(nèi)部細(xì)節(jié)，學(xué)習(xí)復(fù)雜的著色器語法，為了構(gòu)建一個高等級的，對用戶更加友好的WebGL開發(fā)環(huán)境，許多開源框架被創(chuàng)造出來，現(xiàn)在有許多不錯的開源框架，例如GLGE、SceneJS、CubicVR、Three.js，Three.js庫提供了一套基于WebGL的，非常易用的Javascript API，可以通過它直接在瀏覽器中創(chuàng)建三維場景，Three.js以簡單直觀的方式封裝了3D圖形編程中常用的對象，在它的開發(fā)中使用了很多圖形引擎的高級技巧，極大地提高了性能。

2系統(tǒng)功能

3D機房運維可視化系統(tǒng)的功能需求主要分為以下幾個方面：設(shè)備維護(hù)、3D場景漫游、健康度管理、設(shè)備自動巡檢和模型庫維護(hù)；系統(tǒng)具有兩個模式，分別是觀察模式和維護(hù)模式，設(shè)備維護(hù)和模型庫維護(hù)只能在維護(hù)模式下進(jìn)行，3D場景漫游和自動巡檢只能在觀察模式下進(jìn)行，健康度管理則是能在兩種模式下運行。進(jìn)入系統(tǒng)的主視圖如1所示。

（1）設(shè)備維護(hù)?？蓜討B(tài)的維護(hù)機房內(nèi)的設(shè)備是本系統(tǒng)最基本的功能。用戶可根據(jù)機房的實際情況來添加、刪除系統(tǒng)中的設(shè)備，改變設(shè)備的位置（包含碰撞檢測功能），修改設(shè)備的具體信息。

（2）3D場景漫游。本系統(tǒng)為用戶提供了一個自由查看機房內(nèi)設(shè)備，設(shè)備信息及整體布局的功能，即觀察模式，在觀察模式下，可以對場景進(jìn)行縮放，可以自由旋轉(zhuǎn)、翻滾相機、移動用戶視角。

（3）健康度管理。健康度管理功能可以使用戶對機房的健康狀況進(jìn)行了解，為排除設(shè)備隱患及故障做好準(zhǔn)備，健康度是所有設(shè)備都具有的屬性，用戶可自由查看機房內(nèi)任意設(shè)備的健康度，健康度分為三個區(qū)間，分別用紅黃綠三種顏色來表示設(shè)備的健康狀態(tài)。

（4）自動巡檢。自動巡檢功能是本系統(tǒng)的亮點，可以使用戶迅速的對機房的設(shè)備布局、健康情況進(jìn)行了解，當(dāng)自動巡檢啟動時場景鏡頭將自動對機房中存在隱患和出現(xiàn)錯誤的設(shè)備進(jìn)行巡檢并顯示設(shè)備信息，方便用戶處理。

（5）模型庫維護(hù)。由于機房可能會經(jīng)常添加和移除不同型號的設(shè)備，因此系統(tǒng)需要模型庫維護(hù)功能，當(dāng)模型庫中有不需要的設(shè)備模型時可刪除，當(dāng)用戶需要模型庫中沒有的設(shè)備模型時，由開發(fā)人員制作設(shè)備模型提供給用戶，然后用戶可利用模型管理功能添加載本地模型文件。