Augmented Reality mit A-Frame und AR.JS
Der Aufbau von A-Frame
Beschäftigen wir uns nun mit dem Aufbau von A-Frame.
Wie bereits erwähnt, ist A-Frame ein sogenanntes Framework, zur Programmierung von 3D-Objekten und für virtuelle Realität, die in Webbrowsern wie Firefox, Chrome oder Safarie aufgerufen werden können.
A-Frame baut auf HTML auf und bedient sich weiterer Technologien wie Three.JS., einer JavaScript Bibliothek. Bei A-Frame kommt also die Programmiersprache JavaScript zum Einsatz. Dort befinden sich Code-Elemente, die für den Bau von virtuellen Umgebungen im Browser verwendet werden können.
Wir gehen hier nicht weiter auf die komplexen technischen Details ein und konzentrieren uns auf einen kleinen Ausschnitt der Technologien, die für unseren Zweck wichtig sind.
Wir merken uns:
1. A-Frame baut auf HTML auf
2. A-Frame verwendet Code von THREE.JS. Die Skriptsprache im Hintergrund ist JavaScript.
Beispiel
Hier ein einfaches Beispiel mit vier einfachen Objekten (türkise Box, gelber Zylinder, rote Kugel, grüne Fläche) auf der Code-Plattform Glitch:
https://glitch.com/~aframe
Häufig benötigt die Seite 10-30 Sekunden, um zu laden. Falls Sie Probleme mit dem Öffnen haben, laden Sie die Seite erneut. Wir empfehlen den Mozilla Firefox Browser, da sich die Seite nicht mit allen Browsern öffnen lässt.
Den Aufbau von A-Frame können wir an diesem einfachen Code-Beispiel verdeutlichen:
<html><head><script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script></head><body><a-scene><a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box></a-scene></body></html>
A-Frame und HTML
Da A-Frame auf HTML aufbaut, verwendet es auch die gleiche formale Sprache, also die gleiche Syntax.
Dazu müssen wir uns kurz klar machen, wie HTML funktioniert.
Tags
Der Text erhält durch die Auszeichnungen (englisch markup) von Textteilen eine Struktur, die von dem Browser gelesen und interpretiert werden kann.
Soetwas nennt man Tag (engl. ausgesprochen: [tæg]).
In unserem Beispiel z.B. <html>.
Es gibt immer ein Start-Tag, das mit einem < Zeichen beginnt und einem spezifischen Wort, das in HTML oder A-Frame hinterlegt ist. In unserem Beispiel also <html> oder <a-box>.
Wenn man sich das Beispiel genauer ansieht, stellt man fest, dass zu jedem Tag ein zweiter Tag gehört. Dieser sieht identisch aus, nur dass er mit einem </ beginnt.
Tags treten also immer in Paaren auf.
Einem Start-Tag wie <html>.
Und einem End-Tag wie </html>.
Alles, was man zwischen diese Tags schreibt, wie bei <html> im Code, ist diesem Tag untergeordnet. Das werden wir später noch vertiefen.
- In A-Frame gibt es wie bei HTML Tags
- Ein Tag tritt immer in Paaren auf
- ein Starttag steht in < >; ein End-Tag in </ >
A-Frame-Skript und THREE.JS
Wir haben jetzt gesehen, wie A-Frame mit HTML zusammenhängt. Aber was ist mit THREE.JS, das ja ebenfalls zum Einsatz kommt?
Damit wir den vorgestellten Code auch wirklich in A-Frame anschauen können, wird dadurch ermöglicht, dass wir auf einen fertigen Code zugreifen, der auf der Homepage von A-Frame zur Verfügung gestellt wird.
Das passiert durch den zentralen Verweis ganz oben im Code innerhalb der Tags <head>.
Durch diese Zeile binden wir das A-Frame-Skript und die vielen weiteren Codezeilen, die dort hinterlegt sind, in unseren eigenen Code ein: <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
Diese Zeile ist die wichtigste in unserem ganzen Code.
Ohne die Einbindung von A-Frame mit diesem <script> Tag, bleibt der Code für den Browser nicht lesbar.
Und genau hier kommt wird THREE.JS verwendet. Das passiert aber meist im Hintergrund und ist für uns nicht unbedingt direkt sichtbar.
Wir merken uns:
A-Frame muss mit einem Skript eingebunden werden (<script></script>). Dieses Skript geift auf den Code zu, der auf der Seite von A-Frame hinterlegt ist.
Die Einbindung des Skriptes bedeutet auch, dass unsere Seite nur mit bestehender Internetverbindung funktioniert, da das Skript ja von der A-Frame Seite eingebunden werden muss!
Das ist in der Regel kein Problem, immerhin sollen die Nutzer*innen die Seite ja im Internet aufrufen. Man sollte es aber im Hinterkopf behalten, v.a. bei AR-Anwendungen, die mit dem Smartphone aufgerufen werden sollen.
A-Frame wird bestätig weiterentwickelt, wodurch meist neue Funktionen hinzu kommen. Gleichzeitig ändern sich aber auch unterschiedliche Details. Befehle werden anders geschrieben, komplett ersetzt oder sogar ohne Ersatz gestrichen.
Gerade wenn man online nach Lösungen und Beispielen sucht, ist es sehr wichtig darauf zu achten, welche Versionen von A-Frame verwendet wurden.
Man kann dies dem Skript-Verweis entnehmen:<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
Der Teil “releases/1.1.0” zeigt an, dass hier die A-Frame Version 1.1.0 genutzt wird.
Die älteren Versionen stehen auch immer noch zur Verfügung und können verwendet werden. Wie gesagt, sind aber nicht alle Funktionen in A-Frame in allen Versionen nutzbar.
Eine Übersicht über die Versionen und deren Dokumentation findet man auf der Homepage von A-Frame.
Dort findet sich in der linken Menüleiste ein Dropdown für die einzelnen Versionen.
Eigenschaften
Ihnen wird im Code-Beispiel aufgefallen sein, dass bei manchen Tags im Code nicht einfach nur das spezifische Wort steht, sondern innerhalb der < > Klammer noch weitere Angaben kommen.
Hier werden die Eigenschaften des Elements näher definiert.
In unserem Beispiel also:
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
Hier sehen wir, dass für das Element <a-box> bestimmte Eigenschaften wie die Position (position) im Raum, die Rotation (rotation) und auch die Farbe (color) festgelegt werden.
Dies funktioniert bei A-Frame so wie bei HTML.
Mit den Eigenschaften werden wir uns noch intensiver beschäftigen.
Bei A-Frame heißen Elemente wie <a-box> Entities.
Die Eigenschaften dieser Entities werden Components genannt.
Weitere Informationen zu Entities und Components finden Sie in diesem Kurs-Abschnitt und auf der A-Frame-Seite:
https://aframe.io/docs/1.1.0/core/entity.html#sidebar