基於 HTML5 的 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)

• name 為模型名稱，如果名稱與預定義的一樣，則會替換預定義的模型
• 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 屬性的設定程式碼如下：

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

攝像頭影象生成原理

透視投影

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

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

相關虛擬碼如下：

	function getFrontImg(camera, rangeNode) {
		var oldEye = g3d.getEye();
		var oldCenter = g3d.getCenter();
		var oldFovy = g3d.getFovy();
		g3d.setEye(攝像頭位置);
		g3d.setCenter(攝像頭朝向);
		g3d.setFovy(攝像頭張角);
		g3d.setAspect(攝像頭寬高比);
		g3d.validateImp();
		g3d.toDataURL();
		g3d.setEye(oldEye);;
		g3d.setCenter(oldCenter);
		g3d.setFovy(oldFovy);
		g3d.setAspect(undefined);
		g3d.validateImp();
	}

經過測試之後，通過該方法進行影象的獲取會導致頁面有所卡頓，因為是獲取當前 3d 場景的整體截圖，由於當前3d場景是比較大的，所以 toDataURL 獲取影象資訊是非常慢的，因此我採取了離屏的方式來獲取影象，具體方式如下：

1. 建立一個新的 3d 場景，將當前場景的寬度與高度都設定為 200px 的大小，並且當前 3d 場景的內容與主屏的場景是一樣的，HT中通過 new ht.graph3d.Graph3dView(dataModel) 來新建場景，其中的 dataModel 為當前場景的所有圖元，所以主屏與離屏的 3d 場景都共用同一個 dataModel，保證了場景的一致。
2. 將新建立的場景位置設定成螢幕看不到的地方，並且新增進 dom 中。
3. 將之前對主屏獲取影象的操作變成對離屏獲取影象的操作，此時離屏影象的大小相對之前主屏獲取影象的大小小很多，並且離屏獲取不需要儲存原來的眼睛 eyes 的位置以及 center 中心的位置，因為我們沒有改變主屏的 eyes 與 center 的位置， 所以也減少的切換帶來的開銷，大大提高了攝像頭獲取影象的速度。

以下是該方法實現的程式碼：

function getFrontImg(camera, rangeNode) {
		// 擷取當前影象時將該攝像頭所屬的五面體隱藏
		rangeNode.s('shape3d.from.visible', false); 
		rangeNode.s('shape3d.visible', false);
        rangeNode.s('wf.geometry', false);
		var cameraP3 = camera.p3();
		var cameraR3 = camera.r3();
		var cameraS3 = camera.s3();
		var updateScreen = function() {
        	 demoUtil.Canvas2dRender(camera, outScreenG3d.getCanvas());
             rangeNode.s({
             'shape3d.from.image': camera.a('canvas')
             });
             rangeNode.s('shape3d.from.visible', true);
             rangeNode.s('shape3d.visible', true);
             rangeNode.s('wf.geometry', true);
		};
        
		// 當前錐體起始位置
		var realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] / 2, cameraP3[2] + cameraS3[2] / 2]; 
        // 將當前眼睛位置繞著攝像頭起始位置旋轉得到正確眼睛位置
		var realEye = demoUtil.getCenter(cameraP3, realP3, cameraR3); 

		outScreenG3d.setEye(realEye);
		outScreenG3d.setCenter(demoUtil.getCenter(realEye, [realEye[0], realEye[1] ,realEye[2] + 5], cameraR3));
		outScreenG3d.setFovy(camera.a('fovy'));
		outScreenG3d.validate();
		updateScreen();
}

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

 // pointA 為 pointB 圍繞的旋轉點
 // pointB 為需要旋轉的點
 // r3 為旋轉的角度陣列 [xAngle, yAngle, zAngle] 為繞著 x, y, z 軸分別旋轉的角度 
 var getCenter = function(pointA, pointB, r3) {
        var mtrx = new ht.Math.Matrix4();
        var euler = new ht.Math.Euler();
        var v1 = new ht.Math.Vector3();
        var v2 = new ht.Math.Vector3();

        mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));

        v1.fromArray(pointB).sub(v2.fromArray(pointA));
        v2.copy(v1).applyMatrix4(mtrx);
        v2.sub(v1);

        return [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];
  };

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

$\vec OA + \vec OB = \vec 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([{ 
				element: camera.a('canvas')
            }], 240, 240);

程式碼中將 canvas 節點儲存在攝像頭圖元的 attr 屬性下面，之後便可以通過 camera.a(‘canvas’) 來獲取當前攝像頭的畫面。

在皮膚中的每一個控制節點都是通過 formPane.addRow 來進行新增，具體可參考 HT for Web 的表單手冊。之後通過 ht.widget.Panel 將表單皮膚 formPane 新增進 panel 皮膚中，具體可參考 HT for Web 的皮膚手冊。

部分控制程式碼如下：

formPane.addRow([
                  'rotateY',
                  {
                  	slider: {
                  		min: - Math.PI,
                        max: Math.PI,
                        value: r3[1],
                        onValueChanged: function() {
                        	var cameraR3 = camera.r3();
                            camera.r3([cameraR3[0], this.getValue(), cameraR3[2]]);
                            rangeNode.r3([cameraR3[0], this.getValue(), cameraR3[2]]);
                            getFrontImg(camera, rangeNode);
                        }
                    }
                  }
    ], 
    [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 節點。

具體初始化皮膚程式碼如下：

function initPanel() {
    var panel = new ht.widget.Panel();
    var config = {
        title: "攝像頭控制皮膚",
        titleBackground: 'rgba(230, 230, 230, 0.4)',
        titleColor: 'rgb(0, 0, 0)',
        titleHeight: 30,
        separatorColor: 'rgb(67, 175, 241)',
        separatorWidth: 1,
        exclusive: true,
        items: []
    };
    cameraArr.forEach(function(data, num){
        var camera = data['camera'];
        var rangeNode = data['rangeNode'];
        var formPane = new ht.widget.FormPane();
        initFormPane(formPane, camera, rangeNode);
        config.items.push({
            title: "攝像頭" + (num + 1),
            titleBackground: 'rgba(230, 230, 230, 0.4)',
            titleColor: 'rgb(0, 0, 0)',
            titleHeight: 30,
            separatorColor: 'rgb(67, 175, 241)',
            separatorWidth: 1,
            content: formPane,
            flowLayout: true,
            contentHeight: 400,
            width: 250,
            expanded: num === 0
        });
    });
    panel.setConfig(config);
    panel.setPositionRelativeTo('rightTop');
    document.body.appendChild(panel.getView());
    window.addEventListener("resize", function() {
        panel.invalidate();
    });
}

在控制皮膚中可以調整攝像頭的方向，攝像頭監控的輻射範圍，攝像頭前方錐體的長度等等，並且攝像頭的影象是實時生成，以下為執行截圖：

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