Augmented Reality für alle: einfach, Open Source & webbasiert

Veröffentlicht am 21.3.2019

Ich beschäftige mich schon seit einiger Zeit mit den Möglichkeiten von Augmented Reality im Bildungsbereich. Neu entdeckt habe ich mit AR.JS nun eine ausgezeichnete Möglichkeit, um eigene AR-Inhalte zum Lehren und Lernen zu gestalten. Folgendes gefällt mir daran besonders gut:

  1. Die Software ist Open Source und kann gebührenfrei benutzt werden.
  2. Benötigt wird lediglich ein Browser. Es muss keine zusätzliche App installiert werden.
  3. Die Software ist vielfältig nutzbar und befindet sich in aktiver Weiterentwicklung.
  4. Eine eigene Gestaltung von AR-Inhalten ist einfach und niedrigschwellig möglich. In nicht mal 10 Minuten ist der erste Inhalt erstellt!

Klingt interessant? Dann solltest Du weiterlesen!

Was ist AR.JS?

AR im Bildungskontext kann unter anderem folgendermaßen aussehen:

All das lässt sich mit AR.JS einfach realisieren. Das letzte Beispiel, d.h. einen QR-Code mit Marker zum Scannen woraufhin ein Gif erscheint, findest Du hier (Entweder Du scannst direkt mit einem mobilen Gerät vom Bildschirm - oder Du druckst Dir zunächst das pdf samt Anleitung aus und scannst den doppelten QR Code von dort. Erster Schritt ist, den Link des QR-Codes zu öffnen. Der zweite Schritt ist, die Kamera im Browser freizugeben und erneut zu scannen. Dann erscheint der AR-Inhalt.)

Bitte beachten: Bei iOS funktioniert AR.JS laut Beschreibung erst ab Version 11 richtig. Da ich Android nutze, kann ich das selbst nicht testen.

Zwischenfazit: AR-Codes = QR Code + Augmented Reality = Augmented Reality für zeitgemäße Bildung

Als Zwischenfazit können wir somit festhalten: Mit AR.JS lassen sich AR-Codes gestalten. Sie bringen QR-Codes und Augmented Reality zusammen - und sorgen damit für eine wunderbar einfache Weise, um AR in der Bildung zum Einsatz zu bringen.

Auch Schülerinnen und Schüler können eigene AR-Inhalte ohne die Notwendigkeit zusätzlicher Apps erstellen. Wenn man nichts dauerhaft speichern will, ist nicht einmal eine Registrierung nötig. Auf diese Weise wird Technik als gestaltbar erlebt.

Wie erstelle und veröffentliche ich eigene AR-Inhalte?

Um die eigene Erstellung von Augmented Reality mit AR.JS möglichst einfach zu machen, habe ich ein ganz simples Beispiel (roter Würfel) erstellt. Du kannst es Dir hier ansehen. Lass uns nun Schritt für Schritt lernen, wie dieses Beispiel entsteht:

Das Beispiel basiert auf einer HTML-Datei. Du findest diese auf Glitch.

  1. Als erstes klickst Du auf ‘Remix this’und öffnest dann die index.html Datei. (Du musst dazu nicht angemeldet sein. Das ist nur nötig, wenn Du den Inhalt dauerhaft speichern willst. Ohne Anmeldung bleibt er für eine Woche online. Eine Anmeldung bei Glitch ist kostenfrei.)
  2. Keine Sorge: Man muss nicht programmieren können, um sich mithilfe dieser index.html Datei einen eigenen AR-Inhalt zu erstellen. Versuche z.B. durch ausprobieren, statt einer roten Box, einen grünen Ring erscheinen zu lassen. Ändere den Inhalt so, wie Du ihn haben willst.
  3. Um Dir das Beispiel anzusehen und zu schauen, ob es funktioniert, öffnest Du die URL, die sich mit dem Button ‘Show’ öffnet in einem mobilen Gerät. Besonders einfach kannst Du es Dir machen, wenn Du diesen Link auf der AR-Marker Seite eingibst und auf diese Weise direkt Deinen AR-Code (mit Link und Marker) generierst.

Fertig :-)

Wenn Du noch mehr mit Farben und Formen selber gestalten willst, dann kann dieses Tool sehr hilfreich sein. Du wählst hier die Elemente aus und legst ihre Eigenschaften fest, die erscheinen sollen. Anschließend kannst Du über den Button ‘Save AR’ ein fertiges HTML-Dokument hinunterladen und z.B. bei Glitch wieder hochladen (oder das obige Beispiel damit ersetzen). Wenn Dir Fehlermeldungen angezeigt werden, dann liegt das meist daran, dass die einfachen Anführungszeichen ‘ in normale Anführungszeichen “ umgeändert werden müssen. Die nächsten Schritte (auf Show klicken, URL kopieren, daraus einen AR-Marker gestalten) sind dann wie oben. Genutzt werden standardmäßig Hiro oder Kanji-Marker, die auf der Website verlinkt sind. Wenn Du lieber den AR-Marker aus dem obigen eispiel verwenden willst, musst Du das im Code anpassen.

Und wie erstelle ich coolere AR-Inhalte?

Die Inhaltserstellung bei AR.JS basiert auf A-Frame. Das Schöne an dieser Software ist, dass sich damit auch komplexe Modelle einbinden lassen. Diese musst Du nicht selbst erstellen, sondern kannst sie z.B. im Internet recherchieren und dann einbetten. Das funktioniert z.B. mit GLTF Dateien. Noch einfacher wird es, wenn Du Gifs (z.B. bei Giphy nach 3D suchen) einbettest. Und auch Text ist möglich. Alle diese Varianten findest Du gesammelt auf Glitch. Suche Dir auch, was Du remixen möchtest. In diesem kurzen Screencast-Tutorial zeige ich Dir das Vorgehen nochmals Schritt für Schritt:

Kann ich auch einen eigenen Marker erstellen?

Ja, das geht. Ich habe versucht, mit dem AR-Zeichen einen möglichst vielseitig nutzbaren Marker zu gestalten. Eigene Marker können aber jederzeit erstellt und dann genutzt werden. Dabei hilft diese Website. Wichtig dabei ist:

Perspektive: ein H5P-Inhaltstyp für AR

Bereits bei den #OERcamp18 hatte ich Sessions angeboten, um gemeinsam über die Möglichkeiten eines AR-Inhaltstyp für H5P zu diskutieren. Das Fazit war dort im Wesentlichen: total gute Idee, aber kaum umsetzbar. Denn dazu bräuchte es ja nicht nur einen Inhaltstyp, sondern zusätzlich noch eine H5P-App zum Scannen … Mit AR.JS könnte die Entwicklung nun einfacher werden. Denn man benötigt - so wie bei den anderen H5P-Inhalten auch - lediglich eine Datei. Darin wäre dann sowohl der Marker, als auch der gewünschte Inhalt definiert. Bis genug Geld und Expertise für die Entwicklung eines solchen Inhaltstyps zusammen gekommen ist, musst Du mit der Erstellung von webbasierten AR-Inhalten aber nicht warten. Ich wünsche viel Spaß beim Remix und Ausprobieren mit der obigen Anleitung!

Das Wichtigste zum Schluss!

AR.JS wird maßgeblich entwickelt von Jerome Etienne. Danke! Du kannst Dir die vollständige Software in seinem Github Account ansehen und ihm hier auf Twitter folgen.

teilen twittern