Introduction - PJE-D : Réalité Augmentée par Marqueurs

IntroductionPJE-D : Réalité Augmentée par Marqueurs

2021-2022

[email protected] PJE-D/Introduction 2021-2022 1 / 21

Objectifs (illustration)

vidéo


https://www.fil.univ-lille1.fr/~aubert/pje2/movie/bullu.webm

Présentation

I Génération des tags et impression papier

I Reconnaissance du tag :

• Contour (en utilisant OpenCV.js)⇒ quadrilatère (quad) + capture noir et blanc del’image intérieure au quad

• Détermination de l’identifiant du tag (parcours cases blanches/noires)

I Localisation du tag dans l’image (grâce au quad) 2D (exacte) et 3D (estimée et relative)

I Affichage 3D de l’incrustation (en utilisant https://threejs.org/ ) : mise en place etintroduction aux graphes de scènes sous Three.js

I Interaction : introduction à la sélection/manipulation des incrustations.

I Application : son (grâce à API WebAudio)


https://docs.opencv.org/4.4.0/d5/d10/tutorial_js_root.html

https://threejs.org/

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Mise en place technique

I HTML :

• intégration de la capture : éléments <img> ou <video> (<video> pouvant accueillir le fluxwebcam)

• intégration de l’image source (celle qui sera analysée par OpenCV : c’est une copiede la capture) : élément <canvas>

• intégration des « sorties »(feedback pour les tests, 3D, résultat final) : éléments <canvas>

• intégration OpenCV (<script src=" ... ">), Three.js, et notre module principal(<script src=" ... " type="module">)

I Javascript :

• Initialisations application et intégration webcam• Boucle principale infinie (capture d’une image→ analyse→ update/interaction→

résultat ; et on recommence)

I Serveur local nécessaire (sécurité "cross origin request") :

• python −m http.server suffit (consultation à l’adresse localhost:8000 ; pas d’utilisation de Webpack)• Pendant le développement : ne pas oublier Ctrl+F5 (reload ne suffit pas toujours à cause

de la mise en cache des .js), et ne pas oublier la console pour le debug.

I ⇒ voir premier tp (squelettes + guide d’intégration)


1 Marqueurs


Matrice

I Marqueurs pour la RA (voir "Fiducial Marker") : nombreuses propositions.⇒ reprise des"ArUco Markers" (version initiale)

I Marqueur = grille (appelée matrice du marqueur) de 5×5valeurs 0 ou 1 (0 = noire et 1 = blanche)

I + un bord noir pour aider la reconnaissance

I La matrice du marqueur est construite à partir de sonidentifiant


Conditions de construction du marqueurI Robuste à l’identification (la capture de l’image

peut être imprécise)

• Tolérance à l’erreur (confusion possible casenoire/case blanche)

• Eviter la confusion entre 2 marqueurs (lesmarqueurs doivent être suffisammentdistincts)

I Identification unique et invariante par rotation

I Identification de la rotation (pour la bonneorientation de l’incrustation)

I « Meilleure » génération possible?

I voir par exemple "Generation of fiducial marker dictionaries using mixed integer linearprogramming",S. Garrido-Jurado, R. Muñoz Salinas, F.J. Madrid-Cuevas, R.Medina-Carnicer, Pattern Recognition :51, 481-491,2016"

I ⇒ version initiale (génération simple mais pas sans défaut)


Génération marqueur

I Chaque ligne du marqueur (orientation initiale et sans le bord) est constituée d’un motifparmi 4 possibles (1 ligne interpétée comme une valeur 0,1,2 ou 3 : nombre quaternaire).

I Valeur = 0 : motif [1,0,0,0,0]

I Valeur = 1 : motif [1,0,1,1,1]

I Valeur = 2 : motif [0,1,0,0,1]

I Valeur = 3 : motif [0,1,1,1,0] (orientation?)

I Les 5 lignes du marqueur constituent alors un nombre écrit en base 4 (ligne du haut =poids fort)

I 45 = 1024 marqueurs différents possibles


2 Extraction marqueur de l’image


Objectif

I Donnée :

I Résultat :

I On se contente d’appliquer directement le principe, sans "précautions" :

• Sensible aux conditions (luminosité, contraste, ombres, mouvement flouté)• Sensible aux paramètres de traitement de l’image (paramètres des fonctionnalités

d’OpenCV)• Pas de prise en compte des caractéristiques de la caméra (centre d’ouverture,

déformations, ...)


Les étapes de l’extraction du marqueur

Source Détection contour Transformer image Monochrome


3 Détection de contours


Principe

I Contour = frontière entre 2 « zones »de l’image (sur des critères d’intensité lumineuse parexemple)

I Plus simple à définir sur une image en niveau de gris (chaque pixel possède une seulevaleur entre 0 et 255 correspondant à une intensité lumineuse) : frontière = forte variationsd’intensité lumineuse.

1 Convertir l’image en niveau de gris

2 Distinguer les pixels qui ont une forte variation de valeurs (autour de lui) : par seuillageadaptatif

3 Connecter ces pixels de fortes variations, qui sont proches les uns des autres, pour en faireune ligne polygonale.


Niveau de gris (avec OpenCV.js)

/ / s rc = l ’ image source ( l ’ image de " dé pa r t " )/ / ds t = l ’ image d e s t i n a t i o n ( l ’ image " r é s u l t a t " )/ / En openCV les images sont repr ésentées dans un ob je t Mat ( i . e . mat r ice de p i x e l s )

l e t s rc = cv . imread ( " source " ) ; / / l e c t u r e : " source " = i d d ’ un é l ément <img> ou <canvas> ( l ’ é l ément DOM peut ê t r e auss i d i rec tement passé )l e t ds t= new cv . Mat ( ) ; / / i n i t i a l i s a t i o n d ’ une image " v ide "

cv . cv tCo lo r ( src , dst , cv .COLOR_RGBA2GRAY) ; / / convers ion de l ’ image couleur src ( source ) dans l ’ image dst ( d e s t i n a t i o n )

cv . imshow ( " feedback1 " , ds t ) ; / / v i s u a l i s a t i o n du r é s u l t a t dans l ’ é l ément HTML d ’ i d " feedback1 " )

