Placer des objets AR aux coordonnées GPS en réalité augmentée : 8 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Cette instructable va passer en revue la création d'une application mobile pour placer des objets AR aux coordonnées GPS avec ARkit et ARCore en utilisant Unity3D. Je vais vous guider dans la configuration d'un projet que j'ai réalisé à l'aide de Mapbox qui nous permet de marquer des messages à des emplacements GPS particuliers et de les écrire dans une base de données GameSparks.

Tous les logiciels et projets que nous utiliserons ici sont gratuits.

Téléchargez Unity 3D ici si vous ne l'avez pas déjà:

unity3d.com/

Étape 1: obstacles…

Ce n'est donc pas l'application la plus simple à créer avec les limitations actuelles du GPS mobile et de la boussole mobile.

Pour être honnête, les objets apparaissent là où ils sont censés être environ 50% du temps. Les résultats ne sont donc pas excellents, mais ils deviennent plus précis à mesure que vous vous rapprochez des objets.

Quoi qu'il en soit, je pense qu'une meilleure façon d'utiliser une RA basée sur le GPS à ce stade serait d'utiliser une carte comme le fait pokemon go et lorsque vous vous approchez d'un objet, la caméra s'ouvre et vous ne voyez que cet objet juste devant vous. À l'avenir, j'aimerais faire un tutoriel complet sur une implémentation plus simple comme celle-ci.

Quoi qu'il en soit, j'ai déjà utilisé Mapbox et je sais qu'ils ont une classe de conversion qui a des fonctions pour convertir les coordonnées GPS en coordonnées mondiales Unity. J'ai pensé que je pouvais simplement transmettre des coordonnées GPS et elles apparaîtraient là où je les voulais. N'a pas fonctionné.

Les objets s'affichent correctement les uns par rapport aux autres mais ils n'étaient jamais au bon endroit. J'ai donc fait quelques recherches et j'ai découvert que ma caméra Unity devait être alignée avec le nord géographique pour que les objets s'affichent au bon endroit.

Le problème est que la boussole de votre téléphone n'est jamais totalement précise.

Étape 2: Boussole stupide

Le principal problème est que lorsque vous placez des objets loin de l'appareil photo, si l'idée du nord géographique de votre téléphone est décalée, même de quelques degrés, les objets au loin apparaîtront très loin.

J'ai failli abandonner cette aventure mais un ami m'a parlé de ce projet GitHub:

github.com/mapbox/mapbox-ar-unity

Il s'agit d'une tentative de faire une RA "à l'échelle mondiale" à partir de Mapbox où les objets sont ancrés aux coordonnées GPS afin que les expériences de réalité augmentée puissent fonctionner à l'extérieur sur de longues distances au lieu de simplement à l'intérieur d'une petite pièce de votre maison.

Leur projet utilise des deltas de position AR et des deltas de position GPS pour calculer un angle qui est le décalage entre la caméra AR et le nord géographique. Donc, en gros, prenez une lecture GPS lorsque l'utilisateur démarre l'application et demandez-lui de marcher en ligne droite et de prendre une autre lecture GPS. Ensuite, avec ces deux points, vous pouvez dire dans quelle direction cette personne marchait (en supposant que sa caméra pointe dans la direction dans laquelle elle marche). Ils ont découvert que c'était plus précis que d'utiliser la boussole au téléphone.

L'autre problème qu'ils tentent de résoudre est la dérive avec ARkit. Le suivi est correct à l'intérieur d'une petite pièce, mais lorsque vous marchez à l'extérieur sur de longues distances, les objets AR finissent par dériver loin de l'endroit où ils sont censés être.

Étape 3: Enfin une solution

Ce projet Mapbox offrait donc un moyen d'obtenir une direction d'orientation fiable par rapport au nord géographique, il ne restait donc plus qu'à placer les objets dans le monde.

J'ai fini par étendre un peu cet exemple pour pouvoir marquer un message texte à un emplacement GPS particulier, puis écrire ces informations dans une base de données GameSparks. C'est ce que je vais vous montrer comment utiliser.

Le seul problème avec ce projet est que vous devez obtenir un bon alignement avant de pouvoir l'utiliser.

Ce que je veux dire par alignement, c'est que puisque Mapbox utilise des deltas de position pour calculer le cap, lorsque vous ouvrez l'application pour la première fois et que vous devez vous assurer qu'un plan de masse est détecté, puis marcher en ligne droite pendant un certain temps jusqu'à ce qu'un alignement correct soit calculé.

En ce sens, l'UX est un autre obstacle, mais dans les améliorations du projet, ils donnent un exemple de placement de cubes devant l'utilisateur à parcourir pour assurer un bon alignement.

Alors maintenant que vous connaissez les limites de ce projet, laissez-moi vous montrer comment l'utiliser pour que les gars puissent s'amuser. Vous devrez finalement créer un compte mapbox et un compte gamesparks, tous deux gratuits. J'ai utilisé des parcs de jeux juste pour pouvoir enregistrer les coordonnées GPS quelque part, car pendant les tests, vous redémarrerez et reconstruisez l'application assez souvent.

