MOBILE DEVELOPMENT iOS
AUGMENTED REALITY MIT REALITYKIT & REALITY COMPOSER Realitätsnah AR-Apps mit RealityKit & Reality Composer entwickeln.
as Thema Augmented Reality ist bei Apple weiter stark Entities bilden die Basis und haben neben den Struktur- D im Fokus. Neben dem schon in der letzten Ausgabe be- Aufgaben keine weiteren Fähigkeiten. Diese erhalten sie erst sprochenen Neuerungen in ARKit 3, gibt es zwei vollkommen durch Komponenten (Components). Hierbei handelt es sich neue Tools: Der 3D-Renderer RealityKit und der Szenen-Edi- um ein modulares System, wobei unterschiedliche Kompo- tor Reality Composer. Beide wollen wir uns im Folgenden ein- nenten nach Bedarf zu einer Einheit zusammengestellt wer- mal genauer anschauen. den (Bild 1). Diese Art der Komposition nennt Apple das Entity Compo- RealityKit nent System. Es verfolgt die Absicht, bei einem komplexen Zwar hat Apple mit SceneKit schon einen 3D-Renderer in sei- System lange Ableitungshierarchien zu vermeiden. Im Ver- nem Portfolio, doch ist dieser eher allgemein ausgelegt, was gleich zu anderen Systemen ist ihnen das auch gelungen. die Entwicklung von Augmented-Reality-Anwendungen un- Folgende Komponenten werden von RealityKit zur Verfü- nötig komplex gestaltet. RealityKit wurde daher speziell da- gung gestellt: für entwickelt, die Entwicklung von AR-Apps so einfach wie AnchoringComponent möglich zu gestalten. Hierfür unterstützt es fotorealistisches BodyTrackingComponent Rendering, welches sich nahtlos in das Kamerabild integriert. CollisionComponent Dazu kommen weitere Features, wie Animation, Physik-Si- DirectionalLightComponent mulation, Audio und Synchronisation für Multiplayer-Spiele. DirectionalLightComponent.Shadow ModelComponent PerspectiveCameraComponent PhysicsBodyComponent PhysicsMotionComponent PointLightComponent SpotLightComponent SpotLightComponent.Shadow SynchronizationComponent Transform
Alle Funktionen von RealityKit lassen sich auf Ba- sis dieser Komponenten zusammenstellen und Der Aufbau des Entity-Component-Systems (Bild 1) verändern. Um den Konfigurationsaufwand nied- rig zu halten, gibt es jedoch konkrete Ableitun- gen von Entity, die häufig verwendete Pakete Die API wurde speziell für Swift entworfen. RealityKit unter- schnüren. Die AnchorEntity stellt so einen Ankerpunkt in der stützt die Plattformen iOS und macOS und verwendet Metal, Szene dar. ModelEntity ein sichtbares Objekt mit Kollisions- wobei es speziell für die Apple-GPUs optimiert ist. Es unter- erkennung und Physik-Simulation. Bild 2 zeigt die jeweils da- stützt die schon bekannten USDZ-Dateien, bringt aber auch für verwendeten Komponenten. ein eigenes, neues Format mit, das Reality File Format. Auch Lichter sind Entities. So gibt es AmbientLight für Um- gebungslicht, DirectionalLight für gerichtetes Licht und Spot- Entity & Component Light für Punktlicht. Sogar die Kamera (PerspectiveCamera) RealityKit ist, wie die meisten modernen 3D-Engines, ein Sze- ist ein Entity. nengraph-Renderer. Das bedeutet, dass die anzuzeigenden Die am häufigsten verwendete Entity ist die ModelEntity. Elemente in Form eines Baums logisch strukturiert, verwaltet Mit ihr werden alle sichtbaren Elemente der Szene aufge- und gerendert werden. Die Lösung von RealityKit erinnert an baut, wobei nur selten etwas an der Zusammenstellung der die von UIKit, denn auch UIViews werden in einem Baum Komponenten verändert werden muss. Deshalb behandeln strukturiert. Bei RealityKit heißen diese Elemente Entity. wir es hier auch nicht weiter. Ein Entity-Element stellt jeweils ein Objekt in der Szene RealityKit hat mit ARView seine eigene View-Komponen- dar und legt fest wer seine Vater- und Kindknoten sind, und te. Sie leitet wie üblich von UIView ab und kann an beliebi- wo es sich relativ zum Vaterknoten befindet. ger Stelle in die View-Hierarchie von Anwendungen einge-
70 11/2019 www.webundmobile.de iOS MOBILE DEVELOPMENT
baut werden. Das geht entweder manuell oder über das Sto- Mögliche weitere Anker sind die von ARKit bekannten Ty- ryboard, indem man eine Reality AR-View in die Szene zieht pen: Bild, Gesicht, Körper, Kamera, und alle vom Entwickler und ein Outlet erzeugt: angelegten Instanzen von ARAnchor.
@IBOutlet var arView: ARView! ModelEntity ModelEntity-Objekte werden als visueller Teil der Szene in ARView kümmert sich dabei um globale Themen, wie das zwei Teilen beschrieben: Der Form und dem Material. Da US- Handling von Gesten, das Fokus-Handling, Kamera-Effekte, DZ-Dateien beides enthalten, können entsprechende Objek- usw. Außerdem verwaltet sie die Szene, also alles das, was te mit einem simplen load() vollständig geladen werden: angezeigt wird. Hierfür besitzt sie das scene-Property, wel- ches bereits eine fertig initialisierte Instanz der Klasse Scene let loadedEntity = try? ModelEntity.load(named: "Robot") enthält. Sie verwaltet die erste Ebene der Entities der Szene, und damit effektiv den gesamten Baum. Die passende Datei (hier Robot.usdz) muss sich dabei in den Ressourcen befinden. Anker Wie von ARKit bekannt, benötigt man Anker um virtuelle Objekte in der echten Welt positi- onieren zu können. Die Herangehensweise von RealityKit ist dabei von der anderen Seite. Hier formulieren wir mit einem AnchorEntity die Art des Ankers, mit dem wir uns verbinden wollen. Für eine horizontale Ebene beispielsweise so: let planeAnchor = AnchorEntity(plane: .horizontal)
Zur Laufzeit hält RealityKit dann Ausschau nach passenden Ankern, und bindet sich an den ersten, der die entsprechenden Bedingun- gen erfüllt. Diese Bedingungen lassen sich als optionale Parameter des Initializers auch ge- nauer festlegen: let planeAnchor = AnchorEntity(plane: .horizontal, classification: .table, minimumBounds: [1.0, 1.0]) Die Komponenten von Entity, AnchorEntity und ModelEntity im Vergleich (Bild 2)
Hier wird eine Fläche angefragt, die der Klas- sifikation (classification:) Tisch (.table) entspricht. Andere ho- Anschließend muss das Modell nur noch mit addChild() zu rizontale Flächen, wie Decken oder Fußböden, werden dann einer Entity hinzugefügt werden. In diesem Falle direkt zum nicht beachtet. Über die Minimum Bounds (minimum- Anker (planeAnchor): Bounds:) lässt sich außerdem noch die gewünschte Mindest- größe der Ebene festlegen. Wie bei ARKit üblich, wird hier im planeAnchor.addChild(loadedEntity) metrischen System gearbeitet und Werte in Metern überge- ben. Die Fläche muss also eine Mindestgröße von einem Qua- Die load()-Methode hat jedoch einen kleinen Haken, und dratmeter haben. zwar lädt sie Ressourcen synchron, was besonders auf dem Um die AnchorEntity zu aktivieren, wird sie mit addAn- Main-Thread äußerst ungünstig werden kann, da die Anwen- chor() zur Szene der ARView hinzugefügt: dung so lange nicht mehr reagiert. Bei einem kleinen Modell kann das noch vertretbar sein, ansonsten empfiehlt es sich arView.scene.addAnchor(planeAnchor) eher das asynchrone Laden, das über die Methode loadA- sync() zur Verfügung gestellt wird: AnchorEntity fungiert nun als Wurzelelement für die weite- ren Entities, die sich an diesem orientieren. Sie werden aller- let resourceLoader = ModelEntity.loadAsync(named: dings erst aktiviert, wenn auch ein passender Anker gefun- "Robot").sink(receiveCompletion: { error in den worden ist. Entsprechende Objekte hängen also nicht // Error... sinnlos in der Gegend herum, so lange noch kein passender }, receiveValue: Anker gefunden worden ist. { loadedEntity in ▶
www.webundmobile.de 11/2019 71 MOBILE DEVELOPMENT iOS
planeAnchor.addChild(loadedEntity) ein violettes (.purple), metallisches und blank poliertes (Rau- }) heit 0) Material erzeugt. Außerdem ist es möglich für SimpleMaterials Texturen zu Der Vorgang gestaltet sich naturgemäß etwas komplexer, da- verwenden. Hierfür wird mit dem parameterlosen Initializer für kann es aber auch große Modelle störungsfrei in den Spei- eine Instanz von SimpleMaterialerzeugt, da der oben gezeig- cher bringen. te Initializer nur UIColor-Farben erlaubt: Der von loadAsync() zurückgegebene LoadRequest ist ein Publisher für das neue Combine Framework. Über die sink()- var textMaterial = SimpleMaterial() Methode abonnieren wir das Ergebnis, das im Fehlerfall ein textMaterial.baseColor = try! .texture(.load error und im Erfolgsfall das geladene Modell (loadedEntity) (named: "yellow wall")) übergibt. Auch dort muss dieses nur noch mit addChild() zu einer anderen Entity hinzugefügt werden. Anschließend kann als baseColor eine Textur (.texture()) ge- setzt werden, die wiederum mit .load(named:) geladen wird. MeshResource Dieses Enum verhält sich dabei wie beim Laden eines Bildes Alternativ zum Laden aus Dateien können über UIImage(named:) und lädt das entspre- die Form (shape) und das Material auch ma- chende Bild aus dem Asset Catalog. nuell erzeugt werden. RealityKit hat hierfür Hat man Form und Material zusammen, die Klassen MeshResource und SimpleMa- dann ist es ein leichtes daraus ein ModelEn- terial. MeshResource ist die Repräsentation tity-Objekt zu erzeugen: einer Kollektion von Punkten (edges) und Kanten (vertices), die zusammen die Form let boxEntity = ModelEntity(mesh: (shape) eines 3D-Objekts definieren. Diese boxShape, materials: [boxMaterial]) können entweder manuell definiert oder als Würfel (box), Ebene (plane), Kugel (sphere) Dieses muss nur noch zu einem anderen En- oder Text über entsprechende Generator- tity (hier planeAnchor) hinzugefügt werden: Funktionen erzeugt werden. Ein Würfel er- zeugt man mit generateBox() beispielsweise planeAnchor.addChild(boxEntity) so: Da Würfel mit dem Ursprung des Koordina- let boxShape = MeshResource. tensystems genau in der Mitte erzeugt wer- generateBox(size: 0.1, den, würden sie zur hälfte in der Fläche ste- cornerRadius: 0.01) cken, was sich verhindern lässt, indem man das Objekt um die Hälfte seiner Größe nach Dabei beschreibt size: die Kantenlänge des oben schiebt. Das erreicht man, indem man Würfels in Metern. cornerRadius: ist optional einen Float-Vektor mit 3 Komponenten und rundet die Ecken ab. (SIMD3
let boxMaterial = SimpleMaterial(color: .purple, Relationen roughness: 0, isMetallic: true) Ein wichtiges Merkmal von Szenengraph-Systemen ist die relative Positionierung von Kind-Elementen, so dass man sich Das Material wird dabei über drei Parameter beschrieben: immer nur um die Positionierung relativ zum Vaterknoten Die Farbe (color:) ist ein UIColor/NSColor, die Rauheit (rough- kümmern muss. Wo man sich konkret in der Welt befindet, ist ness) wird im Bereich 0 bis 1 angegeben, und isMetallic: gibt dabei egal. Auf dieselbe Art werden Entities bei RealityKit an, ob das Material metallisch sein soll. Im Beispiel wird so miteinander verbunden. Erzeugen wir hierfür eine weitere
72 11/2019 www.webundmobile.de iOS MOBILE DEVELOPMENT
ModelEntity mit der oben erzeugten Text- sie über den Typ (DirectionalLightCompo- Form (textShape) und dem Material mit der nent.self) identifizieren. Da jede Komponen- Textur (textMaterial): te nur einmal pro Entity existieren darf, lässt sie sich so immer einfach finden. Startet man let textEntity = ModelEntity(mesh: nun das Beispiel und findet eine horizontale textShape, materials: [textMaterial]) Fläche, dann wird dort die Objekt-Gruppe angezeigt. Bild 3 zeigt die Szene. Dieses Element (textEntity) fügen wir nun mit addChild() zur eben erzeugten boxEnti- Occlusion Material ty hinzu, was die Relation herstellt: Es gibt Fälle, wo es in Augmented Reality- Anwendungen zu Störungen in der Darstel- boxEntity.addChild(textEntity) lung kommt, wenn virtuelle Objekte eigent- lich in realen Objekten verschwinden oder Der Text von textEntity hat enorme Dimen- von diesen verdeckt werden würden. Solch sionen, weshalb er zuerst einmal auf ein ein Fall entsteht beispielsweise, wenn wir brauchbares Maß reduziert werden muss. den Würfel oben nicht auf der Y-Achse nach Das erledigen wir über die Transformations- oben schieben würden (Bild 4). matrix von textEntity, dessen Skalierungs- RealityKit hat hierfür ein besonderes Ma- komponente wir über das scale-Property mit terial, mit dem in solchen Fällen gearbeitet einem einfachen Vektor für die drei Achsen werden kann, und zwar das Occlusion Ma- konfigurieren können: terial. Es funktioniert wie ein Unsichtbar- keitsumhang für Objekte. Alle Objekte, die textEntity.scale = [0.01, 0.01, 0.01] Der Würfel versinkt im Tisch, wird sich in oder hinter ein Objekt mit diesem aber nicht korrekt dargestellt Material bewegen, werden verdeckt und Der Text von textEntity beginnt am Null- (Bild 4) sind nicht mehr zu sehen. punkt und läuft dann nach rechts. Wir wol- Um eine Tischoberfläche auf diese Art un- len ihn aber zentriert über dem Würfel se- durchlässig zu machen, erzeugen wir einen hen, weshalb wir textEntity um die hälfte der Breite des Texts neuen Würfel, der als Stellvertreter für den Tisch in der virtu- nach links schieben wollen. Das machen wir so, wie wir das ellen Scene agiert: oben schon getan haben, indem wir die Dimensionen (ext- ends) von MeshResource und davon die X-Achse abfragen: let occlusionBox = MeshResource.generateBox(size: 0.5) let textWidthHalf = textEntity.model!.mesh.bounds. Er erhält eine Kantenlänge von einem halben Meter. Dann extents.x/2 * textEntity.scale.x erzeugen wir das OcclusionMaterial: textEntity.position = [-textWidthHalf, 0.1, 0] let occlusionMaterial = OcclusionMaterial() Hier fragen wir die MeshResource über das model-Property von textEntity ab, über das es ebenfalls verfügbar ist. Außer- Und kombinieren alles in Form eines ModelEntity-Objekts: dem muss noch der Skalierungsfaktor mit einbezogen wer- den, den wir über das scale-Property festgelegt haben. Ab- let occlusionEntity = ModelEntity(mesh: occlusionBox, schließend schieben wir dann textEntity über das position- materials: [occlusionMaterial]) Property um die halbe Textbreite (textWidthHalf) nach links planeAnchor.addChild(occlusionEntity) und um 10 Zentimeter nach oben, damit es über dem Würfel erscheint. Um den Text besser lesbar zu machen, entfernen Welches wir mit addChild() zum planeAnchor hinzufügen. wir die Text-Entity aus der Beleuchtungsberechnung, wo- Der Würfel ist nun wieder um den Ursprung des Vater-Kno- durch es uniform beleuchtet wird, und nicht mehr von den in tens und damit dem Tisch-Anker positioniert. Um den Effekt der Umgebung verfügbaren Lichtquellen abhängt. Wir ma- richtig umzusetzen, müssen wir den Würfel daher um seine chen das, indem wir die entsprechende Komponente zur Be- halbe Höhe nach unten schieben, damit die obere Fläche des leuchtungsberechnung (DirectionalLightComponent) der In- Würfels an der Stelle der Tischplatte des Tisches steht. Dafür stanz entfernen: fragen wir wieder die extents der Box für die Y-Achse ab und verschieben den Würfel über das position-Property: textEntity.components.remove (DirectionalLightComponent.self) occlusionEntity.position = [0, -(occlusionBox.bounds.extents.y/2) + 0.001, 0] Dafür greifen wir mit dem components-Property auf das Set der Komponenten des Entities zu und entfernen die ge- Hierbei verschieben wir den Würfel um ein kleines bisschen wünschte Komponente mit der remove()-Methode, indem wir mehr, damit flach auf dem Tisch aufliegende Entities nicht ▶
www.webundmobile.de 11/2019 73 MOBILE DEVELOPMENT iOS
auch schon abgeschnitten werden. Der Wert Leben in die Szene gehaucht werden. Wir von 0.001 ist durch ausprobieren entstan- erzeugen einen gewohnten UITapGesture- den. Bild 5 zeigt, wie der Würfel an der Tisch- Recognizer und fügen ihn mit addGesture- platte nun verdeckt wird. Recognizer() zu arView hinzu:
Physik let tapRecognizer = Aus Performance-Gründen ist die Physik-Si- UITapGestureRecognizer(target: self, mulation für Entities standardmäßig erst ein- action: #selector(handleTap(_:))) mal ausgeschaltet, was in der Nomenklatur self.arView.addGestureRecognizer von RealityKit heißt, dass die Physik-Kom- (tapRecognizer) ponente (PhysicsBodyComponent) nicht konfiguriert ist. Sie kann aber unkompliziert Als target: übergeben wir dabei self und als erzeugt und dann hinzugefügt werden: action: den Selektor der handleTap(_:)-Me- thode, die wir im Folgenden so definieren: boxEntity.physicsBody = PhysicsBodyComponent(massProperties: @objc func handleTap(_ sender: .init(mass: 1.0), mode: .dynamic) UIGestureRecognizer) { let pointInView = sender.location Hierfür erzeugen wir eine Instanz von Phy- (in: self.arView) sicsBodyComponent, wobei wir die Masse if let tappedEntity = und den Simulations-Modus für das Objekt self.arView.entity(at: pointInView) { festlegen. Die Masse wird in Form eines Phy- if let tappedModelEntity = sicsMassProperties-Typs angegeben, den Der Würfel wird an der Tischplat- tappedEntity as? ModelEntity { wir hier inline mit einer Masse von einem Ki- te nun verdeckt (Bild 5) tappedModelEntity. logramm erzeugen. Für den Modus stehen applyLinearImpulse([0, 2, 0], drei Varianten zur Auswahl, die vom Phy- relativeTo: tappedModelEntity) } sicsBodyMode-Enum definiert werden: } .static: Der Körper bewegt sich nicht, nimmt aber an der Si- } mulation teil .kinematic: Der Körper wird vom Nutzer bewegt Als erstes rechnen wir hier mit location(in:) die Position des .dynamic: Der Körper wird von der Physik-Simulation be- Taps auf den Bildschirm in die entsprechende 2D-Koordina- wegt te von arView um. Dann fragen wir mit der entity(at:)-Metho- de von ARView ab, welche Entity sich an diesem Punkt am .dynamic steht dabei für das typische Verhalten von physika- vordersten befindet, und stellen dann sicher, dass es sich um lisch korrekt bewegten Objekten, welches wir hier auch ver- ein ModelEntity-Objekt handelt. wenden. Nun fügen wir diesem Objekt einen linearen Impuls hinzu, Damit die Physik-Simulation funktioniert, muss für die be- indem wir applyLinearImpulse(_:relativeTo:) aufrufen. Der teiligten Elemente noch die Kollisionserkennung eingeschal- erste Parameter gibt dabei die Richtung des Impulses als Vek- tet werden. Das wird mit einem Aufruf der generateCollision tor an, der zweite Parameter (relativeTo:) legt den Ursprung Shapes(recursive:)-Methode erreicht: des Impulses fest. In diesem Fall geht er vom angetippten Ob- jekt aus, welches daher nach oben schießt und dann natür- boxEntity.generateCollisionShapes(recursive: true) lich auch wieder herunterfällt.
Der Parameter recursive: gibt dabei an, ob auch alle Kinder Audio der Entity die Kollisionserkennung einschalten sollen. Übli- Da geräuschlos herumspringende Objekte keinen Spaß ma- cherweise ist das das gewünschte verfahren, es kann aber chen, bringt RealityKit außerdem noch Audio-Unterstützung vorkommen, dass man nicht alle Kinder miteinbeziehen mit. Und hierbei wird der Ton nicht einfach nur abgespielt, möchte. sondern mittels Head Related Transfer Functions (HRTF) Führt man die Anwendung nun aus, dann verhält sich bo- auch korrekt im Raum positioniert. xEntity physikalisch korrekt, und das auch "AR-Enabled", er Hierfür muss zuerst einmal ein Sound aus den Ressourcen interagiert also auch mit seinem Anker, der horizontalen Flä- geladen werden: che korrekt. let pingSound = try! AudioFileResource.load Gesten (named: "ping") Doch der Spaß ist schnell vorbei, wenn der Würfel dann ein- mal auf der Fläche zum Liegen gekommen ist. Und hier kom- Unterstützt werden dafür lediglich AIFF-Dateien, die aller- men Gesten ins Spiel, mit einer solchen kann nämlich neues dings mit jedem Sound-Editor erzeugt werden können.
74 11/2019 www.webundmobile.de iOS MOBILE DEVELOPMENT
Nun sucht man sich das Entity der Szene aus, von dem der Sound kommen soll, und ruft auf diesem playAudio() auf: tappedModelEntity.playAudio(pingSound)
Fügt man die zwei Zeilen zur handleTap(_:)- Methode hinzu, dann springt das Objekt nicht nur hoch, sondern macht auch noch ein Ge- räusch dabei.
Animation Animationen gibt es in RealityKit in zwei Va- rianten: Einfachen Transformationen und Skeletal Animation. Änderungen der Transformationsmatrix ei- ner Entity ermöglichen Positionsänderung und Skalierung mit nur wenigen Zeilen Code. Für eine Skalierung nimmt man beispielswei- Die Anker-Auswahl des Reality Composers (Bild 6) se die existierende Tranformationsmatrix und verändert ausgehend von den vorhandenen Werten die Skalierung durch Multiplikation: lettsystems, wie sie 3D-Editoren definiert werden können. Entsprechende Animationen können mit zum Beispiel einer var newTransform = tappedEntity.transform Figur in USDZ-Dateien gespeichert und zur Laufzeit ganz newTransform.scale.x *= 1.25 einfach mit playAnimation(named:) abgespielt werden: newTransform.scale.y *= 1.25 newTransform.scale.z *= 1.25 robot.playAnimation(named: "dance")
Anschließend verwendet man dann die move()-Methode von Ähnlich einfach ist es die mit ARKit 3 neu gekommenen Be- Entity um die Änderung durchzuführen: wegungsdaten einer Person (Motion Capturing) live auf eine passende Figur zu übertragen. Hierfür wird zuerst ein Body- tappedEntity.move(to: newTransform, relativeTo: Anchor erzeugt und zur Szene hinzugefügt: tappedEntity, duration: 1.0, timingFunction: .easeInOut) let bodyAnchor = AnchorEntity(.body) Der Übergang wird dabei sauber mit den angegebenen Wer- arView.scene.addAnchor(bodyAnchor) ten animiert. Hier also mit einer Dauer von einer Sekunde (duration:) und der Timing-Funktion (timingFunction:) . Anschließend lädt man mit der loadBodyTracked(named:)- easeInOut, die wir schon von UIKit/Core Animation kennen. Methode der Klasse BodyTrackedEntity das Modell und fügt Skeletal Animations beschreiben die Animation eines Ske- es mit der addChild()-Methode zum bodyAnchor hinzu:
let robot = try! BodyTrackedEntity. loadBodyTracked(named: "robot") bodyAnchor.addChild(robot)
Nachdem eine Person erkannt worden ist, wird nun das Mo- dell angezeigt und live mit den Bewegungen der Person syn- chronisiert.
Reality Composer Ergänzend zu RealityKit gibt es dieses Jahr ebenfalls neu den Reality Composer. Er ist für Mac und iOS (iPad & iPhone) ver- fügbar. Auf dem Mac wird er mit Xcode 11 ausgeliefert und ist im Xcode-Menü unter Open Developer Tool zu finden. Un- ter iOS steht er regulär im App Store zur Verfügung. Reality Composer erlaubt es unkompliziert AR-Szenen gra- fisch zu entwerfen. Dabei bietet er Szenen für die bekannten Bibliothek: Die eingebaute Objektbibliothek (Bild 7) Anker-Typen horizontale Fläche, vertikale Fläche, Bild, ▶
www.webundmobile.de 11/2019 75 MOBILE DEVELOPMENT iOS
Gesicht und (3D-)Objekt an (Bild 6). Eine einge- baute Objektbibliothek liefert genug Futter für erste Experimente (Bild 7), ergänzend lassen sich aber auch USDZ-Dateien einbinden. Die Szene bearbeitet man nun in einem Editor, in dem die Objekte frei und in drei Dimensionen platziert, verschoben, skaliert und gedreht werden kön- nen. Ein Eigenschaften-Editor, der ein wenig an den Storyboard-Editor erinnert, erlaubt es weite- re Details von Objekten einzustellen (Bild 8).
Szenen-Editor auf dem iPad Ein besonderes Schmankerl ist der AR-Modus des Szenen-Editors auf dem iPad. Er erlaubt es, die Szene Live und in Echtzeit in einer AR-Ansicht zu sehen und zu bearbeiten (Bild 9). Ein AR- WYSIWYG-Editor, gewissermaßen. Arbeitet man bevorzugt auf dem Mac, dann gibt es von dort aus jederzeit die Möglichkeit das Der Szenen-Editor des Reality Composers (Bild 8) Projekt auf ein iOS-Gerät zu schieben, dort zu tes- ten, und dann zur Bearbeitung auf dem Mac zu- rückzukehren. Zum Bearbeiten des Projekts springt man dann wieder in Neben der Szene lässt sich in einem gesonderten Editor au- den Reality Composer. Beim Import fügt Xcode allerdings ßerdem noch Verhalten programmieren (Bild 10). Hierbei wird nicht nur die Datei zum Projekt hinzu, sondern erzeugt auch jeweils ein Auslöser mit einer Aktion kombiniert. Als Aktio- gleich die passende Schnittstelle, so dass die Szene mit nur nen stehen tippen, Szenenstart, Entfernung zur Kamera und einer Zeile Code geladen werden kann: Kollidieren zur Auswahl. Die Liste der Aktionen ist lang und geht vom Verschieben, let myScene = try! SomeStuff.loadSzene() Drehen und Rotieren von Objekten, über das Anzeigen oder Ausblenden, Ton abspielen und der Musikwiedergabe, über Da die zurückgelieferte Szene selbst gleich den Anker der das Abspielen von Animationen aus USDZ-Dateien, bis hin Szene darstellt, kann sie ohne weitere Konfiguration mit ad- zum Wechsel zu einer neuen Szene. dAnchor() zur Szene von ARView hinzugefügt werden:
Xcode arView.scene.addAnchor(myScene) Um die Projekte des Reality Composers (.rcproject) in Xcode zu verwenden, zieht man sie einfach per Drag & Drop in ein Der erzeugte Szenen-Typ enthält außerdem Properties, mit Projekt. Es wird dann zu diesem hinzugefügt und auch eine denen direkt auf die einzelnen Objekte zugegriffen werden Vorschau angezeigt (Bild 11). kann. Über das burger-Property erhält man so Zugriff auf den
Der Szenen-Editor im AR-Modus auf dem iPad (Bild 9) Der Verhaltens-Editor im Einsatz (Bild 10)
76 11/2019 www.webundmobile.de iOS MOBILE DEVELOPMENT
Das Reality Composer- Projekt in Xcode (Bild 11)
Burger der Szene. Dieser ist vom Typ Entity und kann zu ei- nehmen (Bild 12). Dann erhält man eine AR-Ansicht und kann nem existierenden Anker hinzugefügt werden: nach einer weiteren Bestätigung loslegen wie üblich, wobei allerdings ein Video und die Sensorinformationen des Geräts planeAnchor.addChild(burger) aufgezeichnet werden. Drücken Sie den Stop-Button um die Sitzung zu beenden. Im folgenden Dialog kann die Aufnah- Im Build-Prozess von Xcode wird nun das Reality Composer- me dann gleich via AirDrop an den Mac übertragen werden. Projekt in das neue Reality File Format (.reality) überführt, Das übertragene Video im MOV-Format enthält dabei nicht welches in den Ressourcen der Anwendung landet und von nur das Video, sondern als eingebettete Metadaten auch die den Geräten zur Laufzeit effizient geladen werden kann. Sensordaten des Geräts. Die Datei reicht aus, um die Szene Zum Abschluss noch ein praktisches Goodie für Entwick- für ARKit vollständig nachzustellen. Und das kann mit Xcode ler, das Reality Composer noch mitbringt. Und zwar kann die- 11 auch gemacht werden. Im Schema Editor des Projekts fin- ser AR-Sitzungen aufzeichnen. Öffnen Sie das …-Menü und det sich im Options-Tab jetzt der Eintrag ARKit. Setzen Sie gehen Sie dort auf Entwickler und dann auf AR-Sitzung auf- dort das Häkchen an Replay data und wählen Sie das Video aus (Bild 13). Startet man die App, dann wird bei Start der AR- Session statt den Live-Daten das Video mit seinen Sensorin- formationen eingespielt. Auf diese Weise erhält man eine re- Links zum Thema produzierbare Situation, die man am Rechner unkompliziert Demo zum Artikel immer wieder testen kann. Leider funktioniert das derzeit https://github.com/dklein42/webAndMobile-demos/ nur mit echten Geräten. Die Simulatoren sind also weiterhin tree/master/RealityKit außen vor.
Introducing ARKit 3, WWDC 2019, Session 604 Fazit https://developer.apple.com/videos/play/wwdc2019/604/ RealityKit und Reality Composer sind vielversprechende Building AR Experiences with Reality Composer, neue Tools, mit denen die Entwicklung von AR-Apps so ein- WWDC 2019, Session 609 fach wie möglich gemacht wird. Bei der Menge an Arbeit, die https://developer.apple.com/videos/play/wwdc2019/609/ Apple in das Thema steckt, drängt sich der Verdacht auf, dass ARKit-Seite auf Apple Developer wir uns auf etwas größeres zubewegen. ◾ https://developer.apple.com/arkit/
Reality Composer auf Apple Developer Daniel Klein https://developer.apple.com/augmented-reality/ ist iOS-Entwickler, Autor und Dozent für die Ent- reality-composer/ wicklung mobiler Anwendungen. Augmented Reality mit ARKit 3: Dritte Runde, [email protected] web & mobile DEVELOPER 10/2019 https://www.webundmobile.de/mobile/apple/ dritte-runde-1751716.html
www.webundmobile.de 11/2019 77