Share
Insieme a molti altri strumenti che sono stati resi obsoleti dalla tecnologia moderna, sembra che il metro a nastro comune possa essere il prossimo ad andare. In questo tutorial, impareremo a colmare il divario tra realtà e tecnologia utilizzando la realtà aumentata e la fotocamera sul tuo dispositivo iOS per creare un'app che misurerà la distanza tra due punti.
In questo post inizieremo l'app e codificheremo i suoi elementi di interfaccia principali. Domani, lo finiremo misurando tra due punti nella scena AR.
Se hai appena iniziato con ARKit, assicurati di dare un'occhiata al mio altro tutorial, in cui imparerai a portare un pianeta nella tua casa usando la realtà aumentata.
Iniziamo a creare il nostro righello virtuale, che ci consentirà di misurare la distanza tra due punti del mondo reale. Se ci pensi, potresti non aver più bisogno del tuo metro per misurare le misurazioni giorno per giorno!
Per iniziare, assicurati di avere una versione di Xcode che supporti ARKit. Quindi, 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 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 ai fini di questo tutorial, faremo uso di SceneKit.
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 o all'AR). 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 impostiamola 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.
Ora se fai clic su run, dovresti vedere un'astronave virtuale apparire nel tuo mondo!
Il prossimo passo sarà rimuovere l'astronave e iniziare a codificare l'interfaccia per la nostra app di misurazione.
Ottimo lavoro per far funzionare l'app ARKit! Ora, procediamo a sbarazzarci dell'astronave e creando da zero l'applicazione per la misurazione della distanza. La nostra app funzionerà consentendo all'utente di posizionare due sfere nella scena AR e quindi calcolare la distanza tra di esse. Per quanto semplice possa sembrare, richiede un bel po 'di programmazione, quindi indossa il tuo cappello pensante e affrontiamolo!
Non spiegherò il codice di avviamento in questo tutorial, quindi se non capisci qualcosa, assicurati di dare un'occhiata al mio tutorial su come iniziare con ARKit prima.
Preferiremmo non avere un'astronave casuale mostrata nella nostra app di misurazione, quindi rimuoviamola e il suo codice dal progetto.
Se vai al Assets.xcassets cartella nella directory del progetto, noterai due file che compongono la tua astronave: ship.scn e texture.png. Questi sono i due file che indicano a Xcode esattamente come dovrebbe apparire l'astronave. Nella nostra app, però, definiremo le sfere a livello di programmazione. Se hai nodi più complicati da aggiungere, va bene usare il .scn metodo, ma se puoi, è sempre preferibile fare cose nel codice.
Ora che hai rimosso le risorse della nave, potresti ricevere degli errori a questo punto (in caso contrario, lo farai quando il codice verrà eseguito). Questo perché ci sono ancora riferimenti attuali ai file che abbiamo cancellato. Non preoccuparti, però. Ci libereremo di questo codice di esempio in modo che possiamo iniziare a programmare da zero.
Vai al ViewController.swift file e rimuovere le seguenti due righe di codice:
// Imposta il delegato della vista sceneView.delegate = self // Mostra statistiche come fps e informazioni di timing sceneView.showsStatistics = true
Dopo averlo fatto, il tuo viewDidLoad () il metodo dovrebbe apparire come segue:
override func viewDidLoad () super.viewDidLoad () // Imposta il delegato della vista sceneView.delegate = self // Mostra statistiche come fps e informazioni di timing sceneView.showsStatistics = true
Possiamo ancora usarli nella nostra nuova app. Il codice di avviamento rimanente nell'app è solo il boilerplate che fa cose come eseguire la vista di SceneKit e altre cose di questo tipo.
Ovviamente, se abbiamo un'app di misurazione, avremo bisogno di un modo per dire all'utente quale sia la misura finale, e quale modo migliore c'è di usare un'etichetta? Per la pratica, non useremo lo storyboard per la nostra etichetta, ma invece lo aggiungeremo a livello di codice.
Per creare un'etichetta, dichiara una variabile nella parte superiore della tua classe in questo modo:
var measurementLabel = UILabel ()
Qui, abbiamo appena creato un'istanza di UILabel classe, e nel nostro viewDidLoad () metodo, possiamo configurare i suoi vari attributi.
Aggiungi il seguente al tuo viewDidLoad () metodo in alto per creare uno sfondo:
measurementLabel.frame = CGRect (x: 0, y: 0, larghezza: view.frame.size.width, altezza: 100) measurementLabel.backgroundColor = .white
La prima riga qui imposta uno sfondo bianco per l'etichetta in modo che sia visibile e non si fonde con la vista dal vivo nella parte posteriore. Questo sfondo sarà allineato verso l'alto e avrà un'altezza di 100.
Successivamente, dobbiamo impostare il testo e il suo allineamento e aggiungere l'etichetta alla vista. Per fare ciò, aggiungi quanto segue al tuo viewDidLoad () metodo:
measurementLabel.text = "0 pollici" measurementLabel.textAlignment = .center view.addSubview (measurementLabel)
La prima riga di codice rende il testo predefinito dell'etichetta "0 pollici". Inoltre, vogliamo che l'app abbia un aspetto abbastanza raffinato, quindi concentreremo l'etichetta sulla tela. Infine, aggiungiamo l'etichetta alla vista.
Dato che la nostra app si baserà sulla collocazione di due sfere e quindi sulla misurazione della distanza tra di esse, il nostro primo passo ovvio sarebbe imparare come creare sfere, quindi facciamolo ora.
Stiamo facendo la sfera più volte, quindi non ha senso codificarlo nella viewDidLoad () metodo. Invece, creiamo un metodo che possiamo riutilizzare e chiamare da qualsiasi posto ci piaccia. Quindi, incolla la seguente funzione nel tuo progetto:
func newSphere (in posizione: SCNVector3) -> SCNNode // Il tuo codice va qui
Come puoi vedere, stiamo prendendo una posizione di tipo SCNVector3 e quindi restituendo a SCNNode, quale sarebbe la sfera. Al momento non sembra molto importante, ma torneremo al motivo per cui stiamo partecipando a SCNVector3 come posizione più tardi.
Iniziamo ora a creare effettivamente la sfera. Aggiungi le seguenti tre linee nel newsphere () metodo che hai appena creato:
// Crea un SCNSphere con un raggio di 0.4 let sphere = SCNSphere (raggio: 0.01) // Converte la sfera in un nodo SCN let nodo = SCNNode (geometry: sphere) // Posiziona il nodo in base alla posizione passata node.position = posizione
La prima riga di codice crea semplicemente una sfera di tipo SCNSphere e imposta il raggio iniziale su un valore di 0.01 metri nel sistema di coordinate di SceneKit, e questa sarà la giusta dimensione. Se vuoi, però, puoi sperimentare diverse dimensioni di sfere.
La prossima riga di codice cambia la mesh geometrica che è di tipo SCNSphere in un oggetto reale, qualcosa che possiamo effettivamente cambiare e fare altre cose con. Il SCNNode, in ogni caso, sarà ciò che torneremo alla chiamata di funzione.
Infine, prendendo il parametro di posizione dalla funzione, stiamo semplicemente posizionando il nodo dove deve essere messo basato sul rubinetto (che non abbiamo ancora creato).
Questa parte non è veramente necessario, ma è sempre utile rendere l'app piacevole e, inoltre, ti aiuterà a conoscere l'illuminazione di questi oggetti artificiali per le app future.
Inizia creando un materiale vuoto:
// Crea un materiale che è riconosciuto da SceneKit lascia materiale = SCNMaterial ()
Qui stiamo semplicemente dicendo a SceneKit che ci sarà un nuovo materiale che aggiungeremo proprietà in seguito. In altre parole, abbiamo appena creato un'istanza di SCNMaterial () e assegnato a una costante chiamata Materiale.
Quindi, imposta il materiale come arancione in questo modo:
// Converte il contenuto del file PNG nel materiale material.diffuse.contents = UIColor.orange
Poiché non abbiamo un'immagine per avvolgere la sfera, imposta il suo colore su arancione. Sì, solo un semplice colore arancione. Se dovessi usare un'immagine, però, avresti bisogno di fare la stessa cosa, ma invece, impostare material.diffuse.contents a un'immagine invece.
Infine, imposta la configurazione di illuminazione e aggiungi il materiale alla sfera in questo modo:
// Crea ombre realistiche intorno alla sfera material.lightingModel = .blinn // Avvolge il materiale appena creato attorno alla sfera sphere.firstMaterial = material
Ora, quello che vedrete qui è noi che cambiamo il modo in cui le luci nell'ambiente influenzeranno il materiale che abbiamo creato. Impostando il modello su .Blinn modello, stiamo calcolando i nostri punti salienti usando a Formula Blinn-Phong. Non abbiamo bisogno di entrare nei dettagli in questo momento, ma questo specifico modello di illuminazione funzionerà meglio per i nostri scopi. Infine, stiamo sostituendo il materiale attuale della sfera con quello appena creato.
Se sei curioso del modello di illuminazione che abbiamo appena usato, ecco cosa dice la documentazione di Apple sul .Blinn modello di illuminazione:
Ombreggiatura che incorpora proprietà ambientali, diffuse e speculari, dove i punti salienti speculari sono calcolati usando la formula di Blinn-Phong. - Documentazione Apple
Infine, dopo aver creato la sfera, il nostro ultimo passo è semplicemente restituire il SCNNode sfera digitata al sito di chiamata di funzione. Basta incollare questa linea subito prima della parentesi graffa finale della tua funzione:
nodo di ritorno
Tutto fatto! Questo metodo è tutto predisposto per creare sfere e quindi restituirle. Ricorda, tuttavia, che le sfere non appariranno a meno che tu non chiami effettivamente il metodo e poi lo aggiunga alla superview.
Abbiamo fatto un buon inizio con la nostra app. Torna indietro domani e ti mostrerò come aggiungere un riconoscitore di gesti tocco per consentire agli utenti di posizionare le sfere sui punti che vogliono misurare.
Abbiamo già fatto molto: abbiamo creato un'app ARKit e abbiamo creato gli elementi di base dell'interfaccia per il nostro strumento di misurazione della distanza. Domani finiremo lasciando che gli utenti inseriscano queste sfere in punti nel mondo reale e quindi calcolando la distanza tra loro.
E mentre sei qui, dai un'occhiata al nostro corso di video sulla codifica per ARKit su iOS. In questo corso, vedrai come codificare un'app ARKit dall'inizio alla fine!
Accentsconagua