# 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.
* 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.
[2] Aframe einbinden:
[3] aframe-ar.js einbinden:
[4] Titel festlegen:
[5] HTML-Seite hat keine Rand (margin:0px), d.h. der AFrame füllt die ganze Seite ohne Rand aus.
[6] Markereinstellungen: Es wird der Hiro-Marker verwendet. Alternativ gibt es als Standard auch den Kanji-Marker
[7] Definition des Objekts, welches auf den Marker gepackt wird (hier: blauer Zylinder)
[8] Schließt u.a. die AFrame-Umgebung und die HTML-Datei

## 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

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

* https://fannanni.github.io/AR-HIRO/figur%201.html
* https://marcelschwarz.github.io/AR-HIRO/Hammer.html
* Selbst gezeichneter HIRO-Marker.
* Selbst gezeichneter HIRO-Marker.
* Qualität des selbst gezeichneten HIRO-Markers.
* 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

* https://github.com/jeromeetienne/ar.js
* https://aframe.io/blog/arjs/
* https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105
* https://en.wikiversity.org/wiki/3D_Modelling/Examples