Présentation

Réaction Native, avec sa promesse de réutilisation de code sur iOS et Android, offre une plateforme attrayante pour la prestation efficace des expériences d'AR. Cependant, intégrer AR dans React Native n'est pas simple : il faut relier les cadres d'AR natifs et gérer des cycles de vie de session complexes. Cet article fournit un guide complet axé sur la production pour intégrer deux technologies d'AR principales – Vuforia[ et ARKit[ – dans Réaction Native. Vous apprendrez les modèles architecturaux, les processus d'intégration étape par étape, les pièges communs et les meilleures pratiques nécessaires pour construire des fonctionnalités d'AR robustes sans sacrifier les avantages de la plateforme.

Réagir Native comme une fondation multiplateforme pour l'AR

React Native permet aux développeurs d'écrire la logique d'application de base dans JavaScript et de rendre les composants natifs. Lorsqu'il s'agit de la réalité augmentée, la logique de rendu et de suivi doit généralement fonctionner dans la couche native en raison des exigences de performance. Cela signifie que toute intégration AR dans React Native dépendra d'un pont natif de module qui expose les capacités AR au côté JavaScript. Le pont subit des contraintes aériennes, mais avec une conception soignée, les fonctionnalités AR peuvent être livrées avec une latence acceptable pour la plupart des cas d'utilisation.

Choix entre Vuforia et ARKit

La décision entre Vuforia et ARKit repose souvent sur les exigences de la plateforme et sur la complexité des fonctionnalités. Vuforia prend en charge iOS et Android, ce qui en fait le choix naturel pour les applications qui doivent fournir des fonctionnalités AR identiques sur les deux plateformes. Il offre des capacités avancées comme la reconnaissance d'image, le suivi d'objets et les boutons virtuels qui fonctionnent sur une large gamme d'appareils. ARKit[ est exclusif à iOS et exploite l'intégration de matériel et de logiciels logiciels Apple, offrant une détection de plan supérieure, la texturation d'environnement et le suivi de visage.

Plongez profondément dans l'intégration Vuforia avec Réact Native

Prérequis et configuration

Avant d'écrire un code, vous devez obtenir une clé de licence Vuforia à partir du Portail développeur Vuforia. Vous devrez également télécharger le SDK natif Vuforia pour Android et iOS. Réagir Les projets natifs doivent être créés en utilisant le CLI (pas Expo si vous avez besoin d'accès natif). Les dossiers de projets et doivent être configurés manuellement. Sur Android, ajoutez le SDK Vuforia comme AAR ou via Maven. Sur iOS, vous lierez le cadre Vuforia et modifierez les paramètres de votre projet Xcode pour inclure les capacités requises comme l'utilisation de la caméra.

Relier Vuforia via des modules autochtones

Le modèle le plus courant est de créer un module natif qui gère le cycle de vie du moteur Vuforia. Du côté Android, vous créez un qui s'étend . Ce module va gérer l'initialisation du moteur Vuforia, charger un jeu de données et démarrer la caméra AR. Le côté JavaScript reçoit des événements (par exemple, ) via un . Une implémentation typique exporte des méthodes comme , et . Chaque méthode retourne une Promise afin que JavaScript puisse attendre la configuration asynchrone.

Sur iOS, un analogue utilise le pont Objective-C. VuforiaS iOS SDK est construit sur C++, donc vous pouvez avoir besoin de créer un wrapper Objective-C++. La clé est d'exécuter la boucle de rendu Vuforia sur un thread séparé et passer les cadres de caméra à travers un callback de rendu. Le pont React Native peut alors être utilisé pour envoyer des événements de détection de cible au JavaScript.

Mise en œuvre des cibles d'image et des boutons virtuels

Les cibles d'image sont au cœur de nombreuses expériences Vuforia. Vous devrez télécharger des images de référence vers le Gestionnaire de cible de Vuforia pour générer un jeu de données, qui est ensuite inclus dans vos ressources app. Dans le code natif, après avoir chargé le jeu de données, vous avez configuré un auditeur . Lorsque Vuforia détecte une cible, il déclenche un rappel. Vous pouvez pipelineler cette détection vers JavaScript en émettant un événement qui inclut l'ID cible et la matrice de transformation. Pour les boutons virtuels, vous définissez des régions rectangulaires dans une image cible.

Gestion des autorisations de caméras et gestion des séances

Sur Android, utilisez l'API dans React Native. Sur iOS, le dans Info.plist suffit, mais le module natif devrait demander l'autorisation au moment de l'exécution. La gestion de la session est critique : vous devez interrompre le moteur Vuforia lorsque votre application va en arrière plan et la reprendre au premier plan. Ceci se fait généralement en écoutant les événements du cycle de vie de React Native ()) et en appelant des méthodes de pause/resommation natives.

Pièges et solutions communs

  • Fonctionnement de l'ensemble de données faible:[ Charger les ensembles de données asynchrone et afficher un indicateur de chargement dans la couche JS. Utilisez le module natif.
  • Conflits de rendu :[ Vuforia attend un contexte OpenGL. Si vous utilisez une bibliothèque d'animation tierce qui crée également un contexte GL, vous devez partager le contexte via `EGLContext` sur Android ou `EAGLContext` sur iOS.
  • Les fuites de mémoire:[ Les modules natifs doivent bien libérer les objets Vuforia. Utilisez des références faibles dans la couche de pontage et appelez `vuforia.deinit()` dans la méthode de nettoyage du module.
  • Performance sur les appareils bas de gamme:[ Réduisez la résolution de la caméra via VuforiaS `CameraDevice.setCameraConfiguration()` pour maintenir 30 FPS.

Plongez profondément dans l'intégration ARKit avec Réact Native

Utilisation de bibliothèques comme réact-native-arkit ou ViroReact

Le chemin le plus rapide vers ARKit dans React Native est d'utiliser une bibliothèque existante. était un pionnier précoce mais n'est plus activement maintenu. ViroReact prend en charge à la fois ARKit et ARCore (Google , Android AR framework) et fournit une API de style React déclarative avec des composants comme `` et ``. Pour les projets qui nécessitent une personnalisation plus profonde ou sont liés à iOS seulement, construire votre propre module natif autour d'ARKit est souvent plus durable. Nous nous concentrerons sur l'approche de module natif personnalisé parce qu'il vous donne le contrôle complet et évite la dépendance sur les cycles de mise à jour tiers.

Mise en place d'une session AR

Les sessions ARKit sont gérées par `ARSession`. Votre module natif créera et exécutera une session avec un objet de configuration (par exemple `ARWorldTrackingConfiguration`). Sur le côté Objective-C, vous créez une sous-classe `UIView` qui héberge un `ARSCNView` (SceneKit) ou `ARView` (RealityKit). Cette vue est retournée à React Native via le modèle `RCTViewManager`. Le gestionnaire de vue expose des propriétés comme `runConfiguration` qui déclenchent la session. JavaScript peut ensuite appeler des méthodes via la vue ='s ref. Par exemple:

Le délégué de session (`ARSessionDelegate`) reçoit des mises à jour sur les ajouts d'ancrage, les modifications de cadre et les erreurs. Vous les reliez à JavaScript en utilisant des événements.

Détection de l'avion et placement de l'objet

La détection plane (horizontale et verticale) est une fonction de pointe. Lorsqu'une ancre est détectée, votre méthode déléguée `didAdd node` est appelée. Vous pouvez ajouter un noeud plan transparent à cette position de l'ancre. Pour permettre aux utilisateurs de placer des objets virtuels, vous appuyez sur le test contre la scène en utilisant `hitTest:types:` et de convertir les coordonnées de frappe en position 3D. Cette position peut être renvoyée à React Native, qui peut ensuite demander au module natif de placer un modèle. Pour de meilleurs résultats, utilisez l'option `.existatePlaneUsingExtent`. Exposer une méthode comme `placeObjectAtPosition(x, y, z, modelName)` qui ajoute une SCNNode avec la géométrie du modèle.

Suivi du visage et filtres

Dans le module natif, lorsqu'un ancre de visage est ajouté, vous récupérez les sommets `ARFAceGeometry` et les formes de mélange. Ces coefficients de forme de mélange (par exemple, `jawOpen`, `browDownLeft`) peuvent être émis en tant qu'événement JavaScript, permettant à React Native d'animer un avatar 2D ou de modifier des éléments d'interface utilisateur. La performance est critique ici : n'essayez pas d'envoyer chaque image des données ; au lieu, les événements de gaz à 30 mises à jour par seconde et utilisez `requestAnimationFrame` sur le côté JS pour interpoler.

Considérations relatives aux performances

Pour les données continues comme les positions de cadre de caméra, utilisez un callback natif qui met à jour une mémoire partagée et permet à JavaScript de lire via un minuteur. Une autre option est de rendre le contenu 3D uniquement en code natif et seulement envoyer des commandes de haut niveau (par exemple, -show car at position) sur le pont. Maintenez un 60 FPS stable en préchargeant les modèles 3D comme fichiers SCNScene et en les encastrant dans le module natif.

Combler l'écart : Vuforia vs ARKit – Une comparaison pratique

Support multiplateforme

  • Vuforia: Fonctionne sur iOS et Android; prend en charge une large gamme d'appareils, y compris le matériel ancien. Idéal pour les applications d'entreprise qui doivent fonctionner sur diverses flottes.
  • ARKit: iOS seulement; nécessite une puce A9 ou une version ultérieure (iPhone 6S et plus récent).

Capacités de suivi

  • Vuforia:[ Reconnaissance supérieure de l'image, suivi multi-cible et boutons virtuels. Bon pour les AR à base de marqueurs (p. ex., emballage de produits).
  • ARKit: Excellente détection sans marque, détection de plan, reconstruction de scène et capture de mouvement. Mieux pour l'environnement-connaissant AR.

Facilité d'intégration avec les autochtones réagissent

  • Vuforia: Nécessite plus de code natif manuel en raison de son initialisation complexe et de la gestion du contexte OpenGL. La courbe d'apprentissage est plus raide.
  • ARKit: Relativement simple si vous êtes familier avec le développement natif iOS. RealityKit simplifie le rendu mais ajoute une autre couche d'abstraction.

Coût et délivrance de licences

  • Vuforia: Licence par application, avec un niveau gratuit limité à 1000 reconnaissances par mois. Des licences d'entreprise sont disponibles.
  • ARKit: Gratuit avec l'adhésion au programme Apple Developer (99$/an). Pas de redevances par application.

Pratiques exemplaires pour réagir au développement des AR autochtones

Optimisation des performances

Les expériences d'AR exigent des taux de trame élevés. Toujours profiler votre application en utilisant des instruments comme `Xcode=" Core Animation` ou `Android Studio=" GPU profiler`. Réduire les re-renders inutiles dans React Native en utilisant `PureComponent` ou `React.memo` pour les composants liés à AR. Conserver la lumière du fil JavaScript: éviter les calculs lourds dans les callbacks qui font feu chaque cadre. Décharger la physique ou la détection de collision au code natif. Si vous devez mettre à jour des éléments d'AR en fonction des changements d'état, utilisez `Animated` avec `useNativeDriver: true` dans la mesure du possible, ou des mises à jour par lot avec `requestAnimationFrame`.

Conception d'expérience utilisateur pour AR

La conception pour AR va au-delà de la pratique UX mobile. Les utilisateurs ont besoin d'un système d'affichage clair pour comprendre comment interagir avec le monde AR. Fournissez des repères visuels (par exemple, un plan translucide) pour indiquer où la session AR est active. Poignez les échecs de suivi gracieusement : si ARKit perd le suivi (par exemple, faible lumière), affichez un message d'avertissement.

Essais et débogage

Utilisez des dispositifs physiques pour tous les tests. Tirez parti de la connexion à `console.log` dans JavaScript et `NSLog`/`Log.d` dans le code natif. Pour Vuforia, l'application Vuforia Viewer peut aider à tester les images cibles avant de mettre en œuvre l'application complète. Pour ARKit, l'aperçu `ARQuickLook` peut valider les modèles 3D. Implémentez un superposition de débogage qui montre l'état de suivi actuel, le taux de trame et tout message d'erreur. Ce superposition peut être remorqué par un geste secret (par exemple, un tap à trois doigts) pour les constructions internes.

Orientations futures et technologies émergentes

Si Vuforia et ARKit restent dominants, l'écosystème AR évolue. Google ARCore (Android) se joigne à ARKit pour iOS pour créer une fondation multiplateforme, mais sans les prouesses de reconnaissance d'image de Vuforia. RealityKit 2 sur iOS prend désormais en charge la capture d'objets et le rendu plus réaliste. L'AR Web avec WebXR gagne en traction, mais ses performances traquent l'AR natif. Pour les développeurs Réact Native, une tendance prometteuse est l'émergence de ponts plus robustes comme le prochain "réact-native-visionos" qui apporte AR à Apple Vision Pro. De plus, l'optimisation du modèle côté serveur (par exemple, la compression des fichiers GLTF) deviendra critique à mesure que les niveaux de contenu AR seront atteints.

Conclusion

L'intégration de la réalité augmentée dans React Native exige une bonne compréhension du développement natif, une ingénierie de performance soignée et une compréhension claire des différences entre Vuforia et ARKit. Vuforia offre une cohérence multiplateforme et un suivi robuste basé sur des marqueurs, ce qui la rend adaptée aux applications d'entreprise et de détail. ARKit offre une compréhension inégalée de la scène et une qualité visuelle pour les expériences exclusives par iOS. En suivant les modèles d'intégration décrits dans cet article – construire des modules natifs, gérer des sessions et optimiser le pont – vous pouvez fournir des fonctionnalités AR polies qui fonctionnent sans heurts dans React Native. Toujours tester sur des appareils réels, profiler vos cycles de rendu, et garder l'expérience utilisateur à l'avant-garde. Grâce à ces pratiques, votre application React Native peut offrir des capacités AR qui se sentent natives et convaincantes, conduire une engagement plus profond et mettre votre produit à part dans un marché concurrentiel.