ARKit 101: So starten Sie Ihre eigene Augmented Reality-Rakete in den Himmel der realen Welt

0 Shares

Haben Sie SpaceX und seine Starts in letzter Zeit bemerkt? Haben Sie sich jemals vorgestellt, wie es sich anfühlen würde, eine eigene Rakete in den Himmel zu schießen? Nun, stell dir nicht mehr vor!

In diesem Tutorial erfahren Sie, wie Sie mit ARKit eine einfache Augmented Reality-App für iPads und iPhones erstellen. Insbesondere werden wir darüber nachdenken, wie wir eine Rakete in den Himmel schießen können, und sicherstellen, dass sie auf der Grundlage der “Weltverfolgung” weiterfliegt.

Was wirst du lernen?

Wir werden lernen, wie man 3D-Objekte in der AR-Welt basierend auf physischen Einschränkungen der realen Welt animiert. Wir erhalten auch Hilfe, indem wir die zuvor behandelten Details zu hitTest und Flugzeugerkennung verwenden.

Mindestanforderungen

Mac mit MacOS 10.13.2 oder höher. Xcode 9.2 oder höher. Ein Gerät mit iOS 11+ auf einem A9 oder höher Prozessor. Grundsätzlich das iPhone 6S und höher, das iPad Pro (9,7 Zoll, 10,5 Zoll oder 12,9 Zoll; erste und zweite Generation) und das iPad 2017 oder höher. Swift 4.0. Obwohl Swift 3.2 unter Xcode 9.2 funktioniert, empfehle ich dringend, den neuesten Xcode herunterzuladen, um auf dem neuesten Stand zu bleiben. Ein Apple Developer-Konto. Es ist jedoch zu beachten, dass Sie kein kostenpflichtiges Apple Developer-Konto benötigen. Mit Apple können Sie Apps mit einem unbezahlten Apple Developer-Konto auf einem Testgerät bereitstellen. Sie benötigen jedoch ein kostenpflichtiges Entwicklerkonto, um Ihre App in den App Store zu stellen. (Informationen zur Funktionsweise des Programms finden Sie auf der Apple-Website, bevor Sie sich für Ihr kostenloses Apple Developer-Konto registrieren.)

Schritt 1: Laden Sie die Assets herunter, die Sie benötigen

Um das Befolgen dieses Tutorials zu vereinfachen, habe ich einen Ordner mit den für das Projekt erforderlichen 2D- und 3D-Assets erstellt. Diese Dateien erleichtern das Verfolgen und Verstehen dieses Handbuchs. Laden Sie daher den komprimierten Ordner mit den Assets herunter und entpacken Sie ihn.

Schritt 2: Richten Sie das AR-Projekt in Xcode ein

Wenn Sie sich nicht sicher sind, wie Sie dies tun sollen, befolgen Sie Schritt 2 in unserem Artikel zum Steuern einer 3D-Ebene mit hitTest, um Ihr AR-Projekt in Xcode einzurichten. Geben Sie Ihrem Projekt einen anderen Namen, z NextReality_Tutorial3. Stellen Sie sicher, dass Sie einen kurzen Testlauf durchführen, bevor Sie mit dem folgenden Tutorial fortfahren.

Schritt 3: Importieren Sie Assets in Ihr Projekt

Wechseln Sie in Ihrem Xcode-Projekt zum Projektnavigator in der linken Seitenleiste. Klicken Sie mit der rechten Maustaste auf den Ordner “art.scnassets”, in dem Sie Ihre Dateien im 3D-SceneKit-Format aufbewahren, und wählen Sie dann die Option “Dateien zu ‘art.scnassets hinzufügen” “. Fügen Sie die folgenden Dateien aus dem entpackten Ordner “Assets” hinzu, den Sie in Schritt 1 oben heruntergeladen haben: “rocket.scn”, “fire.scnp”, “Rauch.scnp”, “Rauch.png”, “spark.png”. (Hinweis: Löschen Sie nicht die mit dem Projekt gelieferte Datei “texture.png”.)

ARKit 101: So starten Sie Ihre eigene Augmented Reality-Rakete in den Himmel der realen Welt

Klicken Sie im Projektnavigator erneut mit der rechten Maustaste auf den gelben Ordner für “NextReality_Tutorial3” (oder wie auch immer Sie Ihr Projekt benannt haben). Wählen Sie die Option “Dateien zu ‘NextReality_Tutorial3’ hinzufügen”.

