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
[Bearbeiten]- 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
[Bearbeiten]- 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
[Bearbeiten]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
[Bearbeiten]
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
[Bearbeiten]
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 360o -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
[Bearbeiten]
- 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.
AR.js
[Bearbeiten]
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
[Bearbeiten]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
[Bearbeiten]Beispiel Hiro Marker
[Bearbeiten]- Wassermolekül mit AR.js und Hiro Marker. Setzen Sie Hiro Marker in das Kamerabild.
Beispiel Kanji Marker
[Bearbeiten]- Wassermolekül mit AR.js und Kanji Marker. Platziere den Kanji Marker im Kamerabild.
Animiertes Beispiel
[Bearbeiten]
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:
- 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).
Platzieren Sie den Hiro-Marker in Ihrem Kamerabild Ihres mobilen Geräts (Smartphone)].
Siehe auch
[Bearbeiten]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
[Bearbeiten]- ↑ 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.