3D-Modellierung/Beispiele/AR mit Markern

AR.js

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

(Testen von 3D-Modellen im Browser) In dieser ersten Aufgabe testen Sie ein animiertes 3D-Modell im Kamerabild Ihres Smartphones oder Laptops mit AR.js von Jerome Etienne (siehe AR-Toolvergleich^[3]),
- (Seite mit Markern) Drucken Sie dazu eine Seite mit Markern aus und zerschneiden Sie die Marker so, dass noch einen weißen Rand haben, um den Marker zu halten zu können ohne den Marker selbst zu verdecken.
- (Webseite mit 3D-Modell im Browser) Stellen Sie die folgenden Demo-AR-js-Seite von Jerome Etienne (2018)^[4] in Ihrem Browser dar (z.B. Firefox)
  - Animation auf Hiro-Marker
  - Wassermolekül auf einem Hiro-Marker
  - Visualisierungen in der Biologie und Chemie mit AR.js von Luciano Abriata (2018)^[5]
(Geometrie und AR) Erkläre den geometrischen Hintergrund, wie eine Bewegung der Marker das 3D-Modell im Kamerabild verschieben könnte.
(AR-Modelle erzeugen) Eigene 3D-Modelle erzuegen mit JSON3D4Aframe und erkunden Sie Javascript-Tools für die webbasierte AR wie z.B. den Aframe Inspector für die Modifikation und Anpassung von 3D-Modellen.

AR.js mit dem Smartphone oder Laptop erkunden

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

Marker-PDF-Datei als Ausdruck für Kanji- und Hiro-Marker

Beispiel Hiro-Marker

Wassermolekül mit AR.js und Hiro-Marker. Hiro Marker im Kamerabild platzieren.

Beispiel Kanji-Marker

Wassermolekül mit AR.js und Kanji-Marker. Platzieren Sie Kanji-Marker im Kamerabild.

Eigene Marker erstellen

Online-Creator für eigene AR.js-Marker^[6] - siehe auch Tutorial von Alexandra Etienne 2017.

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

Website mit chemischen AR.js-Beispielen von Luciano Abriata (2018) - Verwendung von Hiro-Marker und/oder Kanji-Marker in Webcam
ArXiv: Explanatory Preprint - Towards Commodity, Web-Based Augmented Reality Applications for Research and Education in Chemistry and Structural Biology (2018)^[7]
Arbeiten mit zwei Markern (Kanji und Hiro) zur Visualisierung von Molekülinteraktionen (Youtube Demo Video von Luciano Arbiata)

Animiertes Beispiel

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).

Weitere Informationen finden Sie unter:

AR.js - GitHub Organisationskonto in dem die exzellente AR.js-Entwicklungsarbeit von Jerome Etienne weiter fortgeführt wird.
Marker für 3D-Modelle in AR.js generieren und ausdrucken

Quellennachweis

↑ Kanji Marker provided by ARToolkit on Github (accessed 2017/12/12) - https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf
↑ 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.
↑ Feulner, T., Kaiser, M., & Stolz, R. (2019). AR-Entwicklungsumgebung-Toolvergleich und Umsetzung einer Applikation. Hochschule für Angewandte Wissenschaften Landshut.
↑ 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)
↑ Luciano Abriata (2018) Javascript in Science URL: http://lucianoabriata.altervista.org/jsinscience/ (accessed 2018/07/12)
↑ 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)
↑ 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

[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

[1]

[2]

[3]

[4]

[5]

[6]

[7]