Advertisement
  1. Code
  2. iOS SDK

Augmented Reality mit ARKit: Feature Points und horizontale Ebenenerkennung

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Inzwischen haben Sie möglicherweise eine Augmented-Reality-App auf Ihrem iPhone verwendet, deren virtuelle Objekte naturgetreu erscheinen und sich gut in die Funktionen der Umgebung einfügen. In dieser Serie erfahren Sie, wie Sie dies in Ihrer eigenen iOS-App mit Umgebungslichterkennung und Erkennung horizontaler Ebenen implementieren, um Ihre Augmented Reality-Anwendung zu verbessern. Dieses Tutorial konzentriert sich auf die Anzeige horizontaler Ebenen und Feature-Punkte in ARKit.

Wenn Sie Augmented Reality verwenden, möchten Sie Ihr virtuelles Objekt häufig auf einer ebenen Fläche wie einem Tisch, einem Schreibtisch oder sogar auf dem Boden platzieren. Um dies genau zu tun, ist es wichtig, dass Sie diese Objekte erkennen können, bevor Sie beginnen. Nachdem Ihr Flugzeug erkannt wurde, verwendet das Objekt eine Reihe von Punkten, um Ihr virtuelles Objekt daran zu verankern, und das Objekt bleibt dort, auch wenn Sie Ihr Gerät bewegen.

Für dieses Tutorial benötigen Sie einige Grundkenntnisse in Swift, Xcode und ARKit. Wenn Sie ARKit in der Vergangenheit noch nicht verwendet haben, ist es möglicherweise hilfreich, mein vorheriges Tutorial zu lesen, das speziell darauf ausgerichtet ist, Anfängern bei der Erstellung ihrer ersten Augmented Reality-Anwendung zu helfen:

Einstieg

Xcode-Version

Bevor wir beginnen, stellen Sie sicher, dass Sie die neueste Version von Xcode auf Ihrem Mac installiert haben. Dies ist sehr wichtig, da ARKit nur für Xcode 9 oder höher verfügbar ist. Sie können Ihre Version überprüfen, indem Sie Xcode öffnen und in der oberen Symbolleiste zu Xcode > Über Xcode gehen.

Wenn Ihre Version von Xcode älter als Xcode 9 ist, können Sie den Mac App Store aufrufen und kostenlos aktualisieren. Wenn Sie Xcode noch nicht haben, können Sie es auch kostenlos herunterladen und installieren.

Beispielprojekt

Neues Projekt

Nachdem Sie sichergestellt haben, dass Sie die richtige Version von Xcode haben, müssen Sie ein neues Xcode-Projekt erstellen.

Öffnen Sie Xcode und klicken Sie auf Neues Xcode-Projekt erstellen.

Figure 1 Create an Xcode ProjectFigure 1 Create an Xcode ProjectFigure 1 Create an Xcode Project

Sie sind möglicherweise daran gewöhnt, eine Single View-Anwendung zu erstellen. Für dieses Lernprogramm müssen Sie jedoch eine Augmented Reality-App auswählen. Klicken Sie dann auf Weiter.

Figure 2 Select Augmented Reality TemplateFigure 2 Select Augmented Reality TemplateFigure 2 Select Augmented Reality Template

Gaming Frameworks

Sie können Ihr Projekt beliebig benennen, aber ich werde meine Flugzeugerkennung benennen. Sie werden auch feststellen, dass es unten eine Option gibt, bei der Sie zwischen SceneKit, SpriteKit und Metal wählen können.

Dies sind alles Apples Gaming-Frameworks. Für das Tutorial verwenden wir SceneKit, da wir 3D-Objekte verwenden.

Fahren Sie fort und wählen Sie SceneKit aus, falls es noch nicht ausgewählt ist. Ihr Bildschirm sollte ungefähr so aussehen:

Figure 3 Name your ProjectFigure 3 Name your ProjectFigure 3 Name your Project

Vorbereitung zum Test

IPhone anschließen

Da der Xcode Simulator keine Kamera hat, müssen Sie Ihr iPhone anschließen. Wenn Sie kein iPhone haben, müssen Sie sich leider eines ausleihen, um diesem Tutorial (und allen anderen kamerabezogenen Apps) folgen zu können. Wenn Sie bereits ein iPhone mit Xcode verbunden haben, können Sie mit dem nächsten Schritt fortfahren.

Eine raffinierte neue Funktion in Xcode 9 ist, dass Sie Ihre App drahtlos auf einem Gerät debuggen können. Nehmen Sie sich also die Zeit, dies jetzt einzurichten:

Wählen Sie in der oberen Menüleiste Fenster > Geräte und Simulatoren. Stellen Sie im angezeigten Fenster sicher, dass oben Geräte ausgewählt ist.