dst . de le te ( ) ; / / impé r a t i f pour ne pas sa tu re r l a mémoire : pas de garbage c o l l e c t o r pour les ob je t s OpenCV. j ssrc . de le te ( ) ;


Seuillage (Threshold)I Consiste à modifier la valeur src(x ,y) de chaque pixel (x ,y) selon un seuil t . Si

src(x ,y)≤ t , alors dst(x ,y) = 0, sinon dst(x ,y) = v une valeur donnée.

I Remarques :

• en niveau de gris, les valeurs de pixels sont (par défaut) dans [0,255] : 0 = noir, 255 = blanc

• la représentation des valeurs d’un pixel peut se décliner en de (très) nombreuses façons (formats, autres modèles de couleurs, ...)

. . .cv . cv tCo lo r ( src , dst , cv .COLOR_RGBA2GRAY) ; / / ds t en niveau de g r i scv . th resho ld ( dst , dst , 100 , 255 , cv .THRESH_BINARY ) ; / / t =100 , 255= va leur donnée s i au dessus du s e u i l t

/ / remarque : dst −>dst ok s i images source / d e s t i n a t i o n exactement même formatcv . imshow ( " feedback1 " , ds t ) ;

. . .

t=100 t=80 t=190

I quel est le « bon » seuil ? (sensible aux variations de luminosités sur l’image : ombres,éclairage, etc)


Seuillage adaptatif

I Pour chaque pixel (x ,y), la valeur de seuil t est calculée selon son voisinage (moyennedes valeurs des pixels autour de (x ,y) par exemple).

I La valeur de seuil est donc différente pour chaque pixel (une zone d’ombre aura un seuilplus faible qu’une zone lumineuse)

. . .cv . cv tCo lo r ( src , dst , cv .COLOR_RGBA2GRAY) ; / / ds t en niveau de g r i scv . adapt iveThreshold ( dst , dst ,255 , cv .ADAPTIVE_THRESH_MEAN_C, cv .THRESH_BINARY, 5 , 3 . 0 ) ;

/ / 5 = blockSize = bloc de 5x5 p i x e l s dont l e cent re est l e p i x e l t r a i t é/ / 3.0 = va leur à en lever à l a moyenne des va leurs des p i x e l s du bloc/ / => s e u i l t =moyenne des p i x e l s du bloc − 3.0 ( à t e s t e r en TP)

cv . imshow ( " feedback1 " , ds t ) ;. . .

blockSize = 3 blockSize = 5 blockSize = 11

I Atténuer le « bruit » dans l’image?


Filtrage

I Exemple : si une couleur est uniforme sur une partie de l’image, il suffit qu’un seul pixel soitdifférent (et supérieur à la moyenne) pour qu’il devienne blanc (cf compression jpeg,précision capteur, ...). Ex sur 1 dimension : 10,10,10,11,10,10,10⇒ 0,0,0,255,0,0,0 (blocde 3)

I Pour atténuer : on affecte à chaque pixel (avant le seuillage) la valeur moyenne des pixelsde son voisinage.

