Augmented Reality-Umgebung mittels aframe und HIRO-Marker selbst erstellen

Sie benötigen:

Einen Computer mit Internetverbindung,
ein Smartphone oder Tablet mit Kamera und Internetverbindung,
Einen Browser mit WebGL und WebRTC
- Für Android und Windows funktioniert z.B. Firefox als Browser.
- IOS sollte auf ios11 upgedatet werden.^[1]
einen Drucker zum Ausdrucken des HIRO-Markers.

Schritt 1: Homepage erstellen

Legen Sie einen Account unter GitHub an: https://github.com/github (eine Einführung zum Einrichten von GitHub ist unter folgendem Link verfügbar: https://guides.github.com/features/pages/)
Kopieren Sie das folgende Repository in GitHub über "Fork": https://github.com/melanie-platz/AR-HIRO
Richten Sie Ihre Homepage ein (über Settings > GitHub Pages > Choose a theme > Select theme).

Schritt 2: HIRO-Marker ausdrucken

Drucken Sie die Marker aus (am besten auf weißes Papier): Marker PDF Printout for Kanji and Hiro

Schritt 3: Szene erstellen

Erstellen Sie Ihre Szene, die dargestellt werden soll, mit Hilfe von: https://niebert.github.io/JSON3D4Aframe/

Mit Hilfe von "Add" oder "Delete" könne Sie Körper hinzufügen oder löschen. Durch Klicken auf "Save AFrame" kann der aframe gespeichert werden und über den Browser betrachtet werden.
Durch klicken auf "Save AR" kann die Szene gespeichert werden (voreingestellter Dateiname: "object3d_ar_hiro.html"). Geben Sie der Datei einen neuen Namen (in unserem Fall: "cylinder-html").
Laden Sie die entstandene Datei in GitHub hoch.

Code mit Erläuterungen

[1] Kennzeichnet die Datei als HTML-Datei und öffnet den HTML-Kopf.

 <!DOCTYPE html
 <head>

[2] Aframe einbinden:

<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

[3] aframe-ar.js einbinden:

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>

[4] Titel festlegen:

  <title>
      AR.js for HIRO Marker
   </title>

[5] HTML-Seite hat keine Rand (margin:0px), d.h. der AFrame füllt die ganze Seite ohne Rand aus.

 </head> 
 <body style='margin : 0px; overflow: hidden;'>

[6] Markereinstellungen: Es wird der Hiro-Marker verwendet. Alternativ gibt es als Standard auch den Kanji-Marker

 <a-scene>
      <a-marker id="mymarker" preset="hiro">

[7] Definition des Objekts, welches auf den Marker gepackt wird (hier: blauer Zylinder)

 <a-cylinder position="0.00 0.50 -4.00" material="color: #4545aa;opacity:0.5" rotation="0 0 0"  radius="1.00" height="1.00" >
 </a-cylinder>

[8] Schließt u.a. die AFrame-Umgebung und die HTML-Datei

 </a-marker>
 <a-entity camera></a-entity>
 </a-scene>
 </body>
 </html>

Schritt 4: Link mit dem Smartphone/ Tablet öffnen

Die in Schritt 3 in GitHub hochgeladene Datei kann nun mit dem Smartphone/ Tablet im Browser (Firefox) aufgerufen werden über:
https://[Ihr Benutzername].github.io/AR-HIRO/[Name der Datei].html
Dazu muss dem Zugriff auf die Kamera des Gerätes zugestimmt werden. Zum Anzeigen des Objekts, bewegen Sie die Kamera über den in Schritt 2 ausgedruckten HIRO-Marker.

Schritt 5 (optional): Erstellen eines QR-Codes

QR Code zur URL: https://melanie-platz.github.io/AR-HIRO/cylinder.html

Um leichter mit dem Smartphone/ Tablet auf den Link zugreifen zu können, kann ein QR-Code erzeugt werden, z.B. mit Hilfe von http://goqr.me/. Um auf den QR-Code zugreifen zu können, wird ein QR-Code-reader (z.B. QR Droid) benötigt.

Beispiele

Selbst gezeichneter HIRO-Marker.

Qualität des selbst gezeichneten HIRO-Markers.

3D-Modelle mit 360-Grad-Panorama

In der OpenSource-Software JSON3D4Aframe kann man auch bei einem Aframe-3D-Modell realistische 3D-Hintergründe auswählen. Klicken Sie dazu auf AFrame-Settings und wählen Sie eine 360-Gradpanorama aus.

Salzkristall als 3D-Modell mit Himmel im Hintergrund
crystal_lattice.json-Datei, mit der man das 3D-Model für das Salzkristall in JSON3D4Aframe laden kann. Verwenden Sie nach dem Klick auf crystal_lattice.json-Datei im Browser die Menüoption "Speichern unter ...", um die JSON-Datei auf Ihrem Computer anzuspeichern. Mit dem Load-Button in JSON3D4Aframe können Sie das Salzkristall laden.

Weiterführende Informationen zu aframe bzw. HIRO-Markern

Siehe auch

3D-Modellierung

Links und Literatur

↑ AR.js Repository, Jerome Etienne (2018) - Release 1.6 - https://github.com/jeromeetienne/ar.js

[1] AR.js Repository, Jerome Etienne (2018) - Release 1.6 - https://github.com/jeromeetienne/ar.js

[1]