ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

0 Shares

In einem früheren Tutorial konnten wir die Mona Lisa mit ARKit 1.5 auf vertikalen Flächen wie Wänden, Büchern und Monitoren platzieren. Durch die Kombination der Leistung von Scene Kit und Sprite Kit (Apples 2D-Grafik-Engine) können wir in ARKit ein Video auf einer ebenen Fläche abspielen.

In diesem Tutorial erfahren Sie, wie Sie mithilfe von ARKit Ihre Augmented Reality-App für iPads und iPhones erstellen. Im Einzelnen werden wir uns ansehen, wie wir in ARKit ein Video auf einem 3D-Fernseher abspielen können.

Was wirst du lernen?

Wir werden lernen, wie man ein Video in einer 2D-Ebene mit Scene Kit und Sprite Kit in ARKit abspielt.

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 den erforderlichen 2D-Assets und der für das Projekt erforderlichen Swift-Datei erstellt. Diese Dateien stellen sicher, dass Sie sich in diesem Handbuch nicht verlaufen. 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 Beitrag zum Steuern einer 3D-Ebene mit hitTest, um Ihr AR-Projekt in Xcode einzurichten. Geben Sie Ihrem Projekt einen anderen Namen, z NextReality_Tutorial9. Führen Sie unbedingt einen kurzen Testlauf durch, bevor Sie mit dem folgenden Tutorial fortfahren.

Schritt 3: Importieren Sie Assets in Ihr Projekt

Klicken Sie im Projektnavigator auf den Ordner “Assets.xcassets”. Wir werden dort unsere 2D-Bilder hinzufügen. Klicken Sie dann mit der rechten Maustaste auf den linken Bereich des Bereichs auf der rechten Seite des Projektnavigators. Wählen Sie “Importieren” und fügen Sie die Datei “overlay_grid.png” aus dem entpackten Ordner “Assets” hinzu.

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

Klicken Sie dann mit der rechten Maustaste auf den Ordner “art.scnassets”, in dem Sie Ihre Dateien im 3D-SceneKit-Format aufbewahren. Wählen Sie anschließend die Option “Dateien zu ‘art.scnassets’ hinzufügen”. Fügen Sie dann die Datei “tv.dae” aus dem entpackten Ordner “Assets” hinzu, den Sie in Schritt 1 oben heruntergeladen haben.

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

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

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

Navigieren Sie als Nächstes zum entpackten Ordner “Assets” und wählen Sie die Datei “Grid.swift” aus. Aktivieren Sie unbedingt die Option “Elemente bei Bedarf kopieren” und lassen Sie alles andere unverändert. Klicken Sie dann auf “Hinzufügen”.

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

Diese Datei hilft beim Rendern eines Rasterbildes für jede vertikale Ebene, die ARKit erkennt.

Schritt 4: Verwenden Sie hitTest, um 3D-TV auf der erkannten horizontalen Ebene zu platzieren

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. 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 (wodurch sichergestellt wird, dass keine Szene mit dem Standardschiffmodell erstellt wird):

let scene = SCNScene()

Als nächstes finden Sie diese Zeile oben in der Datei:

@IBOutlet var sceneView: ARSCNView!

Fügen Sie unter dieser Linie diese Linie hinzu, um ein Array von “Gittern” für alle erkannten vertikalen Ebenen zu erstellen:

var grids = [Grid]()

Kopieren Sie die folgenden zwei Methoden und fügen Sie sie wie unten aufgeführt am Ende der Datei vor der letzten geschweiften Klammer ein ( }} ) in der Datei. Mit diesen Methoden können wir unser Raster in den von ARKit erkannten vertikalen Ebenen als visuellen Indikator hinzufügen.

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
    let grid = Grid(anchor: planeAnchor)
    self.grids.append(grid)
    node.addChildNode(grid)
}

func renderer(_ renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
    guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
    let grid = self.grids.filter { grid in
        return grid.anchor.identifier == planeAnchor.identifier
        }.first

    guard let foundGrid = grid else {
        return
    }

    foundGrid.update(anchor: planeAnchor)
}

Lassen Sie uns kurz durchgehen, was in diesen beiden Methoden passiert:

    Das didAdd () wird aufgerufen, wenn ein neuer Knoten zum hinzugefügt wird ARSCNView. Hier fügen wir das importierte Rasterbild zu jeder erkannten Ebene hinzu. Das didUpdate () wird immer dann aufgerufen, wenn neuer ARPlaneAnchor Knoten werden erkannt oder wenn die Ebene erweitert wird. In diesem Fall möchten wir auch unser Raster aktualisieren und erweitern. Wir machen das hier, indem wir anrufen aktualisieren() auf diesem spezifischen Gitter.

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 vertikale Ebenenerkennung. Unter dieser Zeile in viewWillAppear ()::

let configuration = ARWorldTrackingConfiguration()

Fügen Sie Folgendes hinzu:

configuration.planeDetection = .horizontal

Dies ist sehr wichtig! Dadurch wird sichergestellt, dass ARKit horizontale 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 jetzt Ihre App auf Ihrem Telefon aus und gehen Sie herum. Konzentrieren Sie sich auf eine gut beleuchtete horizontale Fläche wie den Boden oder einen Tisch. Sie sollten in der Lage sein, blaue Gitter zu sehen, wenn eine horizontale Ebene erkannt wird:

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

