Kode en måleapp med ARKit Objekter og skygger

Sammen med mange andre verktøy som er blitt utgitt av moderne teknologi, ser det ut som om det vanligste målebåndet kan være neste til å gå. I denne opplæringen lærer vi å bygge bro over gapet mellom virkelighet og teknologi ved hjelp av forstørret virkelighet og kameraet på iOS-enheten din for å lage en app som måler avstanden mellom to punkter.

I dette innlegget starter vi appen og kodes dens hovedgrensesnittelementer. I morgen skal vi avslutte det ved å måle mellom to punkter i AR-scenen.

Hvis du bare har startet med ARKit, må du sjekke ut min andre veiledning, hvor du lærer å bringe en planet inn i ditt hjem ved hjelp av forstørret virkelighet. 

Starter

La oss begynne å lage vår virtuelle linjal, som lar oss måle avstanden mellom noen to virkelige punkter. Hvis du tenker på det, trenger du ikke engang målebåndet ditt for daglige målinger lenger!

Lag en ARKit App

Nytt prosjekt

For å starte, sørg for at du har en versjon av Xcode som støtter ARKit. Deretter må du lage et nytt Xcode-prosjekt. 

Gå videre og åpne Xcode og klikk Opprett et nytt Xcode-prosjekt.

Du kan være vant til å lage en Enkeltvisningsprogram, men for denne opplæringen må du velge Augmented Reality App og klikk deretter neste.

Gaming Rammer

Du kan navngi prosjektet ditt noe du vil, men jeg vil navngi min ARPlanets. Du vil også legge merke til at det er et alternativ nederst der du kan velge mellom SceneKit, SpriteKit og Metal. Dette er alle Apples spillrammer, og i form av denne opplæringen vil vi gjøre bruk av SceneKit

Gå videre og velg SceneKit hvis den ikke allerede er valgt. Skjermen din bør se slik ut:

Forbereder for testing

Koble til en iPhone

Siden Xcode Simulator ikke har et kamera, må du plugge inn iPhone. Dessverre, hvis du ikke har en iPhone, må du låne en for å kunne følge med denne opplæringen (og for andre kamera- eller AR-relaterte apper). Hvis du allerede har en iPhone koblet til Xcode, kan du hoppe videre til neste trinn.

En nydelig ny funksjon i Xcode 9 er at du kan feilsøke appen din på en enhet på en trådløs måte, så la oss sette opp det nå.

Velg øverst på menylinjen Vindu > Enheter og simulatorer. Kontroller at i vinduet som vises enheter er valgt øverst.

Nå, koble til enheten din med en lynledning. Dette bør gjøre at enheten din vises i venstre rute i Enheter og simulatorer vindu. Bare klikk på enheten, og merk av Koble via nettverk eske.

Du vil nå kunne feilsøke på denne iPhone på alle fremtidige apps.

Fullfør oppsett

Nå er oppsettet ditt fullført. Du bør ha en fungerende ARKit app, og du kan teste den på iPhone som du nettopp har koblet til. Øverst til venstre i Xcode, ved siden av Løpe og Stoppe knapper, velg din enhet fra simulator-rullegardinmenyen.


Nå, hvis du klikker løp, bør du se et virtuelt romskip vises i din verden!

Vårt neste skritt vil være å fjerne romskipet og begynne å kode grensesnittet for vår målerapp.

Måleapp

Flott jobb på å få ARKit-appen oppe! Nå, la oss fortsette å bli kvitt romskipet og skape vår avstandsmåling fra grunnen av. Vår app vil fungere ved å la brukeren plassere to sfærer i AR-scenen og deretter beregne avstanden mellom dem. Så enkelt som det kan høres, krever det en god del programmering, så sett på tankehatten din og la oss komme til det!

Jeg vil ikke forklare startkoden i denne opplæringen, så hvis du ikke forstår noe, må du sjekke ut min veiledning om å komme i gang med ARKit først.

Fra begynnelsen

Fjerne romskipet

Vi vil heller ikke ha et tilfeldig romskip som vises i vår målerapp, så la oss fjerne den og koden fra prosjektet.

