構建於 B/S 端的 3D 攝影機可視化監控方案
- 2019 年 10 月 5 日
- 筆記
前言
隨著影片監控聯網系統的不斷普及和發展, 網路攝像機更多的應用於監控系統中，尤其是高清時代的來臨，更加快了網路攝像機的發展和應用。
在監控攝像機數量的不斷龐大的同時，在監控系統中面臨著嚴峻的現狀問題：海量影片分散、孤立、視角不完整、位置不明確等問題，始終圍繞著使用者。因此，如何更直觀、更明確的管理攝像機和掌控影片動態，已成為提升影片應用價值的重要話題。所以當前項目正是從解決此現狀問題的角度，應運而生。圍繞如何提高、管理和有效利用前端設備採集的海量資訊為公共安全服務，特別是在技術融合大趨勢下，如何結合當前先進的影片融合，虛實融合、三維動態等技術，實現三維場景實時動態可視化監控，更有效的識別、分析、挖掘海量數據的有效資訊服務公共應用，已成為影片監控平台可視化發展的趨勢和方向。目前，在監控行業中，海康、大華等做監控行業領導者可基於這樣的方式規劃公共場所園區等的攝影機規劃安放布局，可以通過海康、大華等攝影機品牌的攝影機參數，調整系統中攝影機模型的可視範圍，監控方向等，更方便的讓人們直觀的了解攝影機的監控區域，監控角度等。
以下是項目地址：基於 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 }; 這裡應用到向量的部分知識，具體如下：
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 的程式碼：
1 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 添加進面板的程式碼如下：
1 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 技術實現的操作：
