Szécsi László 3D Grafikus Rendszerek 17. előadás

Az előadások a következő témára: "Szécsi László 3D Grafikus Rendszerek 17. előadás"— Előadás másolata:

1 Szécsi László 3D Grafikus Rendszerek 17. előadás
Kiegészített valóság Szécsi László 3D Grafikus Rendszerek 17. előadás

2 Négyzetes markerek népszerű kiegészítettvalóság- alkalmazásokban
könnyen detektálható a helyzete becsülhető minden markernek lehet egyedi azonosítója több száz vagy ezer különböző marker lehet

3 ArUco könyvtár OpenCV könyvtármodul js-aruco fő funkciók detectMarkers
drawDetectedMarkers estimatePoseSingleMarkers drawAxis

4 ArUco markerek valahányszor valahányas rács lehetséges markerek száma
fekete vagy fehér mező: 1 bit lehetséges markerek száma Hamming-távolság

5 js-aruco markerek 5x5, plusz fekete keret: 7x7 5 sor, mindegyik lehet
WBBBB WBWWW BWBBW BWWWB 1024 lehetséges marker

6 Markerfelismerés fekete négyzet keresése
adaptív küszöbözés zaj eltávolítása morfológiai operátorokkal kontúrkeresés a fekete régiók körül kontúrok közelítése törtvonalakkal négyszögek kiválasztása négyszögbeli képterület perspektív transzformációja négyzetre azonosító kinyerése NxN-es rácson 0 vagy 1 értékek bent van-e a bitminta a lehetségesek között

7 Videó mint WebGL textúra
kell egy video element a weboldalba lehet láthatatlan lehet a webkamera a forrása minden frameben gl.texImage2D – a videóobjektum átadható image objektum helyett

8 Nem-kettő-hatvány textúra
nem lehet mipmap szűrések bilineárisak (LINEAR), nem trilieárisak (LINEAR_MIPMAP_LINEAR) nincs generateMipmap nem ismétlődhet wrap: CLAMP_TO_EDGE

9 Videó beágyazása theScene.video = document.createElement("video"); theScene.video.width = 512; theScene.video.height = 512; theScene.video.autoplay = true; theScene.video.src = videoURL; theScene.video.addEventListener( "playing", function() { theScene.copyVideo = true; }, true );

10 Videóframe kinyerése nyers adatként
kell egy video element a weboldalba lehet láthatatlan lehet a webkamera a forrása kell egy canvas (2d context) a weboldalra minden frameben videó rajzolása a vászonra vászonról

11 Videó beágyazása theScene.video = document.createElement("video"); theScene.video.width = 512; theScene.video.height = 512; theScene.video.autoplay = true; theScene.video.src = videoURL;

12 Webkamera képe videóként
navigator.mediaDevices.getUserMedia({ audio:false, video:{ width: 512, height: 512 } }).then( function(mediaStream){ theScene.video.src = window.URL. createObjectURL(mediaStream); } );

13 Vászon theScene.video.addEventListener( "playing", function() { theScene.imageGrabberCanvas = document.createElement("canvas"); theScene.imageGrabberCanvas.width = theScene.video.videoWidth; theScene.imageGrabberCanvas.height = theScene.video.videoHeight; theScene.imageGrabberContext = theScene.imageGrabberCanvas.getContext("2d"); }, true );

14 Adatkinyerés this.imageGrabberContext.drawImage( this.video, 0, this.imageGrabberCanvas.width, this.imageGrabberCanvas.height); var imageData = this.imageGrabberContext.getImageData(

15 js-aruco detektálás this.detector = new AR.Detector(); var posit = new POS.Posit(40, this.imageGrabberCanvas.width); var markers = this.detector.detect(imageData);

16 js-aruco posit var corners = markers[0].corners; for (var i = 0; i < corners.length; i++){ var corner = corners[i]; corner.x -= (this.imageGrabberCanvas.width / 2); corner.y = (this.imageGrabberCanvas.height / 2) - corner.y; } var pose = posit.pose(corners);

17 avatar kövesse a markert
this.avatar.position.set( pose.bestTranslation[0], pose.bestTranslation[1], -pose.bestTranslation[2] ).xyz1mul(this.camera.viewMatrixInverse); var m = pose.bestRotation; this.avatar.orientationMatrix.set( m[0][0], m[0][1], m[0][2], 0, m[1][0], m[1][1], m[1][2], 0, m[2][0], m[2][1], m[2][2], 0, 0, 0, 0, 1 ); this.avatar.updateModelTransformation();