ARKit 101: So starten Sie Ihre eigene Augmented Reality-Rakete in den Himmel der realen Welt

Navigieren Sie zum entpackten Ordner “Assets” und wählen Sie die Datei “Rocket.swift”. Stellen Sie sicher, dass Sie “Elemente bei Bedarf kopieren” aktivieren und alles andere unverändert lassen. Klicken Sie dann auf “Hinzufügen”.

ARKit 101: So starten Sie Ihre eigene Augmented Reality-Rakete in den Himmel der realen Welt

“Rocket.swift” sollte Ihrem Projekt hinzugefügt werden, und Ihr Projektnavigator sollte ungefähr so ​​aussehen:

ARKit 101: So starten Sie Ihre eigene Augmented Reality-Rakete in den Himmel der realen Welt

Diese Datei kümmert sich um das Rendern der Rakete und des Rauch- / Feuerpartikelsystems.

Schritt 4: Aktivieren Sie die horizontale Ebenenerkennung

In unserem Tutorial zur Erkennung horizontaler Ebenen finden Sie Informationen zu den Ebenenerkennungsfunktionen von ARKit.

Öffnen Sie die Klasse “ViewController.swift”, indem Sie darauf doppelklicken. Der Rest dieses Tutorials wird dieses Dokument bearbeiten. Wenn Sie dem endgültigen Code für Schritt 4 folgen möchten, öffnen Sie einfach diesen Link, um ihn auf GitHub anzuzeigen.

Ändern Sie in der Datei “ViewController.swift” die Zeile zum Erstellen von Szenen in der viewDidLoad () Methode. Ändern Sie es von:

let scene = SCNScene(named: "art.scnassets/ship.scn")!

Zu folgendem (was sicherstellt, dass wir keine Szene mit dem alten Schiffsmodell erstellen):

let scene = SCNScene()

Lassen Sie uns nun Feature-Punkte aktivieren. Unter dieser Zeile in viewDidLoad ()::

sceneView.showsStatistics = true

Fügen Sie Folgendes hinzu:

sceneView.debugOptions = ARSCNDebugOptions.showFeaturePoints

Als nächstes aktivieren wir die Erkennung der horizontalen Ebene. Unter dieser Zeile in viewWillAppear ()::

let configuration = ARWorldTrackingConfiguration()

Fügen Sie dann Folgendes hinzu:

configuration.planeDetection = .horizontal

Dadurch wird sichergestellt, dass ARKit horizontale, flache geometrische Ebenen in der realen Welt erkennen kann. Mit den Feature-Punkten können wir alle 3D-Punkte anzeigen, die ARKit erkennen kann.

Führen Sie Ihre App auf Ihrem Telefon aus und gehen Sie herum. Konzentrieren Sie sich auf einen gut beleuchteten Bereich auf dem Boden, und Sie sollten in der Lage sein, gelbe Merkmalspunkte wie diesen zu sehen:

ARKit 101: So starten Sie Ihre eigene Augmented Reality-Rakete in den Himmel der realen Welt

Kontrollpunkt: Ihr gesamtes Projekt am Ende dieses Schritts sollte wie der endgültige Schritt 4-Code auf meinem GitHub aussehen.

Schritt 5: Platzieren Sie eine Rakete mit hitTest auf dem Boden

In unserem hitTest-Tutorial erfahren Sie, wie hitTest funktioniert. Fühlen Sie sich frei, dem endgültigen Code für Schritt 5 zu folgen, wenn Sie den folgenden Inhalt eingeben.

In diesem Schritt fügen wir am Ende des eine Gestenerkennung hinzu viewDidLoad () Methode, die unserem View Controller ein Touch-Ereignis hinzufügt. Jedes Mal, wenn ein Tippen passiert, wird die tippte () Methode wird aufgerufen.

let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(tapped))
sceneView.addGestureRecognizer(gestureRecognizer)

Fügen Sie nun die hinzu tippte () Methode am Ende der Datei, aber vor der letzten geschweiften Klammer:

