Share
Jusqu'à récemment, la réalité augmentée était l'une de ces idées "futuristes" décrites dans les utopies de science-fiction. Mais le moment est venu de créer une application AR et de pouvoir en avoir une dans votre poche..
Dans ce tutoriel, vous allez apprendre à amener Mars, la planète la plus proche de la Terre, dans votre propre pièce..
Avant de commencer, assurez-vous que la dernière version de Xcode est installée sur votre Mac. Ceci est très important car ARKit ne sera disponible que sur Xcode 9 ou plus récent. Vous pouvez vérifier votre version en ouvrant Xcode et en allant à Xcode > À propos de Xcode dans la barre d'outils supérieure.
Si votre version de Xcode est antérieure à Xcode 9, vous pouvez vous rendre sur le Mac App Store et le mettre à jour gratuitement. Si vous ne possédez pas déjà Xcode, vous pouvez également le télécharger et l'installer gratuitement.
Après vous être assuré d'avoir la bonne version de Xcode, vous devez 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 un 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, aux fins du didacticiel, nous utiliserons SceneKit parce que nous allons utiliser des objets 3D.
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 à l'appareil photo). 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. Prenons donc le temps de le configurer 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.
J'ai sélectionné IPhone de Vardhan, mais vous devez sélectionner votre appareil spécifique.
Maintenant que vous avez terminé de créer votre projet de démarrage, vous devriez voir un vaisseau spatial virtuel apparaître dans votre monde une fois que vous avez cliqué. Courir. Voici à quoi cela devrait ressembler:
Ok, nous sommes enfin prêts à approfondir et à écrire du code. Vous avez déjà une application ARKit qui fonctionne, alors construisons là-dessus et faisons quelque chose de cool.
Si vous regardez le dossier appelé art.scnassets, vous remarquerez qu'il contient déjà deux choses: le nœud du vaisseau spatial et sa texture. Dans cet exemple, Apple a créé un objet de vaisseau spatial vide et a essentiellement utilisé une superposition d’images pour former ses couleurs et ses formes..
De même, nous allons créer notre propre sphère et superposer une image de la surface de Mars pour créer une représentation précise de Mars..
Le modèle ARKit dans Xcode est fourni avec un tas de code pré-écrit pour faire apparaître le vaisseau spatial. Nous allons donc prendre le temps d'explorer ce que tout signifie et pourquoi cela fonctionne..
En haut du fichier, vous verrez ce qui suit:
importer UIKit importer SceneKit import ARKit
Au sommet, UIKit est importé, et nous en avons besoin car la vue principale sera un UIViewController. Rappelez-vous quand vous avez sélectionné SceneKit dans la configuration du projet? Il est importé avec ARKit en bas. Ce sont toutes les bibliothèques utilisées par ce fichier..
En dessous, vous verrez une déclaration de classe et la ligne de code suivante:
@IBOutlet var sceneView: ARSCNView!
Nous n’avons pas besoin d’approfondir ce sujet, mais c’est une vue SceneKit en réalité augmentée qui est liée via un @IBOutlet au storyboard. Ceci est la vue principale de tout ce que nous allons placer dans ce tutoriel..
En descendant un peu plus loin, le viewDidLoad () méthode devrait ressembler à ceci:
remplacer func viewDidLoad () super.viewDidLoad () // 1 sceneView.delegate = self // 2 sceneView.showsStatistics = true // 3 let scene = SCNScene (nommé: "art.scnassets / ship.scn")! // 4 sceneView.scene = scene
Voici ce que fait ce code:
Accentsconagua
sceneView qui était lié au storyboard? Nous assignons son délégué à notre ViewController parce qu'il est conforme à la ARSCNViewDelegate protocole.ship.scn fichier (le rendu 3D) dans le dossier appelé art.scnassets. Dans cette ligne, un SCNScene, qui est une hiérarchie de noeuds (dans ce cas, le vaisseau spatial et sa caméra) est en cours de création.sceneView, qui est connecté au storyboard avec un @IBOutlet.Nous n'avons pas couvert chaque ligne du ViewController.swift fichier, mais il est important que vous sachiez ce que nous avons couvert pour pouvoir suivre le didacticiel et créer vos propres applications ARKit à l'avenir.
Puisque nous allons créer une planète au lieu d'un vaisseau spatial dans notre application ARKit, vous devrez le supprimer..
Tout d’abord, supprimez les deux fichiers suivants de la art.scnassets dossier: ship.scn et texture.png. Nous n'en aurons plus besoin.
Ensuite, retournez à votre ViewController.swift fichier et localisez la ligne de code suivante:
// Créer une nouvelle scène let scene = SCNScene (nommé: "art.scnassets / ship.scn")!
Depuis que nous n'avons plus le ship.scn fichier, cette ligne de code provoquera le blocage de notre application, notamment parce que le point d’exclamation à la fin de cette ligne le force. Puisque nous n'utiliserons pas .scn déposer pour notre navire, il n'y a pas besoin d'initialiser le SCNScene avec une ficelle.
Il suffit de remplacer cette ligne de code par ce qui suit:
// Créer une nouvelle scène let scene = SCNScene ()
Si vous exécutez maintenant votre application, vous verrez la réalité, mais elle ne sera pas augmentée. En d'autres termes, le vaisseau spatial aura disparu.
Juste en dessous viewDidLoad (), créez une déclaration de fonction comme suit:
// Crée la fonction planète Mars createMars () // Do stuff
Ne semble-t-il pas un peu inutile de créer quelque chose et de ne pas le retourner? Dans la fonction, nous devrons renvoyer un SCNNode. Pendant que nous y sommes, prenons également un paramètre pour la position de la planète..
Après avoir apporté ces modifications, votre méthode devrait ressembler à ceci:
// Crée la fonction Mars de la planète Mars createMars (à la position: SCNVector3) -> SCNNode // Do stuff
Puisque Mars est sphérique, créons une sphère qui sera la forme de base de Mars. Vous pouvez choisir de le faire directement dans le viewDidLoad () méthode, mais nous allons utiliser la fonction que nous avons déclarée ci-dessus.
Dans votre fonction, insérez le code suivant:
// 1 let sphère = SCNSphere (rayon: 0.4) // 2 let noeud = SCNNode (géométrie: sphère) // 3 node.position = position // 4 noeud de retour
Voici ce que fait ce code:
SCNSphere avec un rayon de 0.4. SCNNode qui peut être retourné au site d'appel de fonction.createMars () fonction, nous utilisons le paramètre ici pour définir la position du SCNNode que nous avons créé à la ligne précédente.SCNNode à la fonction.Jusqu'à présent, nous avons créé une sphère, mais pour la faire apparaître, nous devons l'ajouter à notre scène actuelle. Pour ce faire, ajoutez ces trois lignes de code à votre viewDidLoad () méthode:
// 1 let position = SCNVector3 (0, 0, -3) // 2 let mars = createMars (at: position) // 3 scene.rootNode.addChildNode (mars)
Voici ce que fait le code:
SCNVector3 (qui est une représentation tridimensionnelle d’un point de l’espace) à transmettre à la createMars () fonction que nous avons créée plus tôt.createMars () et passer dans la position de la variable précédente. Ensuite, nous affectons le nœud auquel cette fonction renvoie une variable appelée Mars.Mars à la scène qui a été fourni dans l'exemple de projet d'Apple.Hou la la! Nous avons déjà fait pas mal de progrès. Si vous exécutez votre application maintenant, vous devriez pouvoir voir qu'il y a une sphère blanche quelque part dans votre monde. Si vous essayez de regarder sous d'autres angles, cela ressemblera à un cercle, mais c'est parce que nous n'avons pas encore de textures ni d'ombres. Voici à quoi cela devrait ressembler:
Maintenant que nous avons une sphère en place, nous devons ajouter une texture qui ressemble à la planète Mars. Je viens de chercher une photo de la surface de Mars et je vais l'utiliser, mais vous pouvez utiliser la photo de votre choix (si vous voulez mélanger les choses, vous pouvez même utiliser des textures d'autres planètes)..
Pour utiliser l'image que vous venez de recevoir, vous devez la placer dans deux dossiers: art.xcassets et art.scnassets. Autre chose à noter: si vous voulez pouvoir copier et coller ce code dans votre projet, vous devrez nommer votre image. mars_texture.png, et il faut que ce soit un PNGfichier.
Ajoutez le code suivant avant le revenir ligne dans la fonction createMars ():
let material = SCNMaterial () material.diffuse.contents = #imageLiteral (resourceName: "mars_texture.png") sphere.firstMaterial = material
Tout d'abord, nous créons un SCNMatériel que SceneKit peut utiliser plus tard pour envelopper la sphère, et nous l’attribuons à une constante nommée Matériel. Ensuite, nous particulifions l'image sélectionnée et la réaffectons au contenu de l'image par défaut. SCNMatériel. En d'autres termes, le Matériel constante contient maintenant cette image pour être utilisé en tant que SCNMatériel. Enfin, nous enveloppons la sphère avec le SCNMatériel que nous avons fait précédemment.
Vous avez maintenant terminé et si vous exécutez votre application, vous pourrez voir Mars dans votre chambre! Vous pouvez même le contourner et le voir sous différents angles. Voici à quoi cela devrait ressembler:
Vous pouvez maintenant constater à quel point il est facile de mettre en œuvre la réalité augmentée dans votre application. Vous pouvez donner libre cours à votre imagination et même créer des jeux complets. Si vous avez des compétences de rendu tridimensionnel plus techniques, vous pouvez également les intégrer à vos compétences..
J'espère que ce tutoriel a été instructif et que vous l'avez apprécié!
