告別傳統機房：3D 機房數據可視化實現智能化與VR技術的新碰撞

前言

隨着各行業對計算機依賴性的日益提升，計算機信息系統的發展使得做爲其網絡設備、主機服務器、數據存儲設備、網絡安全設備等核心設備存放地的計算機機房日益顯現出它的重要地位，而機房的環境和動力設備如供配電、UPS、空調、消防、保安等必須時時刻刻爲計算機信息系統提供正常的運行環境。一旦機房環境和動力設備出現故障，對數據傳輸、存儲及系統運行的可靠性構成威脅。若是故障不能及時處理，就可能損壞硬件設備，形成嚴重後果。對於銀行，證券，海關，郵局等須要實時交換數據的單位的機房，機房管理更爲重要，一旦系統發生故障，形成的經濟損失更是不可估量。所以許多機房的管理人員不得不採用24小時專人值班，定時巡查機房環境設備，這樣不只加劇了管理人員的負擔，並且更多的時候，不能及時排除故障，對事故發生的時間無科學性的管理。

而在現現在工業4.0的改革崛起，工業互聯網和 5G 等新基建的發展下，工業管控在可視化系統的搭載上愈來愈普遍，比起傳統的機房，智能機房在節省不少人力勞力的基礎上，還帶來更穩定的環境保障。

HT for Web 不止自主研發了強大的基於 HTML5 的 2D、3D 渲染引擎，爲可視化提供了豐富的展現效果。介於 2D 組態和 3D 組態上，Hightopo（如下簡稱 HT ）的 HT for Web 產品上的有着豐富的組態化可供選擇，本文將運用 HT 搭載出一個基於 HTML5 WebGL 和 VR 技術的 3D 機房數據中心可視化系統。

界面簡介及效果預覽

在場景的搭建上，採用以 HT 的 HT for Web 產品輕量化 HTML5/WebGL 建模的方案，實現快速建模、運行時輕量化到甚至手機終端瀏覽器便可 3D 可視化運維的良好效果；同時配備 HT 特有的矢量圖標做爲控制面板，能適應各類屏幕的不一樣分辨率的大小而不失真。3D 機房場景和 2D 控制面板的結合，打造出一套機房數據中心可視化系統的解決方案。

項目預覽地址：基於 HTML5 的 WebGL 自定義 3D 攝像頭監控模型

一、總體場景-攝像頭效果圖

二、局部場景-攝像頭效果圖

系統分析

在 3D 機房數據中心可視化應用中，隨着視頻監控聯網系統的不斷普及和發展, 網絡攝像機更多的應用於監控系統中，尤爲是高清時代的來臨，更加快了網絡攝像機的發展和應用。

在監控攝像機數量的不斷龐大的同時，在監控系統中面臨着嚴峻的現狀問題：海量視頻分散、孤立、視角不完整、位置不明確等問題，始終圍繞着使用者。所以，如何更直觀、更明確的管理攝像機和掌控視頻動態，已成爲提高視頻應用價值的重要話題。因此當前項目正是從解決此現狀問題的角度，應運而生。圍繞如何提升、管理和有效利用前端設備採集的海量信息爲公共安全服務，特別是在技術融合大趨勢下，如何結合當前先進的視頻融合，虛實融合、三維動態等技術，實現三維場景實時動態可視化監控，更有效的識別、分析、挖掘海量數據的有效信息服務公共應用，已成爲視頻監控平臺可視化發展的趨勢和方向。

目前，在監控行業中，海康、大華等作監控行業領導者可基於這樣的方式規劃公共場所園區等的攝像頭規劃安放佈局，能夠經過海康、大華等攝像頭品牌的攝像頭參數，調整系統中攝像頭模型的可視範圍，監控方向等，更方便的讓人們直觀的瞭解攝像頭的監控區域，監控角度等。

系統效果實現

1、攝像頭模型及場景

項目中使用的攝像頭模型是經過 3dMax 建模生成的，該建模工具能夠導出 obj 與 mtl 文件，在 HT 中能夠經過解析 obj 與 mtl 文件來生成 3d 場景中的攝像頭模型。

項目中場景經過 HT 的 3d 編輯器進行搭建，場景中的模型有些是經過 HT 建模，有些經過 3dMax 建模，以後導入 HT 中，場景中的地面白色的燈光，是經過 HT 的 3d 編輯器進行地面貼圖呈現出來的效果。

2、錐體建模

3D 模型是由最基礎的三角形面拼接合成，例如 1 個矩形能夠由 2 個三角形構成，1 個立方體由 6 個面即 12 個三角形構成， 以此類推更復雜的模型能夠由許多的小三角形組合合成。所以 3D 模型定義即爲對構造模型的全部三角形的描述， 而每一個三角形由三個頂點 vertex 構成， 每一個頂點 vertex 由 x, y, z 三維空間座標決定，HT 採用右手螺旋定則來肯定三個頂點構造三角形面的正面。