Hvis du leder til Assets.xcassets mappe i prosjektkatalogen, vil du legge merke til to filer som utgjør romskipet ditt: ship.scn og texture.png. Dette er de to filene som forteller Xcode nøyaktig hvordan romskipet skal se ut. I vår app, skjønner vi imidlertid sfærene programmatisk. Hvis du har mer kompliserte noder å legge til, er det greit å bruke .SCN metode, men hvis du kan, er det alltid å foretrekke å gjøre ting i kode.

Fjerne prøvekode

Nå som du har fjernet skipets eiendeler, kan du motta feil på dette tidspunktet (hvis ikke, vil du når koden kjører). Dette skyldes at det fortsatt er nåværende referanser til filene vi slettet. Ikke bekymre deg, skjønt. Vi blir kvitt den prøvekoden slik at vi kan begynne programmering fra grunnen av.

Hodet til ViewController.swift fil og fjern følgende to linjer med kode:

// Sett visningens delegat sceneView.delegate = self // Vis statistikk som fps og timing informasjon sceneView.showsStatistics = true

Etter at du har gjort det, din viewDidLoad () metoden skal se slik ut:

overstyr func viewDidLoad () super.viewDidLoad () // Sett visningens delegerte sceneView.delegate = self // Vis statistikk som fps og timing informasjon sceneView.showsStatistics = true

Vi kan fortsatt bruke disse i vår nye app. Den gjenværende startkoden i appen er bare boilerplate som gjør ting som kjører SceneKit-visningen og andre ting av den typen.

Opprette en etikett

Selvfølgelig, hvis vi har en målerapp, trenger vi noen måte å fortelle brukeren hva den endelige måling er, og hvilken bedre måte er det enn å bruke en etikett? For øvelse bruker vi ikke storyboardet til vår etikett, men i stedet legger vi det programmatisk.

Variabel og Klasse-instans

For å opprette en etikett, erklære en variabel øverst i klassen slik:

var measurementLabel = UILabel ()

Her har vi nettopp opprettet en forekomst av UILabel klasse, og i vår viewDidLoad () metode, kan vi konfigurere sine ulike attributter. 

Legg til følgende i din viewDidLoad () metode øverst for å lage en bakgrunn:

Lag en bakgrunn

measurementLabel.frame = CGRect (x: 0, y: 0, bredde: view.frame.size.width, height: 100) measurementLabel.backgroundColor = .white

Den første linjen setter her en hvit bakgrunn for etiketten slik at den er synlig og ikke blandes med levende visning på baksiden. Denne bakgrunnen vil være justert til toppen og vil ha en høyde på 100.

Justering og legge til etiketten

Deretter må vi sette inn teksten så vel som tilpasningen, og legge til etiketten i visningen. For å gjøre dette, legg til følgende for din viewDidLoad () metode:

measurementLabel.text = "0 inches" measurementLabel.textAlignment = .center view.addSubview (målingLabel)

Den første linjen med kode gjør at etikettens standardtekst sier "0 tommer". Vi vil også at appen skal se ganske raffinert, så vi senterer etiketten i lerretet. Til slutt legger vi til etiketten i visningen.

Opprette en sfære

Siden vår app vil være basert på å plassere to sfærer og deretter måle avstanden mellom dem, ville vårt opplagte første skritt være å lære å lage sfærer, så la oss gjøre det nå.

Lag en gjenbrukbar metode

Vi lager sfæren flere ganger, så det er ikke fornuftig å kode det i viewDidLoad () metode. I stedet la vi lage en metode som vi kan gjenbruke og ringe fra hvor vi vil. Så lim inn følgende funksjon i prosjektet ditt:

func newSphere (på posisjon: SCNVector3) -> SCNNode // Din kode går her

Som du ser, tar vi en stilling av typen SCNVector3 og deretter returnere a SCNNode, som ville være sfæren. Det virker ikke så viktig akkurat nå, men vi kommer tilbake til hvorfor vi tar inn en SCNVector3 som en stilling senere.

Opprette en faktisk sfære

La oss nå begynne å lage sfæren. Legg til følgende tre linjer i newSphere () Metode du nettopp opprettet:

// Skaper en SCNSphere med en radius på 0,4 la sfære = SCNSphere (radius: 0.01) // Konverterer sfæren til en SCNNode la node = SCNNode (geometri: sfæren) // Posisjoner noden basert på passet i posisjon node.position = posisjon

