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:
- Die Software ist Open Source und kann gebührenfrei benutzt werden.
- Benötigt wird lediglich ein Browser. Es muss keine zusätzliche App installiert werden.
- Die Software ist vielfältig nutzbar und befindet sich in aktiver Weiterentwicklung.
- 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:
- Auf einem Arbeitsblatt werden Farben oder Formen oder chemische Moleküle oder Vokabeln oder … erklärt. Für die Schülerinnen und Schüler gibt es zum Scannen mit dem Smartphone jeweils ein Beispiel dazu, das direkt als AR-Inhalt dargestellt wird.
- An einer Wandzeitung im Klassenzimmer befinden sich QR-Codes mit integriertem Marker. Wer mag, kann den QR-Code scannen und gleich darauf den Marker. Daraufhin wird die Wandzeitung lebendig, d.h. es tauchen weitere Inhalte als AR direkt darauf auf. Schülerinnen und Schüler haben die Marker und die Inhalte selbst erstellt.
- Unter einer Klassenarbeit finden Schülerinnen und Schüler einen QR-Code mit integriertem Marker. Wenn sie ihn scannen, erscheint eine animierte Rückmeldung, z.B. als Gif.
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.
- Anders als bei einem QR Code wird nicht nur zu einer Website geleitet bzw. lediglich ein einfacher Text angezeigt, sondern es wird ein AR-Inhalt direkt auf dem gescannten Objekt gezeigt.
- Anders als bei klassischen AR-Anwendungen braucht es keine Installation einer App und Festlegung von Berechtigungen. Alles kann direkt mit dem Browser aufgerufen werden.
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.
- 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.)
- 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.
- 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:
- Die Hintergrundfarbe des Bildes, das hochgeladen wird, muss #f0f0f0 sein.
- Es sollte ein möglichst einfach erkennbares Bild/ Text sein.
- Der heruntergeladene Marker (eine .patt Datei) muss irgendwo online hochgeladen werden (z.B. bei Github). Die URL wird dann in den Code eingefügt.
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.
Beitrag merken & teilen
Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.
