使用WebGL 自定義 3D 攝像頭監控模型

前言

隨着視頻監控聯網系統的不斷普及和發展, 網絡攝像機更多的應用於監控系統中，尤其是高清時代的來臨，更加快了網絡攝像機的發展和應用。

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

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

 

效果預覽

 

整體場景-攝像頭效果圖

局部場景-攝像頭效果圖

 

實時生成效果圖：

代碼生成

攝像頭模型及場景

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

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

錐體建模

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.*  等單獨控制某個面

以下是我定義模型的代碼:

// camera 是當前的攝像頭圖元
// fovy 爲攝像頭的張角的一半的 tan 值
var setRangeModel = function(camera, fovy) {
    var fovyVal = 0.5 * fovy;
    var pointArr = [0, 0, 0, -fovyVal, fovyVal, 0.5, fovyVal, fovyVal, 0.5, fovyVal, -fovyVal, 0.5, -fovyVal, -fovyVal, 0.5];
    ht.Default.setShape3dModel(camera.getTag(), [{
        vs: pointArr,
        is: [2, 1, 0, 4, 1, 0, 4, 3, 0, 3, 2, 0],
        from_vs: pointArr.slice(3, 15),
        from_is: [3, 1, 0, 3, 2, 1],
        from_uv: [0, 0, 1, 0, 1, 1, 0, 1]
    }]);
}

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

代碼中設置了錐體 style 對象的 wf.geometry 屬性，通過該屬性可以爲錐體添加模型的線框，增強模型的立體效果，並且通過wf.color，wf.width 等參數調節線框的顏色，粗細等。

相關模型 style 屬性的設置代碼如下：

 1 rangeNode.s({
 2     'shape3d': cameraName,
 3     // 攝像頭模型名稱
 4     'shape3d.color': 'rgba(52, 148, 252, 0.3)',
 5     // 錐體模型顏色
 6     'shape3d.reverse.flip': true,
 7     // 錐體模型的反面是否顯示正面的內容
 8     'shape3d.light': false,
 9     // 錐體模型是否受光線影響
10     'shape3d.transparent': true,
11     // 錐體模型是否透明
12     '3d.movable': false,
13     // 錐體模型是否可移動
14     'wf.geometry': true // 是否顯示錐體模型線框
15 });

 

攝像頭圖像生成原理

透視投影

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

 

如上圖所示，透視投影最終顯示到屏幕上的內容只有截頭錐體( 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 場景中任意位置的快照，從而實現攝像頭監控圖像實時生成。

相關僞代碼如下：

 1 function getFrontImg(camera, rangeNode) {
 2     var oldEye = g3d.getEye();
 3     var oldCenter = g3d.getCenter();
 4     var oldFovy = g3d.getFovy();
 5     g3d.setEye(攝像頭位置);
 6     g3d.setCenter(攝像頭朝向);
 7     g3d.setFovy(攝像頭張角);
 8     g3d.setAspect(攝像頭寬高比);
 9     g3d.validateImp();
10     g3d.toDataURL();
11     g3d.setEye(oldEye);;
12     g3d.setCenter(oldCenter);
13     g3d.setFovy(oldFovy);
14     g3d.setAspect(undefined);
15     g3d.validateImp();
16 }

經過測試之後，通過該方法進行圖像的獲取會導致頁面有所卡頓，因爲是獲取當前 3d 場景的整體截圖，由於當前3d場景是比較大的，所以 toDataURL 獲取圖像信息是非常慢的，因此我採取了離屏的方式來獲取圖像，具體方式如下：
1. 創建一個新的 3d 場景，將當前場景的寬度與高度都設置爲 200px 的大小，並且當前 3d 場景的內容與主屏的場景是一樣的，HT中通過 new ht.graph3d.Graph3dView(dataModel) 來新建場景，其中的 dataModel 爲當前場景的所有圖元，所以主屏與離屏的 3d 場景都共用同一個 dataModel，保證了場景的一致。
2. 將新創建的場景位置設置成屏幕看不到的地方，並且添加進 dom 中。
3. 將之前對主屏獲取圖像的操作變成對離屏獲取圖像的操作，此時離屏圖像的大小相對之前主屏獲取圖像的大小小很多，並且離屏獲取不需要保存原來的眼睛 eyes 的位置以及 center 中心的位置，因爲我們沒有改變主屏的 eyes 與 center 的位置， 所以也減少的切換帶來的開銷，大大提高了攝像頭獲取圖像的速度。

以下是該方法實現的代碼：

1 function getFrontImg(camera, rangeNode) {
 2     // 截取當前圖像時將該攝像頭所屬的五面體隱藏
 3     rangeNode.s('shape3d.from.visible', false);
 4     rangeNode.s('shape3d.visible', false);
 5     rangeNode.s('wf.geometry', false);
 6     var cameraP3 = camera.p3();
 7     var cameraR3 = camera.r3();
 8     var cameraS3 = camera.s3();
 9     var updateScreen = function() {
10         demoUtil.Canvas2dRender(camera, outScreenG3d.getCanvas());
11         rangeNode.s({
12             'shape3d.from.image': camera.a('canvas')
13         });
14         rangeNode.s('shape3d.from.visible', true);
15         rangeNode.s('shape3d.visible', true);
16         rangeNode.s('wf.geometry', true);
17     };
18 
19     // 當前錐體起始位置
20     var realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] / 2, cameraP3[2] + cameraS3[2] / 2];
21     // 將當前眼睛位置繞着攝像頭起始位置旋轉得到正確眼睛位置
22     var realEye = demoUtil.getCenter(cameraP3, realP3, cameraR3);
23 
24     outScreenG3d.setEye(realEye);
25     outScreenG3d.setCenter(demoUtil.getCenter(realEye, [realEye[0], realEye[1], realEye[2] + 5], cameraR3));
26     outScreenG3d.setFovy(camera.a('fovy'));
27     outScreenG3d.validate();
28     updateScreen();
29 }

