3D-Modellierung/Beispiele/AR mit Markern

Aus Wikiversity
AR.js-Beispiel mit Kanji-Marker und einem Wassermolekül als 3D-Objekt
Kanji Marker[1] for AR.js - places the 3D model on the marker in camera image.

AR.js[Bearbeiten]

Mit AR.js können Sie ein 3D-Modell in das Kamerabild Ihres Smartphones einfügen. AR.js basiert auf den Grundlagen von ARToolkit[2]. Das 3D-Modell wird durch Erkennung eines Markers im Kamerabild platziert. Durch Drehen und Bewegen des Markers im Kamerabild wird das 3D-Modell im Kamerabild gedreht und bewegt. AR.js ist auch in der Lage, Augmented Reality in Abhängigkeit von Geokoordinaten (Längengrad, Breitengrad) im Kamerabild zu lokalisieren, um z.B. im Forum Romanum die geometrischen Formen und das Aussehen der Tempels in das Kamerabild einzufügen. So können sich Lernende ggf. besser vorstellen, wie die Gebäude in Abhängigkeit von den sichtbaren Ruinen früher einmal ausgesehen haben.

Lernaufgabe[Bearbeiten]

AR.js mit dem Smartphone oder Laptop erkunden[Bearbeiten]

AR.js kann mit einem Laptop oder Smartphone, das über eine Kamera oder Webcam verfügt, erkundet werden.

  • Man braucht einen Marker wie den Hiro- oder Kanji-Marker, um ihn vor die Kamera zu halten,
  • Sie starten eine Webseite, die die AR.js-Bibliothek einbettet, um bestimmte 3D-Inhaltselemente in der Kamera auf dem Marker anzuzeigen,
  • Sie bewegen das 3D-Objekt im Kamerabild des Laptops, indem Sie den Marker vor der Webcam bewegen und drehen.

Marker-Ausdruck für Hiro und Kanji[Bearbeiten]

Beispiel Hiro-Marker[Bearbeiten]

Beispiel Kanji-Marker[Bearbeiten]

Eigene Marker erstellen[Bearbeiten]

Anwendungen von AR.js zur interaktiven Molekülvisualisierung in der Chemitrie[Bearbeiten]

Animiertes Beispiel[Bearbeiten]

3D-Modell mit AR.js auf Hiro-Marker angezeigt - Mobilgerät scannt Wikiversity-Seite auf Laptop-Bildschirm - Android: Browser Firefox

Probieren Sie es selbst aus:

  • Scannen Sie den QR-Code mit Ihrem datenschutzfreundlichen QR-Code-Scanner (z.B. QR-Scanner mit w:F-Droid installieren) oder 3D_model_with_AR.js_displayed_on_marker.png
  • Rufen Sie einfach den folgenden Link mit dem Firefox-Browser auf Ihrem mobilen Gerät auf:
https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html
  • Drucke den Hiro-Marker aus und lege den Marker vor deinen Tisch oder
  • zeige diese Seite auf deinem Tablet an und lege das Tablet vor dich hin.
https://en.wikiversity.org/wiki/3D_Modelling#AR.js

Platzieren Sie den Hiro-Marker im Kamerabild Ihres mobilen Geräts (Smartphone).

Augemented Reality für Firefox und Mobile Endgeräte Hiro-Marker für Augemented Reality 3D-Objekte

Weitere Informationen finden Sie unter:

Quellennachweis[Bearbeiten]

  1. Kanji Marker provided by ARToolkit on Github (accessed 2017/12/12) - https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf
  2. Abawi, D. F., Bienwald, J., & Dorner, R. (2004, November). Accuracy in optical tracking with fiducial markers: an accuracy function for ARToolKit. In Proceedings of the 3rd IEEE/ACM International Symposium on Mixed and Augmented Reality (pp. 260-261). IEEE Computer Society.
  3. Feulner, T., Kaiser, M., & Stolz, R. (2019). AR-Entwicklungsumgebung-Toolvergleich und Umsetzung einer Applikation. Hochschule für Angewandte Wissenschaften Landshut.
  4. Jerome Etienne (2018) AR.js-Demo with Animation on Hiro-Marker URL: https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html (accessed 2018/07/12)
  5. Luciano Abriata (2018) Javascript in Science URL: http://lucianoabriata.altervista.org/jsinscience/ (accessed 2018/07/12)
  6. Online-Marker-Creator für AR.js (2017) von Alexandra Etienne - URL: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html (Stand 2020/07/14)
  7. Towards Commodity, Web-Based Augmented Reality Applications for Research and Education in Chemistry and Structural Biology Luciano A. Abriata (Eingereicht am 21. Juni 2018 (v1), zuletzt überarbeitet am 24. Juli 2018 (diese Version, v4)) - https://arxiv.org/abs/1806.08332