De plus, cela devrait fonctionner avec ARkit et ARcore, mais je n'ai qu'un iPhone pour le moment, c'est donc tout ce que j'ai pu tester.

Étape 4: Permet de faire fonctionner l'application

Commencez par télécharger ce projet depuis GitHub:

Enregistrez le fichier sur votre bureau et ouvrez-le dans Unity.

Accédez au fichier, créez les paramètres et basculez votre plate-forme sur Android ou IOS.

Allez maintenant sur Mapbox.com et créez un compte si vous n'en avez pas déjà un.

Saisissez votre clé API et revenez à Unity, cliquez sur l'onglet Mapbox en haut, puis cliquez sur configurer. Collez-y votre clé API.

Créez maintenant un compte sur GameSparks.com et cliquez sur le bouton en haut à droite pour créer une nouvelle application.

Appelez-le comme vous voulez et copiez votre clé API et votre secret d'application. Revenez à Unity et trouvez l'onglet GameSparks en haut. Cliquez sur configurer et collez-y également vos informations d'identification.

Étape 5: Configurez GameSparks

Maintenant, avant que l'application ne fonctionne, nous devons configurer notre base de données.

GameSparks utilise noSQL, nous devons donc d'abord créer une collection et ajouter les événements que notre application utilise pour lire, écrire et supprimer du serveur.

Créez d'abord une nouvelle collection sur le site Web de GameSparks et appelez-la comme vous voulez.

Maintenant, nous devons créer 3 événements.

La première chose que l'application doit faire est d'écrire l'objet message dans la base de données.

Un message a une latitude, une longitude, puis le texte du message.

Allez donc dans le configurateur et ajoutez un nouvel événement. Créez le code court "SAVE_GEO_MESSAGE".

Mettez ce que vous voulez pour le nom et la description.

Ajoutez le code court pour 3 attributs:

"LAT" "LON"

"TEXTE"

Définissez chaque type de données sur chaîne et définissez la valeur par défaut sur 0. Définissez le type d'agrégation par défaut de chacun sur « utilisé dans le script ».

Étape 6: Ajoutez les événements finaux…

L'application doit également charger tous les messages de la base de données et les lire dans Unity au démarrage de l'application afin que nous puissions placer des messages AR stockés dans la base de données.

Créez un autre événement et appelez-le "LOAD_MESSAGE"

Cet événement n'a besoin d'aucun attribut. Encore une fois, mettez ce que vous voulez pour le nom et la description.

Faites la même chose pour un autre événement et appelez-le "REMOVE_MESSAGES"

Cela n'a même pas besoin d'attributs non plus.

Maintenant, la dernière chose que nous devons faire est d'ajouter du "code cloud" ou du code côté serveur qui est appelé lorsque chaque événement est démarré à partir de notre application.

Étape 7: Ajoutez le code cloud

Dans GameSparks, accédez au configurateur et au code cloud.

Nous devons ajouter un script à chaque événement que nous venons de créer.

Dans l'événement LOAD_MESSAGE, ajoutez ce code et enregistrez-le:

var messageData = Spark.runtimeCollection("GeoMessage");

var curseur = messageData.find();

var tousMessages = ;

while(cursor.hasNext()) {

var obj = curseur.suivant();

delete(obj ["_id"]);

allMessages.push(obj);

}

Spark.setScriptData("all_Messages", allMessages); // renvoie toutes les données

Dans l'événement REMOVE_MESSAGES, ajoutez ce code:

var messageData = Spark.runtimeCollection("GeoMessage");

messageData.remove({});

Enfin, dans l'événement SAVE_MESSAGES, ajoutez ceci:

var geoMessageList = Spark.runtimeCollection("GeoMessage");

var messageLat = Spark.getData(). LAT;

var messageLon = Spark.getData(). LON;

var messageText = Spark.getData(). TEXT;

var MessageCourant = {

"messLat": messageLat,

"messLon": messageLon,

"messText": messageText,

};

geoMessageList.insert(currentMessage);

Étape 8: NOUS AVONS FINI

Ce projet utilise l'identifiant unique de votre appareil pour s'authentifier auprès du serveur GameSparks. Vous pouvez donc maintenant revenir à Unity et cliquer sur play, et vous devriez voir dans la console "appareil authentifié…"

Allez maintenant dans le fichier, créez les paramètres et cliquez sur construire. Si vous n'avez jamais créé d'application pour Android ou IOS, vous devrez peut-être créer un compte de développement avec Google ou Apple.

Une fois l'application installée sur votre téléphone, vous devez d'abord vous assurer que ARKit ou ARCore détecte un plan de masse. Cliquez maintenant sur le bouton de connexion dans le coin inférieur gauche. Avancez de quelques pas et vous verrez "l'alignement calculé" apparaître en bleu clair. Maintenant, les boutons de l'interface utilisateur devraient apparaître et si des messages sont chargés dans votre base de données, ils seront placés dans le monde.

Pour marquer un nouveau message GPS AR quelque part, dirigez-vous vers l'emplacement où vous souhaitez que le message soit et cliquez sur l'icône de message en haut à droite de l'écran. Tapez le message de votre choix et cliquez sur le bouton épingle !