WebGL立體視覺呈現

導言

立體視覺技術前幾年研究極爲普遍，研究生期間也以此爲課題，主要學習並研究特徵提取和圖像匹配方向；目前火遍全球的虛擬現實技術，也屬於立體視覺領域的研究範疇。

立體視覺技術可研究內容不少，實現一整套立體視覺呈現步驟以下：

• 攝像機標定

• 圖像採集

• 特徵提起

• 圖像匹配

• 深度計算

• 3D呈現

在這就不詳細的扣裏面的概念了，隨便一本圖像處理，立體視覺的書籍都有介紹；

本文主要就獲取深度信息後，如何使用WebGL技術呈現，展開研究；

先睹爲快

深度信息原圖-魚羣

3D呈現效果圖1

3D呈現效果圖2

3D呈現效果圖3-過濾掉不清晰的魚羣

實驗天地

技術點一：NURB曲線

使用了以前研究的NURB曲線技術，能夠參考文章：3DSDK-NURB曲線曲面

核心代碼

var degreeU = 2;
        var degreeV = 3;
        var nurbsSurface = new mono.NurbsSurface(degreeU, degreeV, ctlPoints);
        var surface = window.surface = new mono.Surface(nurbsSurface, 200,200,{
          skyY : 300,
          horizonY: -200,
          earthY : -2000,
          skyColor : new mono.Color('white'),
          horizonColor: new mono.Color('yellow'),
          earthColor: new mono.Color('green'),
        });
        surface.s(
        {
          'm.type': 'basic',//phong
          'm.color': 'white',
          'm.side':mono.DoubleSide,
          'm.ambient': 'white',
          // 'm.wireframe':true,
          'm.wireframeLinewidth': 0.01,
          'm.wireframeLinecolor': 'orange',
          'm.wireframeLineopacity': 1,
          // 'm.texture.image':'./images/UV_Grid_Sm.jpg',
        });

技術點二: 深度信息獲取

通常深度信息是經過，大量的匹配數據，計算而得；通常會使用Matlab、OpenCV等這類的工具處理；現在，只好讀取一張圖片，將RGB值轉化爲深度信息使用好了；

核心代碼

var myImage = new Image();  
      myImage.src = "./images/test.jpg"; 
    
      myImage.onload = function(){
        var scale = 1;
        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        var width = myImage.width * scale, height = myImage.height * scale;
        canvas.width = width  + '';
        canvas.height = height + '';

        var ctx = canvas.getContext('2d');
        ctx.drawImage(myImage, 0, 0,width, height);
        var imageData = ctx.getImageData(0,0,width, height);
        var data = imageData.data;
        var ctlPoints = [];
        for(var i = 0; i < height; ++i){
          var vpoints = [] ;
          for(var j = 0; j < width; ++j){
            var x = i*4*width + 4*j,
            r = data[x],
            g = data[x+1],
            b = data[x+2],
            a = data[x+3];
            vpoints.push(new mono.Vec4((j-width/2)*50,6 * ((r+g+b)/3 - 250/2),(i - height/2)*50,1));
          }
          ctlPoints.push(vpoints);
        }

參考資料

[1].雙眼視覺和立體視覺