Schließen Sie jetzt Ihr Gerät mit einem Blitzkabel an. Dadurch sollte Ihr Gerät im linken Bereich des Fensters Geräte und Simulatoren angezeigt werden. Klicken Sie einfach auf Ihr Gerät und aktivieren Sie das Kontrollkästchen Über Netzwerk verbinden.

Figure 4 Devices and SimulatorsFigure 4 Devices and SimulatorsFigure 4 Devices and Simulators

Sie können jetzt auf diesem iPhone drahtlos für alle zukünftigen Apps debuggen.

Schließen Sie das Setup ab

Jetzt ist Ihr Setup abgeschlossen. Sie sollten über eine funktionierende ARKit-App verfügen und diese auf dem iPhone testen können, das Sie gerade verbunden haben. Wählen Sie oben links in Xcode neben den Schaltflächen Ausführen und Stoppen Ihr Gerät aus der Dropdown-Liste Simulator aus. Ich habe Vardhans iPhone ausgewählt, aber Sie müssen Ihr spezielles Gerät auswählen.

Jetzt sind Sie mit dem Erstellen Ihres Starterprojekts fertig und sollten ein virtuelles Raumschiff in Ihrer Welt sehen, sobald Sie auf Ausführen klicken. So sollte es aussehen:

Figure 5 Run the Sample AppFigure 5 Run the Sample AppFigure 5 Run the Sample App

In der Theorie

Bevor wir mit der Programmierung dieser App beginnen, ist es wichtig zu verstehen, wie ARKit diese Flugzeuge tatsächlich erkennt. In diesem Tutorial werden zwei Hauptkonzepte untersucht: Feature-Punkte und horizontale Ebenen. Kurz gesagt, Augmented Reality auf Ihrem iPhone arbeitet mit einem Prozess namens Visual Inertial Odometry (VIO), bei dem die Daten Ihrer Kameras und internen Sensoren verwendet werden, um ein 3D-Verständnis einer Szene zu erhalten.

Feature Point

Was genau ist ein Feature-Punkt? Jedes Bild hätte natürlich seine eigenen Besonderheiten. Zum Beispiel würde es in einer Blume einzigartige Formen geben, oder auf einem Teppich könnte es unterschiedliche Texturen geben.

Diese Punkte stellen bemerkenswerte Merkmale dar, die im Kamerabild erkannt wurden. Ihre Positionen im 3D-Weltkoordinatenraum werden im Rahmen der von ARKit durchgeführten Bildanalyse extrapoliert, um die Position, Ausrichtung und Bewegung des Geräts genau zu verfolgen. Zusammengenommen korrelieren diese Punkte lose mit den Konturen realer Objekte im Blickfeld der Kamera. - Apple

Wie in der Dokumentation von Apple erläutert, helfen Funktionspunkte Ihrem Gerät (und ARKit) dabei, ein Gefühl für die Tiefe und den "Realismus" Ihrer Welt zu bekommen, wodurch Augmented Reality viel genauer wird. Diese werden auch verwendet, um Ihren virtuellen Objekten einen Ankerplatz zu geben und ihnen ein Gefühl dafür zu vermitteln, wo sie bleiben sollen, falls Sie Ihr Gerät bewegen.

Horizontale Ebenen

Ähnlich wie bei Feature-Punkten helfen horizontale Ebenen Ihrer App, ein Gefühl für die Umgebung zu bekommen. Es überrascht nicht, dass Merkmalspunkte und horizontale Ebenen sehr eng miteinander verbunden sind, da diese Ebenen ohne Merkmalspunkte nicht erkannt werden könnten.

Mit den integrierten Sensoren Ihres iPhones, einschließlich der Kamera (natürlich) und einer Kombination dieser Funktionspunkte, kann ARKit verschiedene Ebenen in Ihrer Szene erkennen. Diese Berechnungen und Schätzungen werden in jedem Frame durchgeführt, und es können mehrere Ebenen gleichzeitig erkannt werden.

Wenn Sie eine World-Tracking-AR-Sitzung ausführen, deren Option planeDetection aktiviert ist, fügt die Sitzung ihrer Liste der Anker automatisch ein ARPlaneAnchor-Objekt für jede flache Oberfläche hinzu, die ARKit mit der nach hinten gerichteten Kamera erkennt. Jeder ebene Anker liefert Informationen über die geschätzte Position und Form der Oberfläche. - Apple

In Code

Großartig! Sie haben jetzt eine funktionierende ARKit-App. Ihr Ziel für diese App ist es, eine horizontale Ebene zu erkennen und mit Feature-Punkten (virtuellen Punkten, die auf Szenen in ARKit platziert sind) zu visualisieren.

Startercode