HT 中經過 ht.Default.setShape3dModel(name, model) 函數，可註冊自定義 3D 模型，攝像頭前方生成的錐體即是經過該方法生成。能夠將該錐體當作由 5 個頂點，6 個三角形組成，具體圖以下：

ht.Default.setShape3dModel(name, model)

1. name 爲模型名稱，若是名稱與預約義的同樣，則會替換預約義的模型；
2. model 爲JSON類型對象，其中 vs 表示頂點座標數組，is 表示索引數組，uv 表示貼圖座標數組，若是想要單獨定義某個面，能夠經過 bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv 等來定義，以後即可以經過 shape3d.top.*， shape3d.bottom.* 等單獨控制某個面。

錐形建模實現的效果以下：

我將當前攝像頭的 tag 標籤值做爲模型的名稱，tag 標籤在 HT 中用於惟一標識一個圖元，用戶能夠自定義 tag 的值。經過 pointArr 記錄當前五面體的五個頂點座標信息，代碼中經過 from_vs, from_is, from_uv 單獨構建五面體底面，底面用於顯示當前攝像頭呈現的圖像。

實現中設置了錐體 style 對象的 wf.geometry 屬性，經過該屬性能夠爲錐體添加模型的線框，加強模型的立體效果，而且經過 wf.color，wf.width 等參數調節線框的顏色，粗細等。

3、攝像頭圖像生成原理

一、透視投影

透視投影是爲了得到接近真實三維物體的視覺效果而在二維的紙或者畫布平面上繪圖或者渲染的一種方法，它也稱爲透視圖。 透視使得遠的對象變小，近的對象變大，平行線會出現先交等更更接近人眼觀察的視覺效果。

如上圖所示，透視投影最終顯示到屏幕上的內容只有截頭錐體( View Frustum )部分的內容， 所以 Graph3dView 提供了 eye, center, up, far，near，fovy 和 aspect 參數來控制截頭錐體的具體範圍。具體的透視投影能夠參考 HT for Web 的 3D 手冊。

根據上圖的描述，在本項目中能夠在攝像頭初始化以後，緩存當前 3d 場景 eyes 眼睛的位置，以及 center 中心的位置，以後將 3d 場景 eyes 眼睛和 center 中心設置成攝像頭中心點的位置，而後在這個時刻獲取當前 3d 場景的截圖，該截圖即爲當前攝像頭的監控圖像，以後再將 3d 場景的 center 與 eyes 設置成開始時緩存的 eyes 與 center 位置，經過該方法便可實現 3d 場景中任意位置的快照，從而實現攝像頭監控圖像實時生成。

攝像頭成像實現的效果以下：

通過測試以後，經過該方法進行圖像的獲取會致使頁面有所卡頓，由於是獲取當前 3d 場景的總體截圖，因爲當前3d場景是比較大的，因此 toDataURL 獲取圖像信息是很是慢的，所以我採起了離屏的方式來獲取圖像，具體方式以下：

1. 建立一個新的 3d 場景，將當前場景的寬度與高度都設置爲 200px 的大小，而且當前 3d 場景的內容與主屏的場景是同樣的，HT中經過 new ht.graph3d.Graph3dView(dataModel) 來新建場景，其中的 dataModel 爲當前場景的全部圖元，因此主屏與離屏的 3d 場景都共用同一個 dataModel，保證了場景的一致。
2. 將新建立的場景位置設置成屏幕看不到的地方，而且添加進 dom 中。
3. 將以前對主屏獲取圖像的操做變成對離屏獲取圖像的操做，此時離屏圖像的大小相對以前主屏獲取圖像的大小小不少，而且離屏獲取不須要保存原來的眼睛 eyes 的位置以及 center 中心的位置，由於咱們沒有改變主屏的 eyes 與 center 的位置， 因此也減小的切換帶來的開銷，大大提升了攝像頭獲取圖像的速度。

在視角的實現中有一個 getCenter 方法是用於獲取 3d 場景中點 A 繞着點 B 旋轉 angle 角度以後獲得的點 A 在 3d 場景中的位置，方法中採用了 HT 封裝的 ht.Math 下面的方法這裏應用到向量的部分知識，具體以下：

OA + OB = OC

方法分爲如下幾個步驟求解：

1. var mtrx = new ht.Math.Matrix4() 建立一個轉換矩陣，經過 mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2])) 獲取繞着 r3[0]，r3[1]，r3[2] 即 x 軸，y 軸，z 軸旋轉的旋轉矩陣。
2. 經過 new ht.Math.Vector3() 建立 v1，v2 兩個向量。
3. v1.fromArray(pointB) 爲創建一個從原點到 pointB 的一個向量。
4. v2.fromArray(pointA) 爲創建一個從原點到 pointA 的一個向量。
5. v1.fromArray(pointB).sub(v2.fromArray(pointA)) 即向量 OB - OA 此時獲得的向量爲 AB，此時 v1 變爲向量 AB。
6. v2.copy(v1) v2 向量拷貝 v1 向量，以後經過 v2.copy(v1).applyMatrix4(mtrx) 對 v2 向量應用旋轉矩陣，變換以後即爲 v1向量繞着 pointA 旋轉以後的的向量 v2。
7. 此時經過 v2.sub(v1) 就獲取了起始點爲 pointB，終點爲 pointB 旋轉以後點構成的向量，該向量此時即爲 v2。
8. 經過向量公式獲得旋轉以後的點爲 [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z]。

