3D-Modellierung/Beispiele

Aus Wikiversity
In dem AFrame 360 Image kann man sich mit gedrückter Maustaste umschauen
Screenshot of Crystal Lattice with Hugin Sky Background in AFrame.

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]

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]

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.

Kugelansicht Panorama[Bearbeiten]

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.

AFrame[Bearbeiten]

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.
  • 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)
Marker Print-Out for Hiro and Kanji Markers.

AR.js[Bearbeiten]

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[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]

Beispiel Kanji Marker[Bearbeiten]

Animiertes Beispiel[Bearbeiten]

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

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

Siehe auch[Bearbeiten]

Weitere Informationen finden Sie unter:

Literatur[Bearbeiten]

  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.