Augmented Reality mit A-Frame und AR.JS
Der Aufbau von AR.JS
Beschäftigen wir uns nun damit, wie AR.JS aufgebaut ist.
Wie bereits gesagt, nutzen wir AR.JS in Verbindung mit A-Frame. Der Aufbau ist also sehr ähnlich und muss nur leicht angepasst werden.
Schauen wir uns den Code unseres Beispiels an.
<html> <head> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> </head> <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-box position="0 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box> </a-marker><a-entity camera></a-entity> </a-scene> </body></html>
Skript AR.JS
Zunächst müssen wir neben dem Skript zu A-Frame noch ein weiteres Skript einbetten, nämlich das für AR.JS.
Also ergänzen wir: <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
Embed a-Scene
Der Tag <a-Scene> definiert den Bereich, der dargestellt wird.
Hier müssen wir ergänzen, dass nun AR.JS zum Einsatz kommt: <a-scene embedded arjs>
Marker
Als nächstes muss ein Marker eingebunden werden. Diesen Marker verwendet das Skript, um an die Stelle des Markers Objekte anzudocken.
Einige Marker wie der Hiro-Maker sind bereits in AR.JS implementiert. Dieser kann daher mit preset namentlich aufgerufen werden.<a-marker preset="hiro"></a-marker>
Alles was in dem Marker-Tag steht, wird auch an diesem Marker angezeigt.
Sie können auch eigene Marker entwickeln. Dazu finden Sie hier weitere Informationen:
https://ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
Sie können auch mehrere Marker für die gleiche Anwendung verwenden. Definieren Sie dafür unterschiedliche Marker und binden Sie jeweils Ihre Inhalte in die a-maker-Tags ein.
Ein Beispiel: <a-marker preset="hiro"> <a-box position="0 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box> </a-marker><a-marker preset="kanji"> <a-box position="0 0.5 0" rotation="0 -45 0" color="#0000ff"></a-box> </a-marker>
Weitere Informationen zum Thema Marker finden Sie hier:
https://ar-js-org.github.io/AR.js-Docs/marker-based/
Kamera
Zuletzt müssen wir noch die Kamera definieren, damit die Perspektive zum Marker übereinstimmt.
Hierfür definieren wir ein Entity und ergänzen Camera als Component.<a-entity camera></a-entity>
Der Kern des Skriptes bleibt wie bei A-Frame der Bereich in a-scene, hier genauer: das was zwischen den Marker-Tags steht.
Ihre Inhalte fügen Sie dort ein.
Fazit
AR.JS baut auf der Struktur von A-Frame auf und ergänzt diese. Wichtig ist dabei die Einbindung des zusätzlichen Skriptes und des Markers.
Der Marker ermöglicht eine recht stabile Verortung des Objektes im Raum. Allerdings ist er auch fehleranfällig, wenn die Camera den Marker nicht gut erkennen kann. Auch schränkt die Bindung an einen Marker die Anwendungsszenarien stark ein.
Man muss also experimentieren, für welche Szenarien sich AR.JS eignet.