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

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

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

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

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

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

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

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

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 );

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

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;

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); } );

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 );

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

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);

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);

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();