上面代碼中有一個 getCenter 方法是用於獲取 3d 場景中點 A 繞着點 B 旋轉 angle 角度之後得到的點 A 在 3d 場景中的位置，方法中採用了 HT 封裝的 ht.Math 下面的方法，以下爲代碼：

1 // pointA 爲 pointB 圍繞的旋轉點
 2 // pointB 爲需要旋轉的點
 3 // r3 爲旋轉的角度數組 [xAngle, yAngle, zAngle] 爲繞着 x, y, z 軸分別旋轉的角度 
 4 var getCenter = function(pointA, pointB, r3) {
 5     var mtrx = new ht.Math.Matrix4();
 6     var euler = new ht.Math.Euler();
 7     var v1 = new ht.Math.Vector3();
 8     var v2 = new ht.Math.Vector3();
 9 
10     mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));
11 
12     v1.fromArray(pointB).sub(v2.fromArray(pointA));
13     v2.copy(v1).applyMatrix4(mtrx);
14     v2.sub(v1);
15 
16     return [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];
17 };

這裏應用到向量的部分知識，具體如下：

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

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 的面板手冊。

部分控制代碼如下：

1 formPane.addRow(['rotateY', {
 2     slider: {
 3         min: -Math.PI,
 4         max: Math.PI,
 5         value: r3[1],
 6         onValueChanged: function() {
 7             var cameraR3 = camera.r3();
 8             camera.r3([cameraR3[0], this.getValue(), cameraR3[2]]);
 9             rangeNode.r3([cameraR3[0], this.getValue(), cameraR3[2]]);
10             getFrontImg(camera, rangeNode);
11         }
12     }
13 }], [0.1, 0.15]);

控制面板通過 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 節點。

具體初始化面板代碼如下：

1 function initPanel() {
 2     var panel = new ht.widget.Panel();
 3     var config = {
 4         title: "攝像頭控制面板",
 5         titleBackground: 'rgba(230, 230, 230, 0.4)',
 6         titleColor: 'rgb(0, 0, 0)',
 7         titleHeight: 30,
 8         separatorColor: 'rgb(67, 175, 241)',
 9         separatorWidth: 1,
10         exclusive: true,
11         items: []
12     };
13     cameraArr.forEach(function(data, num) {
14         var camera = data['camera'];
15         var rangeNode = data['rangeNode'];
16         var formPane = new ht.widget.FormPane();
17         initFormPane(formPane, camera, rangeNode);
18         config.items.push({
19             title: "攝像頭" + (num + 1),
20             titleBackground: 'rgba(230, 230, 230, 0.4)',
21             titleColor: 'rgb(0, 0, 0)',
22             titleHeight: 30,
23             separatorColor: 'rgb(67, 175, 241)',
24             separatorWidth: 1,
25             content: formPane,
26             flowLayout: true,
27             contentHeight: 400,
28             width: 250,
29             expanded: num === 0
30         });
31     });
32     panel.setConfig(config);
33     panel.setPositionRelativeTo('rightTop');
34     document.body.appendChild(panel.getView());
35     window.addEventListener("resize",
36     function() {
37         panel.invalidate();
38     });
39 }

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

以下是本項目採用的 3D 場景結合 VR 技術實現的操作：