@objc func tapped(gesture: UITapGestureRecognizer) {
    // Get 2D position of touch event on screen
    let touchPosition = gesture.location(in: sceneView)

    // Translate those 2D points to 3D points using hitTest (existing plane)
    let hitTestResults = sceneView.hitTest(touchPosition, types: .existingPlane)

    guard let hitTest = hitTestResults.first else {
        return
    }

    addRocket(hitTest)
}

Wir stellen sicher, dass a hitTest () mit dem touchPosition der getippten Geste unter Verwendung der vorhandenen Ebene. Dies stellt sicher, dass die hitTest-Ergebnisse, die wir zurückerhalten, von einer vorhandenen Ebene stammen und nicht von einem zufälligen Feature-Punkt. Sobald wir das richtige hitTest-Ergebnis gefunden haben, rufen wir das auf addRocket () um die Rakete an diesem bestimmten Punkt zu platzieren.

Kopieren Sie nun die und fügen Sie sie ein addRocket () unter dem tippte (), aber vor der letzten geschweiften Klammer wie unten aufgeführt:

func addRocket(_ hitTest: ARHitTestResult) {
    let scene = SCNScene(named: "art.scnassets/rocket.scn")
    let rocketNode = Rocket(scene: scene!)
    rocketNode.name = "Rocket"
    rocketNode.position = SCNVector3(hitTest.worldTransform.columns.3.x, hitTest.worldTransform.columns.3.y, hitTest.worldTransform.columns.3.z)

    sceneView.scene.rootNode.addChildNode(rocketNode)
}

Wir laden die Raketenszenendatei und verwenden dann die Rakete Klasse, um eine zu erstellen rocketNode Objekt. Das Rocket.swift Die von uns importierte Klasse kümmert sich um das Rendern der Rakete und ihres Rauchpartikelgenerators. Wir nennen dann einfach die rocketNode und positionieren Sie es an der angegebenen Position von hitTest.

Klicken Sie auf die Wiedergabetaste, um die App zu erstellen und erneut auszuführen. Gehen Sie nach dem Einsatz in einem gut beleuchteten Bereich herum und erkennen Sie so viele Funktionspunkte wie möglich am Boden. Tippen Sie auf eine Gruppe erkannter Feature-Punkte, um das 3D-Raketenobjekt zu platzieren. Beachten Sie, wie die Rauchpartikel vom Heck der Rakete aufsteigen (sollten).

Kontrollpunkt: Ihr gesamtes Projekt am Ende dieses Schritts sollte wie der endgültige Schritt 5-Code auf meinem GitHub aussehen.

Schritt 6: Fügen Sie der Rakete Animations- und Physikeffekte hinzu

Hier werden wir Effekte hinzufügen, die es ermöglichen, dass unsere Rakete abgefeuert wird und weiter nach oben fliegt, wobei Feuer von ihrem Heck abgegeben wird. Folgen Sie dem endgültigen Schritt 6-Code, wenn Sie den folgenden Inhalt eingeben.

Zuerst fügen wir einen Gestenerkenner mit doppeltem Tippen hinzu. Am Ende von viewDidLoad () Fügen Sie nach der Gestenerkennung aus Schritt 5 den folgenden Code hinzu:

let doubleTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(doubleTapped))
doubleTapGestureRecognizer.numberOfTapsRequired = 2
gestureRecognizer.require(toFail: doubleTapGestureRecognizer)
sceneView.addGestureRecognizer(doubleTapGestureRecognizer)

Dies fügt die doppelte Geste hinzu, um den Start der Rakete auszulösen.

Fügen Sie als Nächstes das hinzu doubleTapped () am Ende der Datei, aber vor der letzten geschweiften Klammer:

@objc func doubleTapped(gesture: UITapGestureRecognizer) {
    // Get rocket and smoke nodes
    guard let rocketNode = sceneView.scene.rootNode.childNode(withName: "Rocket", recursively: true) else {
        fatalError("Rocket not found")
    }

    guard let smokeNode = rocketNode.childNode(withName: "smokeNode", recursively: true) else {
        fatalError("Smoke node not found")
    }

    // 1. Remove the old smoke particle from the smoke node
    smokeNode.removeAllParticleSystems()

    // 2. Add fire particle to smoke node
    let fireParticle = SCNParticleSystem(named: "art.scnassets/fire.scnp", inDirectory: nil)
    smokeNode.addParticleSystem(fireParticle!)

    // 3. Give rocket physics animation capabilities
    rocketNode.physicsBody = SCNPhysicsBody(type: .dynamic, shape: nil)
    rocketNode.physicsBody?.isAffectedByGravity = false
    rocketNode.physicsBody?.damping = 0.0
    rocketNode.physicsBody?.applyForce(SCNVector3(0,100,0), asImpulse: false)
}

