Codați o aplicație de măsurare cu ARKit obiecte și umbre

Împreună cu multe alte instrumente care au fost depășite de tehnologia modernă, se pare că măsura comună de bandă poate fi următoarea. În acest tutorial vom învăța să depășim decalajul dintre realitate și tehnologie prin utilizarea realității augmentate și a camerei de pe dispozitivul dvs. iOS pentru a crea o aplicație care va măsura distanța dintre două puncte.

În această postare vom porni aplicația și vom codifica elementele principale ale interfeței. Mâine, o să terminăm prin măsurarea a două puncte în scenă AR.

Dacă începeți doar cu ARKit, asigurați-vă că verificați celălalt tutorial, unde veți învăța să aduceți o planetă în casa dvs. folosind realitatea augmentată. 

Noțiuni de bază

Să începem să ne facem conducătorul virtual, ceea ce ne va permite să măsuram distanța dintre oricare două puncte din lumea reală. Dacă vă gândiți la asta, este posibil să nu mai aveți nevoie de banda de măsurare pentru măsurătorile zilnice!

Creați o aplicație ARKit

Proiect nou

Pentru a începe, asigurați-vă că aveți o versiune de Xcode care acceptă ARKit. Apoi, va trebui să faceți un nou proiect Xcode. 

Du-te și deschideți Xcode și faceți clic pe Creați un nou proiect Xcode.

S-ar putea să fii obișnuit să faci a Vizualizare individuală, dar pentru acest tutorial va trebui să alegeți Aplicație realitate augmentată apoi faceți clic pe Următor →.

Gaming Framework

Puteți numi proiectul dvs. tot ce vă place, dar voi fi numit pe mine ARPlanets. Veți observa, de asemenea, că există o opțiune în partea de jos unde puteți selecta dintre SceneKit, SpriteKit și Metal. Acestea sunt toate cadrele de jocuri ale Apple, iar în scopul acestui tutorial, vom fi de folos SceneKit

Continuați și selectați SceneKit dacă nu este deja selectat. Ecranul dvs. ar trebui să arate astfel:

Pregătirea pentru testare

Conectarea unui iPhone

Deoarece simulatorul Xcode nu are o cameră foto, va trebui să conectați iPhone-ul. Din păcate, dacă nu aveți un iPhone, va trebui să împrumutați unul pentru a putea urmări împreună cu acest tutorial (și pentru orice alte aplicații legate de camere sau AR). Dacă aveți deja un iPhone conectat la Xcode, puteți trece la următorul pas.

O caracteristică nouă în Xcode 9 este că puteți să debugați fără fir aplicația pe un dispozitiv, așadar să o stabilim acum.

În bara de meniu de sus, alegeți Fereastră > Dispozitive și simulatoare. În fereastra care apare, asigurați-vă că Dispozitive este selectat în partea de sus.

Acum conectați dispozitivul utilizând un cablu de trăsnet. Acest lucru ar trebui să facă aparatul să apară în panoul din stânga al ferestrei Dispozitive și simulatoare fereastră. Pur și simplu faceți clic pe dispozitivul dvs. și verificați Conectați-vă prin rețea cutie.

Acum veți putea să debugați fără fir pe acest iPhone pentru toate aplicațiile viitoare.

Configurare completă

Acum configurația dvs. este completă. Ar trebui să aveți o aplicație ARKit de lucru și o puteți testa pe iPhone pe care tocmai l-ați conectat. În colțul din stânga sus al Xcode, lângă Alerga și Stop butoane, selectați-vă dispozitiv din meniul derulant al simulatorului.


Acum, dacă faceți clic pe rulați, ar trebui să vedeți o navă spațială virtuală care apare în lumea voastră!

Următorul pas va fi eliminarea navei spațiale și începerea codării interfeței pentru aplicația noastră de măsurare.

Aplicația de măsurare

O treabă excelentă în ceea ce privește lansarea aplicației ARKit! Acum, să continuăm să scăpăm de nava spațială și să creăm aplicația noastră de măsurare a distanței de la zero. Aplicația noastră va funcționa permițând utilizatorului să introducă două sfere în scenă AR și apoi să calculeze distanța dintre ele. La fel de simplu ca s-ar putea suna, ea necesită un pic echitabil de programare, așa că puneți-vă pe pălăria de gândire și să ajungem la ea!

Nu voi explica codul de pornire în acest tutorial, deci dacă nu înțelegeți ceva, asigurați-vă că ați verificat tutorialul meu de la început cu ARKit.

Pornind de la zero