Sie haben jetzt ein solides Verständnis dafür, was Feature-Punkte und horizontale Ebenen sind, und können jetzt damit beginnen, sie in eine App zu programmieren. Wenn Sie mehr Hintergrundinformationen zu Feature-Punkten und horizontalen Ebenen wünschen, empfehlen wir Ihnen, die Dokumentation von Apple zu lesen.

Vorbereitung Ihres Projekts

Wenn Sie Ihre ViewController.swift-Datei öffnen, werden Sie feststellen, dass Apple bereits einen Startercode für Sie eingerichtet hat (der ein Raumschiff rendert). Wir werden in diesem Tutorial nicht darauf eingehen, was alles bedeutet. Wenn Sie jedoch eine zeilenweise Erklärung wünschen, können Sie sich gerne mein anderes Tutorial zu ARKit ansehen.

Da es sich bei einem Großteil des Codes um Boilerplate-Code handelt, behalten wir ihn bei. Was das Raumschiff betrifft, lassen Sie es uns aus dem Weg räumen, indem Sie den Code entfernen, der seine Platzierung übernimmt. Entfernen Sie in Ihrer ViewController.swift-Datei innerhalb Ihrer viewDidLoad()-Methode die folgenden Codezeilen:

Funktionspunkte

Debugging-Optionen aktivieren

Ihr Xcode-Projekt kann jetzt bearbeitet werden. Unser erster Schritt ist das Hinzufügen sichtbarer Feature-Punkte. Es ist wahrscheinlich, dass Sie sie für Produktions-Apps nicht sichtbar machen, aber es ist eine wunderbare Funktion zum Debuggen von Augmented-Reality-Apps.

Dieser Schritt ist ziemlich einfach und kann in einer Zeile ausgeführt werden. Fügen Sie in Ihrer viewDidLoad()-Methode die folgende Codezeile hinzu:

Dieser Code konfiguriert Debug-Optionen mithilfe einer Reihe von Optionen. Sie können andere Features aktivieren, indem Sie sie diesem Array hinzufügen. Im Moment müssen wir nur unsere Feature-Punkte anzeigen. So sollte es aussehen, wenn Sie Ihre App ausführen:

Figure 6 Feature PointsFigure 6 Feature PointsFigure 6 Feature Points

Wie Sie sehen können, sind alle erkannten Feature-Punkte sichtbar. Wenn Sie sie nicht sehen, bewegen Sie Ihr iPhone, und es sollten gelbe Punkte angezeigt werden. Ein Grund dafür, dass sie nicht sofort angezeigt werden, ist, dass ARKit die Szene immer noch erkennt.

Aufbau

Jetzt sind wir bereit für die Flugzeugerkennung. Wenn Sie sich Ihre viewWillAppear()-Methode ansehen, sehen Sie die folgenden zwei Codezeilen. Nehmen wir uns einen Moment Zeit, um zu erfahren, was sie bedeuten, da sie für die Flugzeugerkennung relevant sind:

Hier wird eine Instanz der ARWorldTrackingConfiguration-Klasse erstellt. Diese Klasse ist für die Gerätepositionierung verantwortlich. Danach führen wir die Konfiguration in unserer aktuellen sceneView-Sitzung aus. Wenn Sie mehr darüber erfahren möchten, können Sie die Dokumentation von Apple dazu besuchen. Im Moment können Sie jedoch mit dem nächsten Schritt fortfahren.

Aktivieren wir jetzt die Ebenenerkennung in unserer ARWorldTrackingConfiguration. Unterhalb der Zeile, in der die Konfiguration erstellt wird, müssen Sie die folgende Zeile einfügen:

Ausgezeichnet! Jetzt ist die Erkennung horizontaler Ebenen aktiviert, aber wir können sie nicht sehen, da sie unter der Haube stattfindet. Dies bedeutet, dass das iPhone weiß, wo sich die Ebene befindet, aber wir können nicht sehen, was es denkt.

Flugzeugerkennung

Auf Anker prüfen

Bevor wir mit der Visualisierung unserer erkannten Flugzeuge beginnen können, müssen wir herausfinden, wann und wo die Flugzeuge erkannt werden. Dies kann einfach mit einer Delegatmethode durchgeführt werden, die uns von Apple zur Verfügung gestellt wird.

Beginnen Sie mit der Deklaration einer Methode für das ARSCNViewDelegate. Wie Sie sehen werden, entspricht die ViewController-Klasse bereits diesem Delegaten im Startercode. Fügen Sie die folgende Delegate-Methode in Ihre ViewController-Klasse ein:

Dies wird aufgerufen, wenn neue ARAnchors mit einem entsprechenden Knoten hinzugefügt werden, in diesem Fall unsere horizontalen Ebenen.

Zeigt dem Delegaten an, dass der Szene ein SceneKit-Knoten hinzugefügt wurde, der einem neuen AR-Anker entspricht. - Apple

Flugzeuggeometrie

