3D-Modellierung/Beispiele

Die folgende Lernressource wurde erstellt, um bestehende Frameworks und Beispiele im Web zu untersuchen, die 3D-Modellierung bereits verwenden. Am Ende der Lerneinheit sollten die Lernenden selbst in der Lage sein, 3D-Modelle für das Internet zu erstellen, die im Browser beobachtet und in einem Kamerabild als Augemented Reality in Lerneinheiten untersucht werden kann.

Beispiele

360-Grad-Kugelpanorama - Projektionen in Aframe
3D mit Grundformen - like a Water Molecule made of spheres
Web-3D-Tour - Virtuelle Touren z.B. in Museen, außerschulischen Lernorten
AR mit Markern - Augmented Reality mit Markern, die auf dem AR Tool Kit bzw. AR.js beruhen
Rot-Grün-3D-Bilder - Rot-Grün-Bilder für 3D-Objekten. Für Lernprozesse über 3D-Modellierung können die Rot-Grün-Bilder einen Einstieg darstellen, das Grundprinzip beiden Augen jeweils perspektivisch unterschiedliche Bildinformationen zu liefern deutlich machen. Dabei steht jeweils eine Farbe für die Bildinformtionen, die ein Auge (rechts/links) erhält.
AR- und VR-Einsatz in der Grundschule - führt am Beispiel von Planetenbewegungen auf einem Marker die Nutzung von AR auf Markern ein. Gleichzeitig wird in die technischen Grundprinzipien dieser 3D-Modellierung eingeführt.
VR-Headsets - Controller - sich im 3D-Raum bewegen und Objekte im digitalen Raum manipulieren.
Planetenbewegung in Blender - (Foliensatz) - Planetenbewegung in Blender animiert

Externe Beispiele

AR-Beispiele mit AR.js erstellt als Git-Repository von Lee Stemlowski
AR.js threes.js - Beispiele mit Marker-Annotation - Fork von Lee Stemkovski

360-Grad-Panoramen

Es gibt verschiedene geometrische Möglichkeiten, 360-Grad-Panoramen zu erstellen:

Röhrenprojektion: Stellen Sie sich vor, dass Sie in einer senkrecht stehenden Röhre stehen. Die innere Wand der Röhre ist die Projektionsfläche für das 360-Grad-Panorama. Sie schauen sich in diesem Fall parallel zum Boden die Projektion an und drehen Sie einfach um 360 Grad. Ein Smartphone kann verwendet werden, um diese 360-Grad-Bilder zu erstellen.
Kugelprojektion: Zusätzlich zu 360-Grad-Drehung können Sie in einer Kugelprojektion auch nach oben und unten umschauen. Um ein sphärisches Projektion zu erstellen, benötigen Sie z.B. die OpenSource-Software Hugin. Diese berechnet nach dem Einladen mehrere Einzelbilder aus unterschiedlichen Richtung von einem festen Standpunkt aus, die sphärische Projektion. Diese sieht in einem Bildeditor wie GIMP ungewöhnlich verzerrt aus. Wenn man aber das Bild in AFrame ansiehtverwendet werden kann.

Röhrenansicht

Röhrenprojektion auf die innere Wand eine Zylinders

Die folgenden Beispiele beginnen mit der Tubusansicht und gehen zu erweiterten Projektionen mit Panorama Image Stitching-Software Hugin für die Kugelansicht eines Panoramas über.

(Tube Panorama View) Erforsche ein 360 Grad webbasiertes Panorama projiziert auf die Innenwand eines Zylinders (man kann sich nach rechts oder links bewegen).
(Bildauswahl) Suchen Sie nach Panoramabilder auf WikiMedia und erstellen Sie ein 360-Grad-Panorama-Bild mit dem Dateinamen des Bildes mit dem Panorama-360-Creator!
'(Anklickbare Bereiche im Panorama)' Wenn Sie eine v:en:Image Map für das Panorama erstellen möchten, verwenden Sie den Online Image Map Creator und wechseln Sie das Ausgabeformat zu Panorama 360 imagemap im Auswahlfeld.

Kugelansicht Panorama

Stereographische Projektion

Der erste Schritt besteht darin, eine Mehrfachansicht eines ausgewählten Ortes zu erstellen und Bilder von einem Blickpunkt in alle Richtungen mit überlappenden Bildern aufzunehmen (z.B. 25% Überlappung zwischen den Einzelbilder). Die Software Hugin kann aus den Einzelbildern unterstützt Sie bei der Erstellung der 360-Grad-Rundumansicht für das Panorama.