Îndepărtarea Spațiului

Preferăm să nu avem o navă spațială aleatorie care să apară în aplicația noastră de măsurare, deci să o eliminăm și codul acesteia din proiect.

Dacă vă îndreptați către Assets.xcassets folder din directorul de proiect, veți observa două fișiere care alcătuiesc nava dvs.: ship.scn și texture.png. Acestea sunt cele două fișiere care spun Xcode exact cum ar trebui să arate nava spațială. În aplicația noastră, totuși, vom defini sferele în mod programatic. Dacă aveți noduri mai complicate de adăugat, este bine să utilizați .NCS , dar dacă puteți, este întotdeauna preferabil să faceți lucrurile în cod.

Eliminarea codului de eșantionare

Acum că ați eliminat activele navei, este posibil să primiți erori în acest moment (dacă nu, atunci când se va executa codul). Acest lucru se datorează faptului că există încă referințe actuale la fișierele pe care le-am șters. Nu vă faceți griji, totuși. Vom scăpa de codul de probă astfel încât să putem începe programarea de la zero.

Deplasați-vă la ViewController.swift fișier și eliminați următoarele două linii de cod:

// Setați delegatul vizualizării sceneView.delegate = auto // Afișați statistici cum ar fi fps și informația de sincronizare sceneView.showsStatistics = true

După ce ați făcut acest lucru, dvs. viewDidLoad () metoda ar trebui să arate după cum urmează:

override func ViewDidLoad () super.viewDidLoad () // Setați delegatul vizualizării sceneView.delegate = auto // Afișați statistici cum ar fi fps și informația de sincronizare sceneView.showsStatistics = true

În continuare, le putem folosi în noua noastră aplicație. Restul codului de pornire din aplicație este doar boilerplate care face lucruri cum ar fi rularea vizualizării SceneKit și alte lucruri de acest fel.

Crearea unei etichete

Desigur, dacă avem o aplicație de măsurare, vom avea nevoie de un fel de a spune utilizatorului care sunt măsurătorile finale și care este modalitatea mai bună de a utiliza o etichetă? Pentru practică, nu vom folosi tabloul de bord pentru eticheta noastră, ci o vom adăuga programatic.

Instanță variabilă și clasă

Pentru a crea o etichetă, declarați o variabilă în partea de sus a clasei dvs., astfel:

var measurementLabel = UILabel ()

Aici, am creat doar o instanță a UILabel clasa, și în nostru viewDidLoad () , putem configura diferite atribute. 

Adăugați următoarele la dvs. viewDidLoad () pentru a crea un fundal:

Realizarea unui fundal

măsurareLabel.frame = CGRect (x: 0, y: 0, lățime: dimensiune de vizualizare.simp., înălțime: 100) measurementLabel.backgroundColor = .white

Prima linie de aici stabilește un fundal alb pentru etichetă, astfel încât să fie vizibilă și nu se potrivește cu vizualizarea live din spate. Acest fundal va fi aliniat la partea de sus și va avea o înălțime de 100.

Alinierea și adăugarea etichetei

Apoi, trebuie să setăm textul și aliniamentul său și să adăugăm eticheta în vedere. Pentru a face acest lucru, adăugați următoarele la dvs. viewDidLoad () metodă:

measurementLabel.text = "0 inch" măsurareLabel.textAlignment = .center view.addSubview (measurementLabel)

Prima linie de cod face textul implicit al etichetei să spună "0 inci". De asemenea, dorim ca aplicația să pară destul de rafinată, așa că vom centra eticheta în panza. În cele din urmă, adăugăm eticheta la vizualizare.

Crearea unei sfere

Deoarece aplicația noastră se va baza pe plasarea a două sfere și apoi măsurarea distanței dintre ele, prima noastră evidentă ar fi să învățăm cum să creăm sfere, deci să facem asta acum.

Efectuarea unei metode reutilizabile

Facem sfera de mai multe ori, deci nu are sens să o codificăm în viewDidLoad () metodă. În schimb, să creăm o metodă pe care o putem reutiliza și apela de oriunde ne place. Asigurați-vă că în proiectul dvs. lipiți următoarea funcție:

func newSphere (la pozitia: SCNVector3) -> SCNNode // Codul merge aici

După cum puteți vedea, luăm o poziție de tip SCNVector3 și apoi întoarcerea a SCNNode, care ar fi sfera. Nu pare prea importantă acum, dar vom reveni la motivul pentru care luăm parte SCNVector3 ca poziție mai târziu.

Crearea unei sfere reale

