資訊專欄INFORMATION COLUMN
摘要：導言立體視覺技術前幾年研究極為廣泛，研究生期間也以此為課題，主要學習并研究特征提取和圖像匹配方向目前火遍全球的虛擬現實技術，也屬于立體視覺領域的研究范疇。
導言
立體視覺技術前幾年研究極為廣泛，研究生期間也以此為課題，主要學習并研究特征提取和圖像匹配方向；目前火遍全球的虛擬現實技術，也屬于立體視覺領域的研究范疇。
立體視覺技術可研究內容很多，實現一整套立體視覺呈現步驟如下：
攝像機標定
圖像采集
特征提起
圖像匹配
深度計算
3D呈現
在這就不詳細的扣里面的概念了，隨便一本圖像處理，立體視覺的書籍都有介紹；
先睹為快本文主要就獲取深度信息后，如何使用WebGL技術呈現，展開研究；
深度信息原圖-魚群
3D呈現效果圖1
3D呈現效果圖2
3D呈現效果圖3-過濾掉不清晰的魚群
使用了之前研究的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].雙眼視覺和立體視覺
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82274.html
摘要：基于的技術的圖形組件組件通過對底層技術的封裝，與其他組件一樣，基于統一的數據模型來驅動圖形顯示，極大降低了圖形技術開發的門檻，在熟悉數據模型基礎上，一般程序員只需要小時的學習即可上手圖形開發。 在數據量很大的2D 場景下，要找到具體的模型比較困難，并且只能顯示出模型的的某一部分，顯示也不夠直觀，這種時候能快速搭建出 3D 場景就有很大需求了。但是搭建 3D 應用場景又依賴于通過 3ds...
摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
閱讀 2105·2021-11-11 16:55
閱讀 3175·2021-10-11 10:58
閱讀 3046·2021-09-13 10:28
閱讀 3974·2021-07-26 23:57
閱讀 1018·2019-08-30 15:56
閱讀 1337·2019-08-29 13:15
閱讀 1268·2019-08-26 18:18
閱讀 1274·2019-08-26 13:44
