ARKit 101: So platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

0 Shares

Haben Sie jemals Bilder oder Videos von Luftballons gesehen, die in den Himmel gelassen wurden und zufällig in alle Richtungen davonschwebten? Das sieht man oft in klassischen Postern oder Filmen. Rate mal? Jetzt können Sie dies tun, ohne Hunderte von Luftballons kaufen zu müssen. Sie benötigen lediglich ARKit!

In diesem Tutorial erfahren Sie, wie Sie mit ARKit eine einfache Augmented Reality-App für iPads und iPhones erstellen. Im Einzelnen werden wir untersuchen, wie wir eine Gruppe virtueller Ballons freigeben und sie mithilfe von “World Tracking” und SceneKit-Physik und -Animationen in zufällige Richtungen in den Himmel schweben lassen können.

Was wirst du lernen?

Wir werden lernen, wie man viele 3D-Objekte in der AR-Welt auf zufällige Weise animiert. Mit ARKit können wir viele 3D-Objekte erstellen, Kraft auf sie ausüben und dennoch eine hervorragende Bildrate beibehalten. Wir werden auch Hilfe bekommen, indem wir den zuvor behandelten hitTest verwenden.

Mindestanforderungen

Mac mit MacOS 10.13.2 oder höher. Xcode 9.4 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.4 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 dem für das Projekt erforderlichen 3D-Asset 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_Tutorial6. 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 folgende Datei aus dem entpackten Ordner “Assets” hinzu, den Sie in Schritt 1 oben heruntergeladen haben: “red_balloon.dae”.

ARKit 101: So platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

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

ARKit 101: So platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

Navigieren Sie zum entpackten Ordner “Assets” und wählen Sie die Datei “Balloon.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 platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

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

ARKit 101: So platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

Diese Datei kümmert sich um das Rendern des roten Ballons.

Schritt 4: Verwenden Sie hitTest, um so viele 3D-Ballons wie möglich zu platzieren

Um schnell über ARKits HitTest zu gehen, schauen Sie sich unser Tutorial zu HitTest an.

Öffnen Sie die Klasse “ViewController.swift”, indem Sie darauf doppelklicken. Der Rest dieses Tutorials konzentriert sich auf die Bearbeitung dieses Dokuments. 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

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 platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

Fügen Sie als Nächstes 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) {
    let touchPosition = gesture.location(in: sceneView)

    // Translate that 2D point to a 3D point using hitTest (featurePoint), wherever there is a featurePoint, add a balloon there
    let hitTestResults = sceneView.hitTest(touchPosition, types: .featurePoint)

    guard let hitTest = hitTestResults.first else {
        return
    }

    addBalloon(hitTest: hitTest)
}

Hier führen wir einen HitTest durch, der auf jedem Feature-Punkt basiert, den ARKit in der 3D-Welt erkennt. Sobald wir unseren HitTest haben, rufen wir an addBalloon () um den Ballon in die Szene hinzuzufügen.

Als nächstes fügen wir die hinzu addBalloon () Methode am Ende der Datei, aber vor der letzten geschweiften Klammer:

func addBalloon(hitTest: ARHitTestResult) {
    let scene = SCNScene(named: "art.scnassets/red_balloon.dae")
    let balloonNode = Balloon(scene: scene!)
    balloonNode.position = SCNVector3(hitTest.worldTransform.columns.3.x, hitTest.worldTransform.columns.3.y, hitTest.worldTransform.columns.3.z)

    sceneView.scene.rootNode.addChildNode(balloonNode)
}

Führen Sie Ihre App aus und gehen Sie herum, bis Sie einige gelbe Funktionspunkte sehen. Tippen Sie auf eine beliebige Stelle, an der Sie Feature-Punkte sehen, und Sie sollten sehen, wie rote Luftballons platziert werden.

ARKit 101: So platzieren Sie eine Gruppe von Luftballons um Sie herum und lassen sie zufällig in den Himmel schweben

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

Schritt 5: Lassen Sie die Luftballons in zufälligen Richtungen in den Himmel schweben

Jetzt müssen wir unseren Ballons nur noch dynamische Kräfte in zufälligen Richtungen hinzufügen, sobald sie der Szene hinzugefügt werden. Fühlen Sie sich frei, dem endgültigen Code für Schritt 5 zu folgen, wenn Sie den folgenden Inhalt eingeben.

Fügen wir dem eine Logik hinzu addBalloon () Methode. Am Ende von addBalloon () Methode nach dieser Zeile:

sceneView.scene.rootNode.addChildNode(balloonNode)

Fügen Sie den folgenden Code hinzu:

balloonNode.physicsBody = SCNPhysicsBody(type: .dynamic, shape: nil)
balloonNode.physicsBody?.isAffectedByGravity = false
balloonNode.physicsBody?.damping = 0.0
// Randomize direction for horizontal movement
let negativeHorizontal = Int(arc4random_uniform(2)) == 0 ? -1 : 1
let xCord = 10 + Float(arc4random_uniform(50))
let yCord = 20 + Float(arc4random_uniform(100))
balloonNode.physicsBody?.applyForce(SCNVector3(Float(negativeHorizontal)*xCord,yCord,0), asImpulse: false)

Dies ähnelt dem Hinzufügen der dynamischen Physikeffekte im Raketen-Tutorial. Wir wenden die Kraft jedoch in zufälliger Richtung für jeden Ballon an, der zwischen 10 und 60 Metern für die x-Koordinate (horizontal) und zwischen 20 und 120 Metern für die y-Koordinate (vertikal) liegt. Wir werden auch zufällig auswählen, ob die x-Koordinate negativ sein soll oder nicht (damit sich der Ballon sowohl nach links als auch nach rechts bewegen kann). Dies stellt sicher, dass alle unsere Ballons mit unterschiedlichen horizontalen und vertikalen Geschwindigkeiten in verschiedene Richtungen schweben.

Worauf wartest du? Führen Sie die App aus, gehen Sie hoffentlich tagsüber nach draußen und lassen Sie Ihre Luftballons fliegen! Sie sollten alle sofort in zufälligen Richtungen nach oben schweben. Es sollte ungefähr so ​​aussehen:

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

Was wir erreicht haben

Gut gemacht! Sie konnten erfolgreich eine Gruppe von Luftballons in die Welt um Sie herum platzieren und sie in zufälligen Richtungen in den Himmel schweben lassen. Dies ist wirklich aufregend, da die Leistung von SceneKit es uns ermöglicht, Kräfte (daher das schwebende Verhalten) dynamisch in jede mögliche Richtung hinzuzufügen. Mit World Tracking durch ARKit können wir die Ballons am Himmel weiterhin sehen, wenn wir uns von ihnen entfernen. Faszinierend, findest du nicht?

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. Wenn Sie Kommentare oder Feedback haben, können Sie es gerne im Kommentarbereich hinterlassen. Viel Spaß beim Codieren!

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

0 Shares