ARKit: Realitate Augmentată pe iOS

Ovidiu Mățan
Fondator @ Today Software Magazine

PROGRAMARE

Realitatea augmentată poate fi definită și ca o modalitate de a interveni în percepția noastră asupra lumii înconjurătoare prin intermediul unor ochelari speciali sau dispozitive mobile. Cea mai celebră aplicație care a folosit această tehnologie este Pokemon Go. Lansată în Iulie 2016, a avut peste 500 de milioane de downloaduri. Cei de la Apple au lansat în septembrie 2017, noul iOS 11 în care a fost inclus frameworkul ARKit. Acesta folosește senzorii și camera dispozitivelor mobile Apple pentru a genera realitate augmentată. Frameworkul se ocupă de tot ce înseamnă localizarea în spațiu și crearea de obiecte 3D sau 2D. Recent, luna aceasta, la CES această tehnologie a fost în prim plan prin prezența mare de dispozitive speciale lansate.

Tot ceea ce trebuie să aveți pentru a începe să folosiți acest kit este un sistem Apple și un telefon iPhone 6s, care mai nou, are sistemul de operare OS 11. Puteți astfel să vă impresionați prietenii cu aplicații inedite și de ce nu, să le publicați pe AppStore. În cazul în care sunteți programator dar nu ați mai scris code în Swift, nu vă faceți griji pentru că este similar cu Java sau C#. O introducere rapidă se poate realiza citind Swift Tour.

Prima aplicație pe care o vom realiza va consta în afișarea unor elemente de bază. Pornim XCode-ul, creăm un nou proiect Single View App pentru iOS. După crearea acestuia, vom adăuga drepturile de utilizare a camerei video din cadrul aplicației în Information Property List: Privacy - Camera Usage Description.

Adăugăm în continuare ARKit SceneKit View în Main Storyboard pe care îl vom redimensiona astfel încât să cuprindă întreg ecranul:

Atașăm instanța componentei ARSCNView în clasa ViewController prin drag & drop și o denumim sceneView, după care importăm pachetul ARKit. Pentru o primă aplicație, vom lansa în modul debug componenta Scene View. Primul lucru este crearea unei configurații unde putem alege din cele trei implementări ale clasei abstracte ARConfiguration:

ARWorldTrackingConfiguration - această configurație folosește camera principală, determină orientarea și poziția telefonului în spațiu și de asemenea, detectează suprafețele plane. Este configurația folosită pentru experiențe AR complete.
AROrientationTracking Configuration - se folosește tot camera din spate a telefonului, dar se determină doar orientarea acestuia. În cazul în care utilizatorul se mișcă, iluzia AR se pierde.
ARFaceTrackingConfiguration - folosește camera din față a dispozitivului mobil și detectează deplasarea și expresia feței utilizatorului. Din păcate, această configurație este suportată doar de iPhone X.

Folosind configurația ARWorldTrackingConfiguration și adăugând opțiunile de debug în sceneView, codul nostru se înfățișează astfel:

import UIKit
import ARKit

class ViewController: UIViewController {
    @IBOutlet weak var sceneView: ARSCNView!
    let configuration = ARWorldTrackingConfiguration()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.sceneView.debugOptions =                     
          [ARSCNDebugOptions.showWorldOrigin, 
           ARSCNDebugOptions.showFeaturePoints]
        self.sceneView.showsStatistics = true
        self.sceneView.session.run(configuration)
        // Do any additional setup after loading 
        // the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that 
        // can be recreated.
    }
}

Cele două opțiuni de tipul SCNDebugOptions sunt alipite prin extensia ARSCNDebugOptions pentru clasa ARSCNView:

showWorldOrigin - arată coordonatele pe axele X, Y și Z în punctul de origine (0,0,0);
showFeaturePoints - se vor afișa punctele detectate din spațiul înconjurător.

Rularea aplicației se va putea realiza doar prin folosirea unui dispozitiv real, pentru că rularea ei într-un emulator nefiind posibilă. Conectăm printr-un cablu telefonul sau tableta la calculator și îl selectăm din lista de dispozitive pentru rularea proiectului.

La prima rulare, va trebui să accesați pe dispozitivul mobil opțiunea General -> Profiles & Device management și să acordați drepturi de rulare pentru contul de App Developer.

Următorul pas va fi să adăugăm un cub în scenă. Pentru aceasta vom adăuga următoarea funcție:

  public func addCube(_ x: Float, _ y: Float,
  _ z: Float, _ color: UIColor, _ rootNode: SCNNode)   
  -> SCNNode{
        let node = SCNNode()
        node.geometry = SCNBox(width: 0.5, 
         height: 0.5, length: 0.5, chamferRadius: 0)
        
        node.geometry?.firstMaterial?.diffuse
         .contents = color
        node.position = SCNVector3(x,y,z)
        rootNode.addChildNode(node)
        return node;
    }