I Visuellement cela résulte en un "floutage" de l’image (opération de blur). Car les transitionsentre pixels sont lissées.

I Exemple : 0,0,12,12,0,0⇒ 0,4,8,8,4,0 (bloc de voisinage de 3 pixels)

. . .cv . cv tCo lo r ( src , dst , cv .COLOR_RGBA2GRAY) ; / / ds t en niveau de g r i scv . b l u r ( dst , dst , { width : 11 , he igh t : 1 1 } ) ;

. . .


Blur + Threshold

. . .cv . cv tCo lo r ( src , dst , cv .COLOR_RGBA2GRAY) ;cv . b l u r ( dst , dst , { width : 5 , he igh t : 5 } ) ;cv . adapt iveThreshold ( dst , dst ,255 , cv .ADAPTIVE_THRESH_MEAN_C, cv .THRESH_BINARY, 5 , 3 . 0 ) ;

. . .

Niveau de gris Blur + Thresh Thresh Sans blur


Blur + Threshold Gaussien

I La moyenne pour le seuil adaptatif est effectuée sur tout le block. Or une valeur pluspertinente pour le seuil serait de donner moins de poids aux pixels éloignés.

I ⇒ THRESH_GAUSSIAN (pour aller plus loin : notion de "convolution").

. . .cv . cv tCo lo r ( src , dst , cv .COLOR_RGBA2GRAY) ;cv . b l u r ( dst , dst , { width : 5 , he igh t : 5 } ) ;cv . adapt iveThreshold ( dst , dst ,255 , cv .ADAPTIVE_THRESH_GAUSSIAN_C, cv .THRESH_BINARY, 5 , 3 . 0 ) ;

. . .

Gray Scale Blur + Thresh Gaussian Blur + Thresh Mean


Extraction contours

I cv.findContour(...) : détermine les lignes polygonales à partir des pixels blancs (nonnuls) de l’image.

I 1 contour = 1 succession de sommets (x ,y) du polygone représenté en OpenCV par Mat(...).

. . .cv . b l u r ( dst , dst , { width : 5 , he igh t : 5 } ) ;cv . adapt iveThreshold ( dst , dst ,255 , cv .ADAPTIVE_THRESH_GAUSSIAN_C, cv . THRESH_BINARY_INV, 7 , 4 . 0 ) ;

/ / BINARY_INV ? échange blanc / n o i r ( car contour e x t r a i t depuis p i x e l s blancs )

l e t a l lCon tou r=new cv . MatVector ( ) ; / / tous les contours stockés dans un tab leau de Matl e t h ie ra rchy=new cv . Mat ( ) ; / / mémorise l a topo log ie des contours

cv . f indContours ( dst , a l lContour , h ierarchy , cv .RETR_EXTERNAL, cv .CHAIN_APPROX_TC89_L1 ) ;/ / RETR_EXTERNAL : uniquement les contours exté r i e u r s ( non i n c l u t dans un aut re )

l e t viewCnt = src . c lone ( ) ; / / pour t r a c e r ( avec OpenCV) contour sur image sourcecv . drawContours ( viewCnt , a l lContour , −1 ,new cv . Scalar (255 ,0 ,0 ,255) ,2 , cv . LINE_4 ) ;

cv . imshow ( " feedback1 " , ds t ) ; cv . imshow ( " feedback2 " , viewCnt ) ;. . .

/ / pour mémo : ne s u r t o u t pas o u b l i e r l es de le te !dst . de le te ( ) ; s rc . de le te ( ) ; viewCnt . de le te ( ) ; a l lCon tou r . de le te ( ) ; h ie ra rchy . de le te ( ) ;


Critères sur les contours des marqueurs

I On élimine (le plus possible) les contours qui ne peuvent pas correspondre à un marqueur.I Les critères pouvant être retenus :

• Un marqueur sur l’image doit être un quadrilatère : retenir uniquement les contours à4 sommets.• Cependant, la moindre déformation du marqueur, ou imprécision, peut ajouter

des sommets au contour détecté.• Modifier auparavant les contours avec la fonction cv.approxPolyDP (supprime

les sommets qui génèrent peu d’angles sur le polygone)• Dimensions (éliminer si beaucoup trop grand, ou beaucoup trop petit), proportions en

largeur/hauteur relativement similaires (le marqueur est carré ; attention cependant :pas carré sur l’image), ...

I Pour les contours sélectionnés : nous allons ensuite extraire l’image intérieure au contour,puis passer à la reconnaissance de l’identifiant (et son orientation).


Documents

Introduction - PJE-D : Réalité Augmentée par Marqueurs