Lassen Sie uns genau untersuchen, was wir in jedem dieser Schritte tun:

    Nachdem wir die Knoten erhalten haben, die mit der Rakete und dem Rauchpartikelgenerator verbunden sind, entfernen wir den alten Rauchpartikelgenerator. Warum? Weil unsere Rakete beim Start Feuer statt Rauch hat! Wir laden das Feuerpartikel-Asset und fügen es als neuen Partikelgenerator unserem Rauchknoten hinzu. Wir ändern einige Eigenschaften der Physikkörper der Rakete, damit sie hochfliegen kann. Wir schaffen eine dynamisch Physikkörper, damit die Rakete von Kräften beeinflusst werden kann. Wir deaktivieren dann die Rakete, die von der Schwerkraft beeinflusst wird (damit sie mit konstanter Geschwindigkeit weiterfliegt, da die Schwerkraft natürlich jedes Objekt verlangsamt, das in den Himmel geschossen wird). Legen wir fest Dämpfung auf “0”, um zu verhindern, dass der Luftwiderstand unsere Rakete verlangsamt. Schließlich üben wir eine Kraft aus (oder bewegen) die Rakete in Richtung des angegebenen Vektors nach oben (“0” in x und z, also nur in y-Richtung nach oben bei “100”).

Lassen Sie uns nun die App erneut ausführen. Gehen Sie diesmal nach draußen, wo Sie möglicherweise etwas Platz haben, um die Rakete vollständig zu sehen – vorzugsweise in einem Bereich, in dem der Boden gut beleuchtet und strukturiert ist. Wenn Sie eine Gruppe von Feature-Punkten sehen, tippen Sie einmal, um die Rakete an einer beliebigen Stelle zu platzieren. Sie sollten anfangen zu sehen, wie der Rauch an seinem Schwanz erzeugt wird. Tippen Sie zweimal auf eine beliebige Stelle, um die Rakete zu starten. Sie sollten bemerken, dass das Rauchpartikel durch das Feuerpartikel ersetzt wird. Gehen Sie herum, sobald Sie die Rakete gestartet haben, und schauen Sie weiter in diese Richtung. Sie sollten weiterhin sehen, wie die Rakete hochfliegt, auch wenn Sie weiter vom Startpunkt entfernt sind. Dank World Tracking kann ARKit ein 3D-Objekt basierend auf dem Standort und den Tracking-Daten rendern, die es vom Gerät erhält. Im Wesentlichen weiß ARKit immer, wo Ihr Gerät mit dem 3D-Objekt zusammenhängt, das Sie der AR-Welt hinzugefügt haben.

Ihr Start sollte ungefähr so ​​aussehen:

Kontrollpunkt: Ihr gesamtes Projekt am Ende dieses Schritts sollte wie der endgültige Schritt 6-Code auf meinem GitHub aussehen.

Was wir erreicht haben

Gut gemacht! Sie konnten erfolgreich eine Rakete in den Himmel starten. Lassen Sie uns das durchgehen, was Sie aus diesem Tutorial gelernt haben: Platzieren einer Rakete auf dem Boden mithilfe der horizontalen Ebenenerkennung und des HitTests, Hinzufügen von Rauch- und Feuerpartikeln zur Rakete, Hinzufügen von Physikanimationen, um die Rakete starten zu können und in der Lage zu sein Verfolgen Sie Ihre Rakete nach dem Start dank World Tracking.

Wenn Sie den vollständigen Code für dieses Projekt benötigen, finden Sie ihn in meinem GitHub-Repo. Ich hoffe, Ihnen hat dieses ARKit-Tutorial gefallen, das Ihnen einen Weg zu den (virtuellen) Sternen geben soll. Wenn Sie Kommentare oder Feedback haben, können Sie diese gerne im Kommentarbereich hinterlassen. Viel Spaß beim Codieren!

Verpassen Sie nicht: So platzieren Sie Gras mithilfe der Flugzeugerkennung auf dem Boden

0 Shares