Se creează inițial un SCNNode, căruia i se atașează geometria, în cazul nostru un cub cu laturile de 0.5m. Urmează setarea materialului de culoare roșie. Nodul trebuie să primească și o poziție în spațiu relativ la coordonatele inițiale (0,0,0). La final, nodul se adaugă unui nod rădăcină.

Pentru afișarea acestuia la 2m în fața noastră, vom apela addCube() la finalul funcției viewDidLoad() astfel:

let cube1=addCube(0,0,-2, UIColor.red,
self.sceneView.scene.rootNode)

Mai putem introduce noi noduri, a căror poziționare va fi relativă la nodul rădăcină. Astfel, pentru a afișa deasupra lui cube1 alte două cuburi, vom folosi poziționarea relativă la acesta:

addCube(0.25,0.5,0,UIColor.blue, cube1)
addCube(-0.25,0.5,0,UIColor.green, cube1)

Cuburile se pot roti, efectul se va aplica întregului nod și vor fi rotite astfel și elementele copil ale acestuia.

func animateShape(_ shape: SCNNode) {
    let rotate=SCNAction.rotateBy(x: 0, 
       y: CGFloat(360.degreesToRadians), 
       z: 0, duration: 8)

       let rotateInfinite=SCNAction
       .repeatForever(rotate)
       
       shape.runAction(rotateInfinite)
    }

 extension Int {
    var degreesToRadians: Double { 
       return Double(self) * .pi/180}
    }

Am utilizat o extensie a clasei int pentru transformarea din grade în radiani. Definirea acțiunii de rotire necesită setarea axelor în jurul căruia se dorește rotirea precum și durata în secunde în care să se realizeze. Pentru o acțiune continuă, vom mai adăuga o acțiune de repetare la infinit a acțiunii inițiale. În final, am asignat acțiunea nodului primit ca parametru al funcției.

Rotirea celor trei cuburi împreună se poate realiza în felul următor:

animateShape(cube1)

Alternativ, putem să rotim doar unul dintre cuburile copil sau să le rotim individual pe fiecare. Un exemplu de aplicație este realizarea sistemului solar folosind realitatea augmentată.

Interacțiunea cu obiectele

Interacțiunea este una din acțiunile principale pe care le avem cu lucrurile din jurul nostru sau cu cele virtuale prin intermediul ecranului telefonului sau a tabletei. Vom prezenta această interacțiune printr-o simplă atingere a ecranului. Atunci când vom atinge cuburile, acestea se vor opri din rotire, pentru ca atunci când le vom atinge din nou vor reîncepe să se rotească. Pentru aceasta, vom folosi clasa UITapGestureRecognizer. Aceasta primește ca parametri: target pentru a identifica obiectul care va primi mesajele în momentul în care este recunoscută o acțiune, și action, selectorul care identifică metoda care va procesa gesturile recunoscute. Mai jos, este prezentat modul de inițializare și de asignare la sceneView :

let tapRecognizer=UITapGestureRecognizer(
  target: self, action: #selector(handleTap))

sceneView.addGestureRecognizer(tapRecognizer)

Funcția handleTap va trebui să fie din cauza selectorului definit în Objective C să suporte și el Objective C. Deocamdată, vom afișa un mesaj în momentul în care se atinge ecranul.

@objc func handleTap(sneder: UITapGestureRecognizer) {
   print ("something was tap")
}

Vom adăuga în continuare suportul pentru recunoașterea atingerii cuburilor din realitatea augmentată. Vom folosi obiectul sender pentru a determina ce obiect a fost apăsat. Se va obține obiectul pe care s-a apăsat, în cazul nostru un SCNView. Următorul pas este să obținem coordonatele. În continuare, verificăm dacă coordonatele din Scene View corespund unui obiect. La final, în funcție de rezultat, pornim sau oprim animația.

    @objc func handleTap(
        sender: UITapGestureRecognizer) {

        print ("something was tap")
        let sceneViewTappedOn = sender.view 
           as! SCNView

        let touchCoordinates = sender.location(
           in: sceneViewTappedOn)

        let hitTest = sceneViewTappedOn
           .hitTest(touchCoordinates)

        if hitTest.isEmpty {
            print("didn't touch anything")
        } else {
            print ("touch the object")
            if (isAnimated){
                stopAnimation(cube1!)
            } else {
                animateShape(cube1!)
            }
        }
    }

Pentru oprirea animației folosim următoarea funcție, prin care eliminăm toate animațiile existente, în cazul nostru având doar una.

    func stopAnimation(_ shape:SCNNode){
        shape.removeAllActions()
        isAnimated=false
    }

Codul complet al aplicației poate fi descărcat de aici.

Concluzie

ARKit reprezintă un framework puternic care face realizarea unei aplicații de realitate augmentată un lucru ușor. Articolul de față este o introducere în acest framework. Personal am fost impresionat de ușurința cu care se pot realiza animații și construcții 3D. În viitor, vom explora și integrarea ARKit în Unity 3d.