Să începem să creăm sfera. Adăugați următoarele trei linii în newSphere () metoda pe care tocmai ați creat-o:

// creează o SCNSphere cu o rază de 0,4 ani sferă = SCNSphere (rază: 0,01) // convertește sfera într-un nod SCN permite nodul = SCNNode (geometrie: sferă) // poziționează nodul pe baza node.position = poziție

Prima linie de cod creează pur și simplu o sferă de tip SCNSphere și își stabilește raza inițială la o valoare de 0,01 metri în sistemul de coordonate SceneKit, și acesta va fi doar dimensiunea potrivită. Dacă doriți, puteți experimenta cu diferite dimensiuni de sfere.

Următoarea linie de cod modifică plasa de geometrie care este de tip SCNSphere într-un obiect real - ceva ce putem schimba de fapt și facem alte lucruri cu. SCNNode, oricum, va fi ceea ce vom reveni la apelul pentru funcții.

În sfârșit, luând parametrul poziției din funcție, pur și simplu plasăm nodul în care trebuie să fie pus în funcție de robinetul (care nu am creat încă).

Lumini, Umbre și Aspect

Această parte nu este cu adevărat dar este întotdeauna bine să faceți aplicația să arate frumos și, de asemenea, vă va ajuta să aflați despre iluminarea acestor obiecte artificiale pentru aplicațiile viitoare.

Începeți prin a crea un material gol:

// Crează un material care este recunoscut de SceneKit let material = SCNMaterial ()

Aici îi spunem pur și simplu SceneKit că va exista un material nou la care vom adăuga proprietăți mai târziu. Cu alte cuvinte, am creat doar o instanță de SCNMaterial () și l-au atribuit unei constante numite material.

Apoi, setați materialul să fie portocaliu făcând acest lucru:

// Convertește conținutul fișierului PNG în materialul material.diffuse.contents = UICcolor.orange

Deoarece nu avem o imagine care să înfășoare sfera, setați-o pe culoarea portocalie. Da, doar o culoare portocalie. Dacă ar trebui să folosiți o imagine, totuși, va trebui să faceți același lucru, dar, în schimb, setați material.diffuse.contents la o imagine.

În sfârșit, setați configurația de iluminare și adăugați materialul în sferă astfel:

// Creeaza umbre realiste in jurul sferei materialului. LightingModel = .blinn // Pastreaza materialul nou realizat in jurul sferei sferei.firstMaterial = material

Acum, ceea ce veți vedea aici este schimbarea modului în care luminile din mediul înconjurător vor afecta materialul pe care l-am creat. Prin setarea modelului la .BlinN modelul, noi calculam evidențierile noastre utilizând un Formula Blinn-Phong. Nu trebuie să intrăm în detalii chiar acum, dar acest model de iluminare specific va funcționa cel mai bine pentru scopurile noastre. În cele din urmă, înlocuim materialul actual al sferei cu cel pe care tocmai l-am creat.

Dacă sunteți curios de modelul de iluminare pe care tocmai l-am folosit, iată ce spune despre documentația Apple despre .BlinN model de iluminat:

Umbrirea care încorporează proprietăți ambientale, difuze și speculare, în care se calculează evidențierile speculare folosind formula Blinn-Phong. - Documentația Apple

Revenirea sferei noastre

În cele din urmă, după crearea sferei, ultimul nostru pas este de a returna pur și simplu SCNNode tastând sfera site-ului pentru apeluri funcționale. Trebuie doar să lipiți această linie chiar înainte de sfârșitul curse-bretele de funcția dumneavoastră:

retur nod

Totul este gata! Această metodă este îndreptată pentru a face sfere și apoi pentru a le întoarce. Amintiți-vă, totuși, că sferele nu vor apărea decât dacă apelați metoda și apoi le adăugați la supervizare.

Am făcut un început bun în aplicația noastră. Verificați mâine și vă vom arăta cum să adăugați un dispozitiv de recunoaștere a gestului pentru a permite utilizatorilor să introducă sferele pe punctele pe care doresc să le măsoare.

Concluzie

Am realizat deja multe: am creat o aplicație ARKit și am construit elementele de interfață de bază pentru instrumentul nostru de măsurare a distanței. Mâine, vom termina prin a lăsa utilizatorii să introducă aceste sfere în puncte din lumea reală și apoi să calculeze distanța dintre ele.

Și în timp ce sunteți aici, verificați cursul nostru video privind codarea pentru ARKit pe iOS. În acest curs, veți vedea cum să codificați o aplicație ARKit de la început până la sfârșit!

Cod