項目中的 3D 場景例子實際上是 Hightopo 最近貴州數博會，HT 上工業互聯網展臺的 VR 示例，大衆對 VR/AR 的期待很高，但路仍是得一步步走，即便融資了 23 億美金的 Magic Leap 的第一款產品也只能是 Full of Shit，這話題之後再展開，這裏就上段當時現場的視頻照片：

二、2D 圖像貼到 3D 模型

經過上一步的介紹咱們能夠獲取當前攝像機位置的截屏圖像，那麼如何將當前圖像貼到前面所構建的五面體底部呢？前面經過 from_vs, from_is 來構建底部的長方形，因此在 HT 中能夠經過將五面體的 style 中 shape3d.from.image 屬性設置成當前圖像，其中 from_uv 數組用來定義貼圖的位置，具體以下圖：

如下爲定義貼圖位置 from_uv 的代碼：

from\_uv: \[0, 0, 1, 0, 1, 1, 0, 1\]

from_uv 就是定義貼圖的位置數組，根據上圖的解釋，能夠將 2d 圖像貼到 3d 模型的 from 面。 三、控制面板 HT 中經過 new ht.widget.Panel() 來生成以下圖的面板：

面板中每一個攝像頭都有一個模塊來呈現當前監控圖像，其實這個地方也是一個 canvas，該 canvas 與場景中錐體前面的監控圖像是同一個 canvas，每個攝像頭都有一個本身的 canvas 用來保存當前攝像頭的實時監控畫面，這樣就能夠將該 canvas 貼到任何地方，將該 canvas 添加進面板的代碼以下：

formPane.addRow(\[{ 2 element: camera.a('canvas') 3 }\], 240, 240);

代碼中將 canvas 節點存儲在攝像頭圖元的 attr 屬性下面，以後即可以經過 camera.a('canvas') 來獲取當前攝像頭的畫面。

在面板中的每個控制節點都是經過 formPane.addRow 來進行添加，具體可參考 HT for Web 的表單手冊。以後經過 ht.widget.Panel 將表單面板 formPane 添加進 panel 面板中，具體可參考 HT for Web 的面板手冊。

控制面板經過 addRow 來添加控制元素，實現的方式爲添加攝像頭繞着 y 軸進行旋轉的控制，onValueChanged 在 slider 的數值改變的時候調用，此時經過 camera.r3() 獲取當前攝像頭的旋轉參數， 因爲是繞着 y 軸旋轉因此 x 軸與 z 軸的角度是不變的，變的是 y 軸的旋轉角度，因此經過 camera.r3([cameraR3[0], this.getValue(), cameraR3[2]]) 來調整攝像頭的旋轉角度以及經過 rangeNode.r3([cameraR3[0], this.getValue(), cameraR3[2]]) 來設置攝像頭前方錐體的旋轉角度，而後調用以前封裝好的 getFrontImg 函數來獲取此時旋轉角度下面的實時圖像信息。

項目中經過 Panel 面板的配置參數 titleBackground: rgba(230, 230, 230, 0.4) 便可將標題背景設置爲具備透明度的背景，其它相似的 titleColor, titleHeight 等標題參數均可以配置，經過 separatorColor,separatorWidth 等分割參數能夠設置內部面板之間分割線的顏色，寬度等。最後面板經過 panel.setPositionRelativeTo('rightTop') 將面板的位置設置成右上角，而且經過 document.body.appendChild(panel.getView()) 將面板最外層的 div 添加進頁面中， panel.getView() 用來獲取面板的最外層 dom 節點。

在控制面板中能夠調整攝像頭的方向，攝像頭監控的輻射範圍，攝像頭前方錐體的長度等等，而且攝像頭的圖像是實時生成，如下爲運行截圖：

如下是本項目採用的 3D 場景結合 HT for Web 的 VR 技術實現的操做：

總結

3D 機房數據中心可視化系統在很大程度上保障了機房平常運行的監控狀態，及時反饋機房內部的實況信息，這是可視化系統的一大優點。對接數據進行可視化展現，集中監管數據的變更，對應急突發狀態可以起到捕捉，及時作出應對方案，很大程度上發揮了智能機房的最大價值，而可視化系統的用處的地方，還很廣闊，在各行各業的監管可視化展現上，以及對自身產品的研發改造下，HT 積累了許多的解決方案，有興趣的小夥伴能夠看看：線框模式下的 3D 數據中心機房

2019 咱們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裏你能發現許多新奇的實例，也能發掘出不同的工業互聯網：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同時，你也能夠查看更多案例及效果：https://www.hightopo.com/demos/index.html