Share
Tot voor kort was Augmented Reality een van die 'futuristische' ideeën die werden verbeeld in science-fiction utopieën. Maar de tijd is rijp voor het bouwen van een AR-app en u kunt er een in uw zak hebben.
In deze tutorial leer je hoe je Mars, de dichtstbijzijnde planeet naar de Aarde, naar je eigen kamer kunt brengen.
Controleer voordat je begint of je de nieuwste versie van Xcode op je Mac hebt geïnstalleerd. Dit is erg belangrijk omdat ARKit alleen beschikbaar zal zijn op Xcode 9 of nieuwer. U kunt uw versie controleren door Xcode te openen en naar toe te gaan Xcode > Over Xcode in de bovenste werkbalk.
Als je versie van Xcode ouder is dan Xcode 9, kun je naar de Mac App Store gaan en deze gratis updaten. Als je Xcode nog niet hebt, kun je het ook gratis downloaden en installeren.
Nadat je hebt gecontroleerd of je de juiste versie van Xcode hebt, moet je een nieuw Xcode-project maken.
Ga je gang en open Xcode en klik Maak een nieuw Xcode-project.
U bent misschien gewend aan het maken van een Toepassing enkele weergave, maar voor deze zelfstudie moet je een Augmented Reality App en klik vervolgens op volgende.
Je kunt je project een naam geven die je wilt, maar ik zal de mijne noemen ARPlanets. Je zult ook merken dat er onderaan een optie is waar je kunt kiezen uit SceneKit, SpriteKit en Metal.
Dit zijn alle gamekaders van Apple en voor het doel van de tutorial zullen we gebruiken SceneKit omdat we 3D-objecten gebruiken.
Ga je gang en selecteer SceneKit als het nog niet is geselecteerd. Uw scherm zou er ongeveer zo uit moeten zien:
Omdat de Xcode Simulator geen camera heeft, moet je je iPhone aansluiten. Helaas, als je geen iPhone hebt, moet je er een lenen om deze tutorial (en voor alle andere camera-gerelateerde apps) te kunnen volgen. Als je al een iPhone hebt aangesloten op Xcode, kun je doorgaan naar de volgende stap.
Een handige nieuwe functie in Xcode 9 is dat je je app draadloos kunt debuggen op een apparaat, dus laten we de tijd nemen om dat nu in te stellen:
Kies in de bovenste menubalk Venster > Apparaten en simulatoren. Zorg ervoor dat dit in het venster verschijnt apparaten is bovenaan geselecteerd.
Sluit nu uw apparaat aan met een bliksemsnoer. Hierdoor zou uw apparaat moeten verschijnen in het linkerdeel van de Apparaten en simulatoren venster. Klik eenvoudig op uw apparaat en controleer de Verbind via netwerk doos.
U kunt nu draadloos debuggen op deze iPhone voor alle toekomstige apps.
Nu is je setup voltooid. Je zou een werkende ARKit-app moeten hebben, en je kunt hem testen op de iPhone die je zojuist hebt aangesloten. Linksboven in Xcode, naast de Rennen en Hou op knoppen, selecteer uw apparaat uit de vervolgkeuzelijst van de simulator.
Ik heb geselecteerd Vardhan's iPhone, maar je moet je specifieke apparaat selecteren.
Nu bent u klaar met het maken van uw startersproject en zou u een virtueel ruimteschip in uw wereld moeten zien verschijnen zodra u klikt Rennen. Hier is hoe het eruit zou moeten zien:
Okay, we zijn eindelijk klaar om dieper te graven en eigenlijk wat code te schrijven. Je hebt al een werkende ARKit-app, dus laten we daarop voortbouwen en iets cools maken.
Als u naar de map met de naam kijkt art.scnassets, je zult zien dat het al twee dingen bevat: het ruimteschipknooppunt en de textuur ervan. In dit voorbeeld heeft Apple een leeg ruimteschipobject gemaakt en in feite een afbeeldingsoverlay gebruikt om de kleuren en vormen ervan te vormen.
Op dezelfde manier zullen we onze eigen sfeer creëren en een beeld van het oppervlak van Mars bedekken om een nauwkeurige weergave van Mars te creëren.
De ARKit-sjabloon in Xcode wordt geleverd met een heleboel vooraf geschreven code om het ruimteschip te laten verschijnen, dus laten we wat tijd nemen om te onderzoeken wat alles betekent en waarom het werkt.
Bovenaan het bestand ziet u het volgende:
importeer UIKit importeer SceneKit import ARKit
Op de top, UIKit wordt geïmporteerd en we hebben het nodig omdat de hoofdweergave een is UIViewController. Onthoud wanneer je hebt geselecteerd SceneKit in de projectopstelling? Het wordt meteen mee geïmporteerd ARKit hieronder. Dit zijn alle bibliotheken die dit bestand gebruikt.
Hieronder ziet u een klassenverklaring en de volgende coderegel:
@IBOutlet var sceneView: ARSCNView!
We hoeven hier niet al te diep in te gaan, maar dit is een Augmented Reality SceneKit-weergave die via een link is verbonden @IBOutlet naar het storyboard. Dit is de hoofdweergave van alles wat we in deze zelfstudie plaatsen.
Een beetje verder naar beneden, de viewDidLoad () methode zou er als volgt uit moeten zien:
override func viewDidLoad () super.viewDidLoad () // 1 sceneView.delegate = self // 2 sceneView.showsStatistics = true // 3 let scene = SCNScene (named: "art.scnassets / ship.scn")! // 4 sceneView.scene = scène
Dit is wat deze code doet:
Accentsconagua
sceneView dat was gekoppeld aan het storyboard? We wijzen zijn afgevaardigde toe aan onze ViewController omdat het conformeert aan de ARSCNViewDelegate protocol.ship.scn bestand (de 3D-rendering) in de map genaamd art.scnassets. In deze regel, een SCNScene, wat een hiërarchie van knooppunten is (in dit geval het ruimteschip en de camera) wordt gemaakt.sceneView, die verbonden is met het storyboard met een @IBOutlet.We hebben niet elke regel in de ViewController.swift bestand, maar wat we hebben gedekt is belangrijk voor u om te weten om samen met de tutorial te volgen en uw eigen ARKit-apps te bouwen in de toekomst.
Aangezien we een planeet in plaats van een ruimteschip maken in onze ARKit-app, moet je deze verwijderen.
Verwijder eerst de volgende twee bestanden uit de art.scnassets map: ship.scn en texture.png. We hebben deze niet meer nodig.
Ga vervolgens terug naar uw ViewController.swift bestand en zoek de volgende regel code:
// Maak een nieuwe scène laat scène = SCNScene (genaamd: "art.scnassets / ship.scn")!
Aangezien we niet langer de ship.scn bestand, deze coderegel zorgt ervoor dat onze app crasht, vooral omdat het uitroepteken aan het einde van deze regel het dwingt. Omdat we geen gebruik zullen maken van een .scn bestand voor ons schip, het is niet nodig om het te initialiseren SCNScene met een touwtje.
Vervang deze regel code eenvoudig door het volgende:
// Maak een nieuwe scène laat scène = SCNScene ()
Als u nu uw app uitvoert, ziet u de werkelijkheid, maar deze wordt niet uitgebreid. Met andere woorden, het ruimteschip zal verdwenen zijn.
Vlak onder viewDidLoad (), maak een functieverklaring als volgt:
// Creëert de functie Mars-functie createMars () // Do stuff
Lijkt het niet een beetje zinloos iets te creëren en niet terug te geven? In de functie moeten we een SCNNode. Terwijl we bezig zijn, laten we ook een parameter nemen voor de positie van de planeet.
Nadat u deze wijzigingen hebt aangebracht, zou uw methode er als volgt uit moeten zien:
// Creëert de planeet Mars-functie createMars (op positie: SCNVector3) -> SCNNode // Do stuff
Omdat Mars bolvormig is, laten we een bol maken om de basisvorm van Mars te zijn. U kunt ervoor kiezen om dit rechtstreeks in de viewDidLoad () methode, maar we gebruiken de functie die we hierboven hebben aangegeven.
Voeg in je functie de volgende code in:
// 1 laat sphere = SCNSphere (straal: 0.4) // 2 laat knoop = SCNNode (geometrie: bol) // 3 node.position = positie // 4 retour knooppunt
Dit is wat deze code doet:
SCNSphere met een straal van 0.4. SCNNode die kan worden teruggestuurd naar de functieaanroepsite.createMars () functie, gebruiken we de parameter hier om de positie van de SCNNode die we op de vorige regel hebben gemaakt.SCNNode naar de functie.Tot nu toe hebben we een bol gemaakt, maar om deze te laten verschijnen, moeten we deze toevoegen aan onze huidige scène. Om dit te doen, voegt u deze drie regels code toe aan uw viewDidLoad () methode:
// 1 let position = SCNVector3 (0, 0, -3) // 2 let mars = createMars (at: position) // 3 scene.rootNode.addChildNode (mars)
Dit is wat de code doet:
SCNVector3 (wat een driedimensionale weergave van een punt in de ruimte is) die in de createMars () functie die we eerder hebben gecreëerd.createMars () en doorgeven in de positie van de vorige variabele. Vervolgens wijzen we het knooppunt toe dat deze functie teruggeeft aan een variabele genaamd Mars.Mars naar de scène die werd aangeboden in het voorbeeldproject van Apple.Wauw! We hebben al behoorlijk wat vooruitgang geboekt. Als u uw app nu uitvoert, zou u moeten kunnen zien dat er ergens in uw wereld een witte bol is. Als je vanuit andere hoeken ernaar kijkt, ziet het er net uit als een cirkel, maar dat komt omdat we nog geen texturen of schaduwen hebben. Dit is hoe het eruit moet zien:
Nu we een bol op zijn plaats hebben, moeten we een textuur toevoegen zodat deze op de werkelijke planeet Mars lijkt. Ik zocht gewoon naar een foto van het oppervlak van Mars, en ik zal het gebruiken, maar je kunt elke gewenste foto gebruiken (als je dingen wilt mixen, kun je zelfs texturen van andere planeten gebruiken).
Als u de afbeelding die u zojuist hebt gekregen, wilt gebruiken, moet u deze in twee mappen plaatsen: art.xcassets en art.scnassets. Een ander ding om op te merken: als je deze code in je project wilt kunnen kopiëren en plakken, moet je je afbeelding een naam geven mars_texture.png, en het moet een PNG zijnhet dossier.
Voeg de volgende code toe vóór de terugkeer regel in de functie createMars ():
let material = SCNMaterial () material.diffuse.contents = #imageLiteral (resourceName: "mars_texture.png") sphere.firstMaterial = materiaal
Eerst maken we een SCNMaterial die SceneKit later kan gebruiken om rond de bol te wikkelen, en we wijzen hem toe aan een constante met de naam materiaal. Vervolgens verdelen we de geselecteerde afbeelding en wijzen we deze opnieuw toe aan de inhoud van de standaardafbeelding SCNMaterial. Met andere woorden, de materiaal constant bevat nu deze afbeelding om als een te gebruiken SCNMaterial. Uiteindelijk wikkelen we de bol in met de SCNMaterial die we eerder hebben gemaakt.
U bent nu klaar en als u uw app uitvoert, kunt u Mars in uw kamer zien! Je kunt er zelfs omheen lopen en het vanuit verschillende hoeken bekijken. Hier is hoe het eruit zou moeten zien:
Nu kunt u zien hoe eenvoudig het is om Augmented Reality in uw app te implementeren. Je kunt je fantasie er mee uitleven en zelfs volledige games maken. Als je meer technische driedimensionale renderingvaardigheden hebt, kun je dit ook integreren met je vaardigheden.
Ik hoop dat deze tutorial informatief was en dat je ervan genoten hebt!