Als nächstes fügen wir Gestenerkenner hinzu, mit denen wir erkennen können, wo der Fernseher aufgestellt werden soll.

Fügen Sie dies am Ende von hinzu viewDidLoad ()::

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

Nun fügen wir das hinzu tippte (), der die 2D-Koordinate vom getippten Ort auf unseren Telefonen mithilfe des hitTest in eine 3D-Koordinate umwandelt.

Fügen Sie dies am Ende der Datei hinzu, jedoch vor der letzten 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: .existingPlaneUsingExtent)

    guard let hitTest = hitTestResults.first else {
        return
    }
    addTV(hitTest)
}

Zum Schluss fügen wir das hinzu addTV () am Ende der Datei, aber vor der letzten Klammer:

func addTV(_ hitTestResult: ARHitTestResult) {
    let scene = SCNScene(named: "art.scnassets/tv.scn")!
    let tvNode = scene.rootNode.childNode(withName: "tv_node", recursively: true)
    tvNode?.position = SCNVector3(hitTestResult.worldTransform.columns.3.x,hitTestResult.worldTransform.columns.3.y, hitTestResult.worldTransform.columns.3.z)
    self.sceneView.scene.rootNode.addChildNode(tvNode!)
}

Diese Methode stellt sicher, dass wir unseren 3D-Fernseher basierend auf der vom hitTest berechneten 3D-Koordinate hinzufügen. Führen Sie die App aus und tippen Sie auf eine erkannte horizontale Ebene. Sie sollten jetzt in der Lage sein, jedes Mal, wenn Sie auf tippen, einen Fernseher zu sehen.

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

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

Schritt 5: Spielen Sie ein Video auf unserem 3D-Fernseher ab!

Was ist cooler als ein Video auf Handys anzusehen? Sehen Sie sich ein Video in Augmented Reality auf unseren Handys an! Wenn Sie sich an unser letztes Tutorial erinnern, haben wir die Mona Lisa an eine Wand gehängt. Verwenden wir dasselbe Video aus diesem Tutorial und spielen es auf unserem 3D-Fernseher ab.

Importieren wir das Video in unser Projekt. Klicken Sie im Projektnavigator mit der rechten Maustaste auf den gelben Ordner für “NextReality_Tutorial9” (oder wie auch immer Sie Ihr Projekt benannt haben). Wählen Sie die Option “Dateien zu ‘NextReality_Tutorial9 hinzufügen”. Wählen Sie, ob Sie die Datei “video.mov” hinzufügen möchten (so etwas sollte angezeigt werden):

ARKit 101: Platzieren eines virtuellen Fernsehers und Abspielen eines Videos in Augmented Reality

Als nächstes gehen wir zurück zu unserem addTV () Methode.

Direkt über dieser Zeile:

self.sceneView.scene.rootNode.addChildNode(tvNode!)

Fügen Sie diesen Code hinzu:

let tvScreenPlaneNode = tvNode?.childNode(withName: "screen", recursively: true)
let tvScreenPlaneNodeGeometry = tvScreenPlaneNode?.geometry as! SCNPlane

let tvVideoNode = SKVideoNode(fileNamed: "video.mov")
let videoScene = SKScene(size: .init(width: tvScreenPlaneNodeGeometry.width*1000, height: tvScreenPlaneNodeGeometry.height*1000))
videoScene.addChild(tvVideoNode)

tvVideoNode.position = CGPoint(x: videoScene.size.width/2, y: videoScene.size.height/2)
tvVideoNode.size = videoScene.size

let tvScreenMaterial = tvScreenPlaneNodeGeometry.materials.first(where: { $0.name == "video" })
tvScreenMaterial?.diffuse.contents = videoScene

tvVideoNode.play()

Hier importieren wir unser Video in eine SKVideoNode und hängen Sie es an die Scene Kit-Szene an. Wir werden dann die richtige Größe dieser Szene einstellen und sie an unsere vorhandene anhängen SCNNode TV-Knoten. Dies stellt sicher, dass unsere Videoszene an unseren Fernseher angeschlossen ist. Dann spielen wir das Video ab.

Führen Sie die App erneut aus. Nachdem Sie den Fernseher aufgestellt haben, sollte das Video abgespielt werden und 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

Erfolg! Mit den obigen Schritten konnten wir einen 3D-Fernseher in Augmented Reality platzieren und mit ARKit ein Video darauf abspielen. Stellen Sie sich die zukünftigen Auswirkungen dieser Art von AR-Dynamik vor. Wenn AR-Brillen Mainstream sind, können wir alle überall auf sehr großen Bildschirmen fernsehen. Dies ist bereits mit Geräten wie der HoloLens und der Magic Leap One möglich, und jetzt haben wir ARKit direkt auf unseren Handys verwendet. Versuchen Sie nun zu experimentieren, indem Sie die Dinge auf die nächste Stufe heben und Ihre eigenen Videos auf den 3D-Fernseher übertragen.

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

Verpassen Sie nicht: * So platzieren Sie 2D-Bilder wie ein Gemälde oder Foto in Augmented Reality an einer Wand *

0 Shares