WebGL立体视觉呈现

xeblog 发布于2019-08-20 15:28 / 2682人阅读

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

导言

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

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

摄像机标定

图像采集

特征提起

图像匹配

深度计算

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].双眼视觉和立体视觉

GPU云服务器云服务器 WebGL webgl.-canva h5 webrtc webgl 数据呈现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82274.html

基于 HTML5 WebGL 的 3D 网络拓扑图

摘要：基于的技术的图形组件组件通过对底层技术的封装，与其他组件一样，基于统一的数据模型来驱动图形显示，极大降低了图形技术开发的门槛，在熟悉数据模型基础上，一般程序员只需要小时的学习即可上手图形开发。在数据量很大的2D 场景下，要找到具体的模型比较困难，并且只能显示出模型的的某一部分，显示也不够直观，这种时候能快速搭建出 3D 场景就有很大需求了。但是搭建 3D 应用场景又依赖于通过 3ds...

doodlewind 2019-08-20 17:39 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
浅谈 WebVR

摘要：它与智能手机相连接，将显示变成显示。厂商滑配式设备包括谷歌和三星。作为一款独立的计算设备，整合式设备将配备一整套零部件，价格甚至高于普通。厂商微软对于想初步体验或入门的用户，推荐谷歌的或国内的性价比高的滑配式设备。本文转自凹凸实验室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/bVC2cm...

yexiaobai 2019-08-22 10:38 评论0 收藏0