Share
Fino a poco tempo fa, la Realtà Aumentata era una di quelle idee "futuristiche" che sono state ritratte nelle utopie fantascientifiche. Ma è giunto il momento in cui la creazione di un'applicazione AR è diventata realtà e puoi averla in tasca.
In questo tutorial, imparerai come portare Marte, il pianeta più vicino alla Terra, nella tua stanza.
Prima di iniziare, assicurati di avere l'ultima versione di Xcode installata sul tuo Mac. Questo è molto importante perché ARKit sarà disponibile solo su Xcode 9 o successivi. Puoi verificare la tua versione aprendo Xcode e andando a Xcode > Informazioni su Xcode nella barra degli strumenti superiore.
Se la tua versione di Xcode è precedente a Xcode 9, puoi andare al Mac App Store e aggiornarlo gratuitamente. Se non hai già Xcode, puoi anche scaricarlo e installarlo gratuitamente.
Dopo esserti assicurato di avere la versione corretta di Xcode, dovrai creare un nuovo progetto Xcode.
Vai avanti e apri Xcode e fai clic Crea un nuovo progetto Xcode.
Potresti essere abituato a fare un Applicazione vista singola, ma per questo tutorial, dovrai scegliere un App di realtà aumentata e quindi fare clic Il prossimo.
Puoi nominare il tuo progetto come preferisci, ma nominerò il mio ARPlanets. Noterai inoltre che esiste un'opzione in fondo alla quale puoi selezionare SceneKit, SpriteKit e Metal.
Questi sono tutti i framework di gioco di Apple, e per lo scopo del tutorial, li useremo SceneKit perché useremo oggetti 3D.
Vai avanti e seleziona SceneKit se non è già selezionato. Lo schermo dovrebbe apparire in questo modo:
Poiché Xcode Simulator non ha una fotocamera, dovrai collegare il tuo iPhone. Sfortunatamente, se non hai un iPhone, dovrai prenderne uno in prestito per poter seguire questo tutorial (e per qualsiasi altra app correlata alla fotocamera). Se hai già un iPhone collegato a Xcode, puoi saltare al passaggio successivo.
Una nuova funzionalità di Xcode 9 è che puoi eseguire il debug in modalità wireless della tua app su un dispositivo, quindi prendiamoci del tempo per configurarlo ora:
Nella barra dei menu in alto, scegli Finestra > Dispositivi e simulatori. Nella finestra che appare, assicurati che dispositivi è selezionato in alto.
Ora, collega il dispositivo usando un cavo Lightning. Questo dovrebbe far apparire il tuo dispositivo nel pannello di sinistra di Dispositivi e simulatori finestra. Basta fare clic sul dispositivo e controllare Connetti via rete scatola.
Ora potrai eseguire il debug in modalità wireless su questo iPhone per tutte le app future.
Ora la configurazione è completa. Dovresti avere un'app ARKit funzionante e puoi testarla sull'iPhone appena connesso. In alto a sinistra di Xcode, accanto al Correre e Stop pulsanti, seleziona il tuo dispositivo dal menu a discesa del simulatore.
Ho selezionato L'iPhone di Vardhan, ma devi selezionare il tuo dispositivo specifico.
Ora hai finito di creare il tuo progetto iniziale e dovresti vedere un'astronave virtuale apparire nel tuo mondo dopo aver fatto clic Correre. Ecco come dovrebbe essere:
Ok, siamo finalmente pronti per approfondire e scrivere effettivamente del codice. Hai già un'app ARKit funzionante, quindi costruiscici e crea qualcosa di interessante.
Se guardi la cartella chiamata art.scnassets, noterete che contiene già due cose: il nodo dell'astronave e la sua trama. In questo esempio, Apple ha creato un oggetto spaziale vuoto e fondamentalmente ha utilizzato una sovrapposizione di immagini per formare i suoi colori e forme.
Allo stesso modo, creeremo la nostra sfera e sovrapponiamo un'immagine della superficie di Marte per creare una rappresentazione accurata di Marte.
Il template ARKit in Xcode viene fornito con un po 'di codice pre-scritto per far apparire l'astronave, quindi prendiamoci del tempo per esplorare cosa significa tutto e perché funziona.
Nella parte superiore del file, vedrai quanto segue:
import UIKit import SceneKit importa ARKit
In cima, UIKit viene importato e ne abbiamo bisogno perché la vista principale sarà a UIViewController. Ricorda quando hai selezionato SceneKit nella configurazione del progetto? Viene importato insieme a Arkit in basso. Queste sono tutte le librerie utilizzate da questo file.
Sotto questo, vedrai una dichiarazione di classe e la seguente riga di codice:
@IBOutlet var sceneView: ARSCNView!
Non abbiamo bisogno di andare troppo in profondità qui, ma questa è una vista in Realtà Aumentata di SceneKit che è collegata tramite un @IBOutlet allo storyboard. Questa è la vista principale di tutto ciò che inseriremo in questo tutorial.
Andando un po 'più in basso, il viewDidLoad () il metodo dovrebbe assomigliare a questo:
override func viewDidLoad () super.viewDidLoad () // 1 sceneView.delegate = self // 2 sceneView.showsStatistics = true // 3 let scene = SCNScene (denominato: "art.scnassets / ship.scn")! // 4 sceneView.scene = scena
Ecco cosa fa questo codice:
Accentsconagua
sceneView era collegato allo storyboard? Stiamo assegnando il suo delegato al nostro ViewController perché è conforme al ARSCNViewDelegate protocollo.ship.scn file (il rendering 3D) nella cartella chiamata art.scnassets. In questa linea, a SCNScene, che è una gerarchia di nodi (in questo caso, l'astronave e la sua telecamera) viene creata.sceneView, che è collegato allo storyboard con un @IBOutlet.Non abbiamo coperto ogni singola riga nel ViewController.swift file, ma quello che abbiamo fatto è importante per te sapere per poter seguire il tutorial e creare le tue app ARKit in futuro.
Poiché creeremo un pianeta invece di un'astronave nella nostra app ARKit, dovrai rimuoverlo.
Innanzitutto, rimuovere i seguenti due file dal art.scnassets cartella: ship.scn e texture.png. Non avremo più bisogno di questi.
Quindi, torna al tuo ViewController.swift file e individuare la seguente riga di codice:
// Crea una nuova scena let scena = SCNScene (denominato: "art.scnassets / ship.scn")!
Dal momento che non abbiamo più il ship.scn file, questa linea di codice causerà l'arresto anomalo della nostra app, soprattutto perché il punto esclamativo alla fine di questa linea lo sta forzando. Dal momento che non useremo a .scn file per la nostra nave, non è necessario inizializzare il SCNScene con una corda.
Sostituisci semplicemente questa riga di codice con quanto segue:
// Crea una nuova scena let scena = SCNScene ()
Se ora esegui la tua app, vedrai la realtà, ma non sarà aumentata. In altre parole, l'astronave sparirà.
Proprio sotto viewDidLoad (), creare una dichiarazione di funzione come segue:
// Crea la funzione di pianeta Mars createMars () // Do stuff
Non sembra un po 'inutile creare qualcosa e non restituirlo? Nella funzione, dovremo restituire un SCNNode. Mentre ci siamo, prendiamo anche un parametro per la posizione del pianeta.
Dopo aver apportato queste modifiche, il tuo metodo dovrebbe apparire così:
// Crea la funzione di pianeta Mars createMars (nella posizione: SCNVector3) -> SCNNode // Do stuff
Dato che Marte è sferico, creiamo una sfera per essere la forma base di Marte. Puoi scegliere di farlo direttamente nel viewDidLoad () metodo, ma useremo la funzione che abbiamo dichiarato sopra.
All'interno della tua funzione, inserisci il seguente codice:
// 1 let sphere = SCNSphere (raggio: 0.4) // 2 let node = SCNNode (geometry: sphere) // 3 node.position = posizione // 4 nodo di ritorno
Ecco cosa fa questo codice:
SCNSphere con un raggio di 0.4. SCNNode che può essere restituito al sito di chiamata di funzione.createMars () funzione, stiamo usando il parametro qui per impostare la posizione del SCNNode che abbiamo creato sulla linea precedente.SCNNode alla funzione.Finora, abbiamo creato una sfera, ma per farla apparire, dobbiamo aggiungerla alla nostra scena attuale. Per fare ciò, aggiungi queste tre linee di codice al tuo viewDidLoad () metodo:
// 1 let position = SCNVector3 (0, 0, -3) // 2 let mars = createMars (at: position) // 3 scene.rootNode.addChildNode (mar)
Questo è ciò che fa il codice:
SCNVector3 (che è una rappresentazione tridimensionale di un punto nello spazio) da passare nel createMars () funzione che abbiamo creato in precedenza.createMars () e passando nella posizione dalla variabile precedente. Successivamente, stiamo assegnando il nodo che questa funzione restituisce a una variabile chiamata Marte.Marte alla scena che è stata fornita nel progetto di esempio di Apple.Wow! Abbiamo già fatto un bel po 'di progressi. Se esegui la tua app ora, dovresti essere in grado di vedere che c'è una sfera bianca da qualche parte nel tuo mondo. Se provi a guardarlo da altri angoli, sembrerà solo un cerchio, ma è perché non abbiamo ancora trame o ombre. Ecco come dovrebbe apparire:
Ora che abbiamo una sfera, dobbiamo aggiungere una trama in modo che assomigli al pianeta attuale, Marte. Ho appena cercato una foto della superficie di Marte, e la userò, ma puoi usare qualsiasi foto che desideri (se vuoi mescolare le cose, puoi anche usare trame di altri pianeti).
Per utilizzare l'immagine appena creata, dovrai posizionarla in due cartelle: art.xcassets e art.scnassets. Un'altra cosa da notare: se vuoi essere in grado di copiare e incollare questo codice nel tuo progetto, dovrai nominare la tua immagine mars_texture.png, e deve essere un PNGfile.
Aggiungi il seguente codice prima del ritorno linea nella funzione createMars ():
let material = SCNMaterial () material.diffuse.contents = #imageLiteral (resourceName: "mars_texture.png") sphere.firstMaterial = material
In primo luogo, creiamo un SCNMaterial che SceneKit può utilizzare in seguito per avvolgere la sfera e assegnarla a una costante denominata Materiale. Quindi specifichiamo l'immagine selezionata e la riassegniamo al contenuto del default SCNMaterial. In altre parole, il Materiale costante ora contiene questa immagine da utilizzare come un SCNMaterial. Infine, avvolgiamo la sfera con il SCNMaterial che abbiamo fatto in precedenza.
Ora hai finito e se esegui la tua app, sarai in grado di vedere Marte nella tua stanza! Puoi persino camminarci intorno e vederlo da diverse angolazioni. Ecco come dovrebbe apparire:
Ora puoi vedere quanto sia facile implementare la Realtà Aumentata nella tua app. Puoi fare impazzire la tua immaginazione e persino fare giochi completi. Se disponi di abilità di rendering tridimensionale più tecniche, puoi anche integrarlo con le tue abilità.
Spero che questo tutorial sia stato informativo e che ti sia piaciuto!