Den første linjen med kode oppretter bare en type sfære SCNSphere og setter sin startradius til en verdi av 0.01 meter i SceneKit koordinatsystemet, og dette vil bare være den riktige størrelsen. Hvis du vil, kan du eksperimentere med forskjellige størrelser av sfærer.

Neste linje med kode endrer geometrinettverket som er av typen SCNSphere inn i et faktisk objekt - noe vi faktisk kan forandre og gjøre andre ting med. De SCNNode, Uansett, skal det være det vi går tilbake til funksjonssamtalen.

Til slutt, ved å ta parameteren av posisjon fra funksjonen, plasserer vi ganske enkelt noden der den må settes basert på trykk (som vi ikke har opprettet ennå).

Belysning, skygger og utseende

Denne delen er ikke virkelig trengte, men det er alltid godt å få appen til å se bra ut, og det vil også hjelpe deg å lære om belysning av disse kunstige gjenstandene for fremtidige apper.

Begynn med å lage et tomt materiale:

// Skaper et materiale som er anerkjent av SceneKit, la materialet = SCNMaterial ()

Her forteller vi bare SceneKit at det vil være et nytt materiale som vi vil legge til egenskaper til senere. Med andre ord har vi nettopp opprettet en forekomst av SCNMaterial () og tilordnet det til en konstant kalt materiale.

Sett deretter materialet til oransje ved å gjøre dette:

// Konverterer innholdet i PNG-filen til materialet material.diffuse.contents = UIColor.orange

Siden vi ikke har et bilde som skal vikle rundt sfæren, setter du fargen til oransje. Ja, bare en vanlig oransje farge. Hvis du skulle bruke et bilde, skjønt, må du gjøre det samme, men sett i stedet material.diffuse.contents til et bilde i stedet.

Til slutt, sett belysningskonfigurasjonen og legg materialet til kula slik:

// Skaper realistiske skygger rundt sfæren material.lightingModel = .blinn // Wraps det nyopprettede materialet rundt sfæren sfære.firstMaterial = materiale

Nå, hva du ser her, er at vi endrer hvordan lysene i miljøet vil påvirke materialet vi opprettet. Ved å sette modellen til .Blinn modell, beregner vi høydepunktene våre ved hjelp av a Blinn-Phong Formel. Vi trenger ikke å komme inn i detaljene akkurat nå, men denne spesifikke lysmodellen fungerer best for våre formål. Til slutt erstatter vi sfærens nåværende materiale med det vi nettopp har laget.

Hvis du er nysgjerrig på lysmodellen vi nettopp brukte, her er hva Apples dokumentasjon sier om .Blinn belysning modell:

Skygge som inkorporerer omgivende, diffuse og spekulære egenskaper, der spekulative høydepunkter beregnes ved bruk av Blinn-Phong-formelen. - Apple-dokumentasjon

Tilbake vår sfære

Til slutt, etter å ha skapt sfæren, er vårt siste skritt å bare returnere SCNNode skrevet sfære til funksjonsanropssiden. Bare lim inn denne linjen rett før den avsluttende krøllingen av funksjonen din:

returknutepunkt

Ferdig! Denne metoden er alle rettet opp for å lage sfærer og deretter returnere dem. Husk imidlertid at sfærene ikke vises, med mindre du faktisk ringer til metoden og legger dem til overvåkingen.

Vi har gjort en god start på vår app. Sjekk tilbake i morgen, og jeg vil vise deg hvordan du legger til en trykkbevegelsesgenkjenning for å la brukerne plassere sfærene på punktene de vil måle.

Konklusjon

Vi har oppnådd mye allerede: Vi opprettet en ARKit-app og bygde de grunnleggende grensesnittelementene for avstandsmålingsverktøyet vårt. I morgen skal vi fullføre opptaket ved å la brukerne plassere disse sfærene på punkter i den virkelige verden og deretter beregne avstanden mellom dem.

Og mens du er her, sjekk ut vårt videokurs på koding for ARKit på iOS. I dette kurset ser du hvordan du kodes en ARKit-app fra start til slutt!