Share
Avec de nombreux autres outils rendus obsolètes par la technologie moderne, il semble que le ruban à mesurer ordinaire puisse être le prochain. Dans ce didacticiel, nous allons apprendre à combler le fossé entre la réalité et la technologie en utilisant la réalité augmentée et la caméra de votre appareil iOS pour créer une application permettant de mesurer la distance entre deux points..
Dans cet article, nous allons démarrer l'application et coder ses principaux éléments d'interface. Demain, nous finirons en mesurant entre deux points de la scène AR.
Si vous commencez tout juste à utiliser ARKit, n'oubliez pas de consulter mon autre didacticiel, dans lequel vous apprendrez à introduire une planète dans votre maison en utilisant la réalité augmentée..
Commençons par créer notre règle virtuelle, ce qui nous permettra de mesurer la distance entre deux points du monde réel. Si vous y réfléchissez, vous n'aurez peut-être même plus besoin de votre ruban à mesurer pour les mesures au jour le jour.!
Pour commencer, assurez-vous de disposer d'une version de Xcode compatible avec ARKit. Ensuite, vous devrez créer un nouveau projet Xcode..
Allez-y et ouvrez Xcode et cliquez sur Créer un nouveau projet Xcode.
Vous pouvez être habitué à faire un Application à vue unique, mais pour ce tutoriel, vous devrez choisir App de réalité augmentée puis cliquez sur Suivant.
Vous pouvez nommer votre projet comme bon vous semble, mais je nommerai le mien ARPlanets. Vous remarquerez également qu’il existe une option en bas dans laquelle vous pouvez sélectionner SceneKit, SpriteKit et Metal. Ce sont tous les cadres de jeu d’Apple, et pour les besoins de ce tutoriel, nous allons utiliser SceneKit.
Allez-y et sélectionnez SceneKit si ce n'est pas déjà sélectionné. Votre écran devrait ressembler à ceci:
Le simulateur Xcode n'ayant pas d'appareil photo, vous devez brancher votre iPhone. Malheureusement, si vous n'avez pas d'iPhone, vous devrez en emprunter un pour pouvoir suivre ce didacticiel (et pour toute autre application liée à un appareil photo ou à un récepteur d'image numérique). Si vous avez déjà un iPhone connecté à Xcode, vous pouvez passer à l'étape suivante..
Une nouvelle fonctionnalité intéressante de Xcode 9 est que vous pouvez déboguer sans fil votre application sur un appareil. Configurez-la maintenant..
Dans la barre de menu supérieure, choisissez La fenêtre > Appareils et simulateurs. Dans la fenêtre qui apparaît, assurez-vous que Dispositifs est sélectionné en haut.
Maintenant, branchez votre appareil avec un câble Lightning. Cela devrait faire apparaître votre appareil dans le volet gauche de la fenêtre. Appareils et simulateurs la fenêtre. Il suffit de cliquer sur votre appareil et de vérifier la Se connecter via le réseau boîte.
Vous pourrez maintenant déboguer sans fil sur cet iPhone pour toutes les applications futures.
Votre configuration est maintenant terminée. Vous devriez avoir une application ARKit opérationnelle et vous pouvez la tester sur l'iPhone que vous venez de connecter. En haut à gauche de Xcode, à côté de la Courir et Arrêtez boutons, sélectionnez votre appareil du menu déroulant du simulateur.
Maintenant, si vous cliquez sur Exécuter, vous devriez voir un vaisseau spatial virtuel apparaître dans votre monde.!
Notre prochaine étape sera de retirer le vaisseau spatial et de commencer à coder l'interface pour notre application de mesure..
Excellent travail pour que l'application ARKit soit opérationnelle! Nous allons maintenant supprimer le vaisseau spatial et créer notre application de mesure de distance à partir de zéro. Notre application fonctionnera en laissant l'utilisateur placer deux sphères dans la scène AR, puis en calculant la distance qui les sépare. Aussi simple que cela puisse paraître, cela nécessite un peu de programmation, alors réfléchissez bien et réfléchissez-y!!
Je ne vais pas expliquer le code de démarrage dans ce didacticiel. Si vous ne comprenez pas quelque chose, assurez-vous de consulter mon didacticiel sur l'utilisation préalable d'ARKit..
Nous préférerions ne pas qu'un vaisseau spatial apparaisse de manière aléatoire dans notre application de mesure. Supprimons-le ainsi que son code du projet..
Si vous vous dirigez vers le Assets.xcassets Dans le dossier de votre projet, vous remarquerez deux fichiers qui constituent votre vaisseau spatial: ship.scn et texture.png. Ce sont les deux fichiers qui disent à Xcode à quoi le vaisseau spatial devrait ressembler. Dans notre application, cependant, nous définirons les sphères par programmation. Si vous avez des nœuds plus compliqués à ajouter, vous pouvez utiliser le .scn méthode, mais si vous le pouvez, il est toujours préférable de faire les choses en code.
Maintenant que vous avez supprimé les actifs du navire, vous risquez de recevoir des erreurs à ce stade (sinon, vous le ferez lorsque le code sera exécuté). En effet, il existe encore des références aux fichiers que nous avons supprimés. Ne vous inquiétez pas, cependant. Nous allons nous débarrasser de cet exemple de code pour pouvoir commencer à programmer à partir de zéro..
Dirigez-vous vers le ViewController.swift fichier et supprimez les deux lignes de code suivantes:
// Définit le délégué de la vue sceneView.delegate = self // Affiche des statistiques telles que le fps et les informations de minutage sceneView.showsStatistics = true
Après cela, votre viewDidLoad () méthode devrait ressembler à ceci:
override func viewDidLoad () super.viewDidLoad () // Définit le délégué de la vue sceneView.delegate = self // Affiche des statistiques telles que fps et les informations de minutage sceneView.showsStatistics = true
Nous pouvons toujours les utiliser dans notre nouvelle application. Le code de démarrage restant dans l'application est juste un passe-partout qui fait des choses comme exécuter la vue SceneKit et d'autres choses de ce genre.
Bien sûr, si nous avons une application de mesure, nous aurons besoin d’un moyen de dire à l’utilisateur quelle est la mesure finale et quel meilleur moyen existe-t-il que d’utiliser une étiquette? Pour la pratique, nous n'utiliserons pas le story-board pour notre label, mais nous l'ajouterons par programmation..
Pour créer une étiquette, déclarez une variable en haut de votre classe comme ceci:
var mesureLabel = UILabel ()
Ici, nous venons de créer une instance du UILabel classe, et dans notre viewDidLoad () méthode, on peut configurer ses différents attributs.
Ajoutez ce qui suit à votre viewDidLoad () méthode en haut pour créer un fond:
mesureLabel.frame = CGRect (x: 0, y: 0, largeur: view.frame.size.width, hauteur: 100) mesureLabel.backgroundColor = .white
La première ligne ici définit un arrière-plan blanc pour l’étiquette afin qu’elle soit visible et ne se confonde pas avec la vue en direct à l’arrière. Ce fond sera aligné sur le haut et aura une hauteur de 100.
Ensuite, nous devons définir le texte ainsi que son alignement et ajouter l'étiquette à la vue. Pour ce faire, ajoutez ce qui suit à votre viewDidLoad () méthode:
mesureLabel.text = "0 pouces" mesureLabel.textAlignment = .center view.addSubview (mesureLabel)
La première ligne de code fait que le texte par défaut de l'étiquette indique "0 pouces". De plus, nous souhaitons que l'application ait un aspect assez raffiné, nous allons donc centrer l'étiquette dans le canevas. Enfin, nous ajoutons l'étiquette à la vue.
Puisque notre application sera basée sur le placement de deux sphères, puis la mesure de la distance qui les sépare, notre première étape évidente serait d'apprendre à créer des sphères. Faisons-le maintenant..
Nous faisons la sphère plusieurs fois, il n’a donc aucun sens de la coder dans le viewDidLoad () méthode. Au lieu de cela, créons une méthode que nous pouvons réutiliser et appeler de n’importe où. Alors collez la fonction suivante dans votre projet:
func newSphere (à la position: SCNVector3) -> SCNNode // Votre code va ici
Comme vous pouvez le constater, nous prenons une position de type SCNVector3 puis en retournant un SCNNode, qui serait la sphère. Cela ne semble pas très important pour le moment, mais nous reviendrons sur la raison pour laquelle nous prenons une SCNVector3 comme poste plus tard.
Commençons maintenant à créer la sphère. Ajouter les trois lignes suivantes dans la newSphere () méthode que vous venez de créer:
// Crée une SCNSphere d'un rayon de 0,4 let sphere = SCNSphere (rayon: 0.01) // Convertit la sphère en un SCNNode let node = SCNNode (géométrie: sphère) // positionne le nœud en fonction de la position passée node.position = position
La première ligne de code crée simplement une sphère de type SCNSphere et définit son rayon initial à une valeur de 0,01 mètres dans le système de coordonnées SceneKit, et ce sera juste la bonne taille. Si vous voulez, cependant, vous pouvez expérimenter avec différentes tailles de sphères.
La ligne de code suivante modifie le maillage de géométrie de type SCNSphere dans un objet réel-quelque chose que nous pouvons réellement changer et faire d'autres choses avec. le SCNNode, de toute façon, va être ce que nous revenons à l'appel de fonction.
Enfin, en prenant le paramètre de position de la fonction, nous plaçons simplement le nœud là où il doit être placé en fonction du tap (que nous n'avons pas encore créé)..
Cette partie n'est pas vraiment nécessaire, mais il est toujours bon de rendre votre application jolie, et cela vous aidera également à apprendre à éclairer ces objets artificiels pour les applications futures.
Commencez par créer un matériau vide:
// Crée un matériau reconnu par SceneKit, laissant material = SCNMaterial ()
Ici, nous disons simplement à SceneKit qu'il y aura un nouveau matériau auquel nous ajouterons des propriétés ultérieurement. En d'autres termes, nous venons de créer une instance de SCNMaterial () et l'a assigné à une constante appelée Matériel.
Ensuite, réglez le matériau sur orange en procédant comme suit:
// Convertit le contenu du fichier PNG en matériau material.diffuse.contents = UIColor.orange
Comme nous n'avons pas d'image pour entourer la sphère, définissez sa couleur sur orange. Oui, juste une couleur orange unie. Si vous deviez utiliser une image, il vous faudrait faire la même chose, mais définissez plutôt material.diffuse.contents à une image à la place.
Enfin, définissez la configuration de l'éclairage et ajoutez le matériau à la sphère comme ceci:
// Crée des ombres réalistes autour de la sphère material.lightingModel = .blinn // Enveloppe le nouveau matériau créé autour de la sphère sphere.firstMaterial = material
Maintenant, ce que vous verrez ici, c'est que nous sommes en train de changer la manière dont les lumières de l'environnement affecteront le matériau que nous avons créé. En fixant le modèle à la .blinn modèle, nous calculons nos faits saillants en utilisant un Formule Blinn-Phong. Nous n'avons pas besoin d'entrer dans les détails pour le moment, mais ce modèle d'éclairage spécifique fonctionnera le mieux pour nos besoins. Enfin, nous remplaçons le matériau actuel de la sphère par celui que nous venons de créer.
Si vous souhaitez en savoir plus sur le modèle d'éclairage que nous venons d'utiliser, voici la documentation d'Apple sur la .blinn modèle d'éclairage:
Ombrage intégrant les propriétés ambiante, diffuse et spéculaire, où les reflets spéculaires sont calculés à l'aide de la formule de Blinn-Phong.-Documentation Apple
Enfin, après la création de la sphère, notre dernière étape consiste simplement à renvoyer le SCNNode sphère dactylographiée sur le site d’appel de fonction. Collez simplement cette ligne juste avant la fin de votre accolade:
noeud de retour
Terminé! Cette méthode est entièrement conçue pour créer des sphères puis les renvoyer. Rappelez-vous cependant que les sphères n'apparaîtront que si vous appelez réellement la méthode et que vous les ajoutez ensuite à la vue supérieure..
Nous avons pris un bon départ sur notre application. Revenez demain et je vous montrerai comment ajouter un outil de reconnaissance des gestes du toucher pour permettre aux utilisateurs de placer les sphères sur les points qu'ils souhaitent mesurer..
Nous avons déjà beaucoup accompli: nous avons créé une application ARKit et construit les éléments d'interface de base pour notre outil de mesure de distance. Demain, nous terminerons en laissant les utilisateurs placer ces sphères à des points du monde réel et en calculant ensuite la distance qui les sépare..
Et pendant que vous êtes ici, consultez notre cours vidéo sur le codage pour ARKit sur iOS. Dans ce cours, vous apprendrez à coder une application ARKit du début à la fin.!
Accentsconagua