导言

平面视觉手艺前几年研讨极为普遍，研讨生时期也以此为课题，重要进修并研讨特性提取和图象婚配方向；现在火遍环球的虚拟现实手艺，也属于平面视觉领域的研讨领域。

平面视觉手艺可研讨内容许多，完成一整套平面视觉显现步骤以下：

• 摄像机标定

• 图象收集

• 特性提起

• 图象婚配

• 深度盘算

• 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].双眼视觉和平面视觉