資訊專(zhuān)欄INFORMATION COLUMN
摘要：導(dǎo)言立體視覺(jué)技術(shù)前幾年研究極為廣泛，研究生期間也以此為課題，主要學(xué)習(xí)并研究特征提取和圖像匹配方向目前火遍全球的虛擬現(xiàn)實(shí)技術(shù)，也屬于立體視覺(jué)領(lǐng)域的研究范疇。
導(dǎo)言
立體視覺(jué)技術(shù)前幾年研究極為廣泛，研究生期間也以此為課題，主要學(xué)習(xí)并研究特征提取和圖像匹配方向；目前火遍全球的虛擬現(xiàn)實(shí)技術(shù)，也屬于立體視覺(jué)領(lǐng)域的研究范疇。
立體視覺(jué)技術(shù)可研究?jī)?nèi)容很多，實(shí)現(xiàn)一整套立體視覺(jué)呈現(xiàn)步驟如下：
攝像機(jī)標(biāo)定
圖像采集
特征提起
圖像匹配
深度計(jì)算
3D呈現(xiàn)
在這就不詳細(xì)的扣里面的概念了，隨便一本圖像處理，立體視覺(jué)的書(shū)籍都有介紹；
先睹為快本文主要就獲取深度信息后，如何使用WebGL技術(shù)呈現(xiàn)，展開(kāi)研究；
深度信息原圖-魚(yú)群
3D呈現(xiàn)效果圖1
3D呈現(xiàn)效果圖2
3D呈現(xiàn)效果圖3-過(guò)濾掉不清晰的魚(yú)群
使用了之前研究的NURB曲線(xiàn)技術(shù)，可以參考文章：3DSDK-NURB曲線(xiàn)曲面
核心代碼
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",
});
技術(shù)點(diǎn)二: 深度信息獲取
一般深度信息是通過(guò)，大量的匹配數(shù)據(jù)，計(jì)算而得；一般會(huì)使用Matlab、OpenCV等這類(lèi)的工具處理；如今，只好讀取一張圖片，將RGB值轉(zhuǎn)化為深度信息使用好了；
核心代碼
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].雙眼視覺(jué)和立體視覺(jué)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82274.html
摘要：基于的技術(shù)的圖形組件組件通過(guò)對(duì)底層技術(shù)的封裝，與其他組件一樣，基于統(tǒng)一的數(shù)據(jù)模型來(lái)驅(qū)動(dòng)圖形顯示，極大降低了圖形技術(shù)開(kāi)發(fā)的門(mén)檻，在熟悉數(shù)據(jù)模型基礎(chǔ)上，一般程序員只需要小時(shí)的學(xué)習(xí)即可上手圖形開(kāi)發(fā)。 在數(shù)據(jù)量很大的2D 場(chǎng)景下，要找到具體的模型比較困難，并且只能顯示出模型的的某一部分，顯示也不夠直觀(guān)，這種時(shí)候能快速搭建出 3D 場(chǎng)景就有很大需求了。但是搭建 3D 應(yīng)用場(chǎng)景又依賴(lài)于通過(guò) 3ds...
摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說(shuō)是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過(guò)幾個(gè)使用 Web...
摘要：它與智能手機(jī)相連接，將顯示變成顯示。廠(chǎng)商滑配式設(shè)備包括谷歌和三星。作為一款獨(dú)立的計(jì)算設(shè)備，整合式設(shè)備將配備一整套零部件，價(jià)格甚至高于普通。廠(chǎng)商微軟對(duì)于想初步體驗(yàn)或入門(mén)的用戶(hù)，推薦谷歌的或國(guó)內(nèi)的性?xún)r(jià)比高的滑配式設(shè)備。 本文轉(zhuǎn)自凹凸實(shí)驗(yàn)室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/bVC2cm...
閱讀 2114·2021-11-11 16:55
閱讀 3183·2021-10-11 10:58
閱讀 3061·2021-09-13 10:28
閱讀 3997·2021-07-26 23:57
閱讀 1044·2019-08-30 15:56
閱讀 1341·2019-08-29 13:15
閱讀 1278·2019-08-26 18:18
閱讀 1284·2019-08-26 13:44
