ARKit: Comment détecter, suivre et afficher une vidéo avec Alpha au-dessus d'un plan d'image

L'image étant reconnue et la vidéo affichée en réalité augmentée.

Détecter et afficher une vidéo au-dessus d'une image à l'aide d'ARKit peut s'avérer délicat lorsque vous commencez à développer. Ce guide est destiné à aider rapidement les développeurs à atteindre cet objectif en utilisant ARKit et en combinant le projet exemple de reconnaissance d’image d’Apple avec quelques lignes de code personnalisées.

Tout d'abord, pour implémenter ARKit, nous devons ajouter un storyboard avec un ARSCNView. Cette scène sera chargée d’utiliser la caméra pour suivre le monde réel autour de l’utilisateur. De plus, un dossier de ressources AR Resources doit être ajouté pour stocker toutes les images qui vont être détectées et suivies.

Suivi d'image

Il est important d’ajouter les images que vous souhaitez détecter dans le dossier AR Resources de notre projet:

Remarque: les images à reconnaître peuvent également être obtenues à partir d'une API et créées par programme.
Images du dossier AR Resources

Dans notre ViewController, nous devons ajouter une référence à ARSCNView et appliquer les délégués dans le viewDidLoad. Nous devons également ajouter un accesseur pour la session sceneView.

Dans notre viewDidAppear, nous devons ajouter une méthode resetTracking:

La méthode resetTracking est en charge de:

  • Commencer une session
  • Définition de la configuration ARSession
  • Dire à l'ARSession quelles images connues vont être suivies

Lorsqu'une des images ajoutées au dossier AR Resources est détectée lors de l'utilisation de l'appareil photo du périphérique, ARSCNView appelle le délégué suivant:

Le délégué conserve des informations sur l'image détectée à l'intérieur de l'ancre et, une fois détectée, affiche le nom de l'image détectée:

Image AR Resources détectée.

Affichage d'une vidéo au-dessus d'un plan d'image détecté

Nous pouvons déjà détecter une image avec ce code. Maintenant, l’idée est d’afficher une vidéo au-dessus de l’image. Regardez le délégué où nous obtenons déjà l'image détectée:

L'idée est d'ajouter une méthode displayVideo à l'intérieur d'une aide en passant trois paramètres:

  • l'image de référence détectée
  • le noeud
  • la vidéo à montrer

La méthode displayVideo à l'intérieur de VideoHelper est chargée d'afficher la vidéo. Fondamentalement, il fait ce qui suit:

  1. Obtenir la largeur physique et la hauteur de l'image de référence
  2. Créer un noeud pour contenir le lecteur vidéo
  3. Créer le lecteur vidéo
  4. Ajouter le nœud contenant le lecteur vidéo au nœud détecté d'origine
  5. Configurer le noeud vidéo

La méthode setupVideoOnNode est en charge de la configuration de la vidéo dans le plan de supports de vidéos:

  1. Créer un lecteur vidéo
  2. Créer un SKVideoNode avec le videoPlayer contenant la vidéo
  3. Créez un spriteKitScene pour positionner la vidéo à l'intérieur
  4. Ajouter une transparence alpha
  5. Jouer la vidéo
  6. Boucler la vidéo

Transparence vidéo alpha

Notez que getAlphaShader est ajouté par une classe d'assistance EffectNodeHelper chargée d'appliquer un SKShader. Un objet SKShader contient un shader de fragment OpenGL ES personnalisé, utilisé pour personnaliser le comportement de dessin de nombreux types de nœuds. Dans ce cas, un alpha est appliqué.

Hiérarchie des nœuds illustrée.

Résultat

En conséquence, lorsque l'image reconnaissable est détectée, une vidéo avec transparence alpha est affichée au-dessus du plan détecté.

La vidéo avec transparence alpha est affichée au-dessus de l'image reconnue.

Il est important de mentionner que les images doivent disposer de bons points de référence et de contrastes pour fonctionner avec le suivi des images dans iOS12.

Un projet de démonstration est disponible ici. Il s’agit essentiellement du projet exemple de reconnaissance d’image d’Apple, avec quelques modifications permettant d’ajouter la vidéo au-dessus de l’image.

Ressources utiles

  • Suivi des images avec ARKit 2.0
  • Une introduction au suivi d’image ARKit 2
  • Lecture de vidéos en réalité augmentée avec ARKit

Connaissez-vous des suggestions? Laissez un commentaire! Nous apprécions vraiment cela.

Major League est une agence de recrutement et de recrutement dirigée par Lateral View.