WebGL立体视觉呈现

导言

立体视觉技术前几年研究极为广泛，研究生期间也以此为课题，主要学习并研究特征提取和图像匹配方向；目前火遍全球的虚拟现实技术，也属于立体视觉领域的研究范畴。

立体视觉技术可研究内容很多，实现一整套立体视觉呈现步骤如下：

• 摄像机标定
• 图像采集
• 特征提起
• 图像匹配
• 深度计算
• 3D呈现

在这就不详细的扣里面的概念了，随便一本图像处理，立体视觉的书籍都有介绍；

本文主要就获取深度信息后，如何使用WebGL技术呈现，展开研究；

先睹为快

深度信息原图-鱼群 3D呈现效果图1 3D呈现效果图2 3D呈现效果图3-过滤掉不清晰的鱼群 Paste_Image.png Paste_Image.png

实验天地

技术点一：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].双眼视觉和立体视觉