Bei den meisten Apps möchten Sie jedoch, dass der Benutzer erkennen kann, wo Ihre App horizontale Ebenen erkennt. Daher lernen wir, wie diese Ebenen dem Benutzer mithilfe des im Delegaten bereitgestellten Knotens und des Ankers tatsächlich angezeigt werden Methode, die wir früher aufgerufen haben.

Unsere erste Frage lautet: Ist der ARAnchor wirklich ein Flugzeug oder wollen wir ihn nicht? Wir können dies durch Typguss und optionale Bindung überprüfen. Fügen Sie diese Codezeile in Ihre Delegatenmethode ein:

Möglicherweise haben Sie bemerkt, dass der anchor parameter den Typ ARAnchor hat. Wenn wir wissen möchten, ob dieser Anker eine Ebene ist, können wir versuchen, ihn als ARPlaneAnchor zu tippen. Wenn dies gelingt, wissen wir, dass ein Flugzeug erkannt wurde.

Fügen Sie in der optionalen Bindungsanweisung Code hinzu, um eine SCNPlane mit den Dimensionen des Ankers zu erstellen, den wir von der Delegate-Methode erhalten haben. Schreiben Sie die folgenden zwei Codezeilen aus:

In der ersten Zeile wird eine zweidimensionale SCNPlane erstellt, die in ihrem Konstruktor zwei Parameter verwendet: eine Breite und eine Höhe. Sie werden sehen, dass wir anchor.extent.x und anchor.extent.z übergeben, die, wie der Name schon sagt, die Breite und Höhe der erkannten Ebenen darstellen. Sie werden feststellen, dass wir den y-Wert des Ankers weggelassen haben. Dies liegt daran, dass die von uns erkannten Ebenen zweidimensional sind und die x- und z-Achsen über die von uns identifizierten Ebenen verlaufen.

In der nächsten Codezeile wird diesen erkannten Ebenen ein durchscheinender roter Farbton zugewiesen, und Sie können durch diese Ebenen hindurchsehen, da der Alpha-Wert auf 0,5 festgelegt ist. Natürlich können Sie beliebige Farben oder Erscheinungsbilder verwenden, solange Sie diese sehen können.

Knoten erstellen

Wir sind noch nicht fertig; Wir müssen noch den Knoten erstellen, um ihn unserer Ansicht hinzuzufügen. Obwohl unsere Ebene ein zweidimensionales Objekt ist, müssen wir es dennoch in 3D mit einer x-, y- und z-Koordinate darstellen. Diese Koordinaten beziehen sich auf den übergeordneten Knoten des erkannten Ebenenankers und nicht auf die sceneView. Geben Sie die folgenden Codezeilen ein:

Wir erstellen zuerst einen SCNNode mit der Ebenengeometrie, die wir im vorherigen Schritt erstellt haben. Dazu wird die Geometrie als Parameter des SCNNode-Konstruktors übergeben.

Als nächstes positionieren wir den Ebenenknoten direkt in der Mitte des Ebenenankers mithilfe einer SCNVector3-Darstellung der x-, y- und z-Koordinaten in der dreidimensionalen Ebene.

In der nächsten Zeile sehen Sie außerdem, dass der x-Wert unserer eulerAngles auf -π/2 festgelegt wird. Die Eigenschaft eulerAngles repräsentiert die Neigung, das Gieren und das Rollen des SCNNode. Laut Apples Dokumentation repräsentiert der x-Wert die Steigung (oder Drehung um die x-Achse), und wir möchten, dass unsere flach an der Ebene anliegt (nicht aufrecht haftet).

Zuletzt wird der neu erstellte Knoten als untergeordneter Knoten des erkannten Ebenenknotens hinzugefügt, um ihn für den Benutzer an derselben Stelle sichtbar zu machen.

Abschluss

Gut gemacht! Sie sollten jetzt in der Lage sein, horizontale Ebenen (und natürlich die Funktionspunkte) zu sehen, wenn Sie Ihre Anwendung auf Ihrem iPhone ausführen. Wenn Sie dies nicht tun, stellen Sie sicher, dass Sie Ihr Telefon langsam bewegen, damit es die Oberfläche scannt, und versuchen Sie, das Alpha der zuvor eingestellten Farbe zu erhöhen. So sieht meine aus:

Figure 7 Horizontal Planes and Feature PointsFigure 7 Horizontal Planes and Feature PointsFigure 7 Horizontal Planes and Feature Points

Sie wissen jetzt, wie Sie flache Oberflächen wie Tische oder Schreibtische erkennen und dem Benutzer als horizontale Ebenen anzeigen. Darüber hinaus konnten Sie sehen, wie ARKit die Welt mit Feature-Punkten betrachtet. Schauen Sie sich während Ihres Aufenthalts einige unserer anderen ARKit-Kurse und -Tutorials hier auf Envato Tuts+ an!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.