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

時間 2019-12-08

標籤使用 webgl 自定義 3d 攝像頭監控模型简体版

原文原文鏈接

前言

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

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

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

效果預覽

總體場景-攝像頭效果圖

局部場景-攝像頭效果圖

實時生成效果圖：數組

代碼生成

攝像頭模型及場景

項目中使用的攝像頭模型是經過 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 個三角形組成，具體圖以下：app

ht.Default.setShape3dModel(name, model)dom

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 }