(Endprodukt der Lernaufgabe) Erkunden Sie zunächst das Endprodukt des 360^o -Objekts.
(Lernaufgabe) Lernaufgabe besteht darin, das Endprodukt aus der Sammlung von Bildern in HuginSample GitHub repository und lernen, wie man einige fehlende Bilder für die sphärische Ansicht mit dem Bildverarbeitungsprogamm GIMP korrigiert.
(Demo-Bild als ZIP-Datei) Die ZIP-Datei aller Bilder und das Endprodukt können Sie über Hugin Sample Repository auf Github (Direct Download Image ZIP).
(Führe Hugin Photo Stitching für Panorama) Das Endprodukt verwendet das 360-Grad-Bild von AFrame. Um mehr über die halbautomatische Erstellung sphärischer Projektionen mehrerer Kamerabilder zu erfahren, fahren Sie mit den Informationen auf HuginSample README.md fort.
(Hugin Tutorial Video) Youtube Video von Brian Cluff über Hugin - 2017/02/07
(AFrame Background) Weitere Beispiele und Informationen zu AFrame finden Sie auf AFrame.io Website.

AFrame

Wassermolekül in AFrame modelliert

AFrame: Erkunden Sie die Aframe-Beispiele auf der AFrame-Homepage, um mehr über die Optionen zu erfahren, die mit AFrame möglich sind.
- Verwenden Sie die WebApp JSON3D4Frame, die ein 3D-Modell mit geometrischen Grundelementen erstellt.
- WebApp JSON3D4Frame kann als ZIP heruntergeladen werden und läuft offline in einem Browser.
- Wassermolekül mit AFrame
Real World Lab: Die AFrame-Bibliothek kann verwendet werden, um einen realen Ort virtuell in Wikiversity zu erkunden, so dass der Lernende sich vorstellen kann, wie der geographische Ort beschaffen ist (siehe Reallabor)
WebVR Museum Tours Machen Sie virtuelle Tour durch ein Museum (hilfreich, um einen echten Besuch vorzubereiten)
- AFrame Museum: enthält einen Tonhintergrund, z.B. auf Firefox.
- Smithonean Museum Tour - mit AFrame erstellter Rundgang mit Museumskarte
- Lourvre Museum Paris - Vordefinierte Route mit automatischer Drehung und Seitennavigation.

Marker Print-Out for Hiro and Kanji Markers.

AR.js

AR.js Beispiel mit Kanji-Marker mit Wassermolekül als 3D-Objekt

Kanji-Marker^[1] für AR.js - das 3D-Modell wird auf dem Marker im Kamerabild platziert.

Mit AR.js können Sie ein 3D-Modell in das Kamerabild Ihres Smartphones einfügen. AR.js basiert auf dem Konzept von ARToolkit^[2]. Das 3D-Modell wird durch Erkennen eines Markers in das Kamerabild eingefügt. Durch Drehen und Bewegen des Markers im Kamerabild wird das 3D-Modell im Kamerabild gedreht und verschoben.

Tutorial OpenSource4Schools

Es existiert ein Tutorial unter OpenSource4Schools für den Einsatz von AR.js und der Erzeugung von 3D-Modellen auf Markern.

Marker-Ausdruck für Hiro und Kanji

Marker PDF Ausdruck für Kanji und Hiro

Beispiel Hiro Marker

Wassermolekül mit AR.js und Hiro Marker. Setzen Sie Hiro Marker in das Kamerabild.

Beispiel Kanji Marker

Wassermolekül mit AR.js und Kanji Marker. Platziere den Kanji Marker im Kamerabild.

Animiertes Beispiel

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

Probieren Sie das selbst aus:

Scannen Sie den QR-Code mit Ihrem QR-Code Scanner (z. B. installieren Sie den QR-Scanner mit w:de:F-Droid) oder
zeigen Sie einfach den folgenden Link im Firefox-Browser mit Ihrem mobilen Endgerät (Smartphone) an:

https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html

Drucken Sie den Hiro-Marker aus und platzieren Sie den Marker vor Ihrem Tisch oder
Zeigen Sie diese Seite auf Ihrem Laptop oder Tablet an und betrachten Sie die Web-Seite mit Smartphone (siehe Laptop-Bild rechts mit AR-Modell).

AR.js - Augmented Reality in the Browser

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

Siehe auch

Weitere Informationen finden Sie unter:

AR VR in der Grundschule
WebApp JSON3D4Frame um 3D-Modelle aus geometrischen Grundformen zu erstellen.
Real World Lab: Reallabore sind an einem geographischen Platz verortet. Digital Lehr-Lernmaterialien werden in Wikiversity dazu verwendet, diesen Ort mit Zusatzinformationen anzureichern.
AR-Toolkit - AR.js is based on AR-Toolkit
AR.js README.md
Marker-Generator: Erstelle deine eigenen 3D-Marker für AR.js
OpenSource4School/HIRO-Marker - Tutorial

Literatur

↑ Kanji-Marker, der vom ARToolkit auf Github zur Verfügung gestellt wird (aufgerufen am 12.12.2017) - 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.

[1] Kanji-Marker, der vom ARToolkit auf Github zur Verfügung gestellt wird (aufgerufen am 12.12.2017) - 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.

[1]

[2]