Schnellstart - AR mit 8thwall

Dieses Tutorial behandelt, wie man wonderland-ar-tracking zusammen mit 8thwall nutzt.

Du kannst jede der von 8thwall unterstützten Tracking-Fähigkeiten nutzen:

  • SLAM-Tracking
  • Bildtracking (flach und zylindrisch)
  • Gesichtstracking
  • VPS (Welt-Tracking mit vorab gescanntem Mesh für Okklusion)

Projektvorlagen installieren 

Lade das wonderland-ar-tracking Repository herunter, entweder als ZIP (<> Code > Download ZIP) oder klone es mit git.

Entpacke den Ordner und kopiere den “SLAM-camera”-Ordner aus examples in Deinen templates Ordner. Der templates Ordner befindet sich je nach Betriebssystem an folgendem Ort:

  • Windows: %APPDATA%/WonderlandEngine (%APPDATA% kann in die Pfadleiste des Windows Explorers eingegeben werden und löst sich zu C:\Users\<Username>\AppData\Roaming auf)
  • MacOS: ~/Library/Application Support/WonderlandEngine (~ ist Dein Home-Ordner)
  • Linux: ~/.WonderlandEngine/

Ein Projekt erstellen 

Wenn Du die Vorlage korrekt eingerichtet hast, solltest Du folgendes sehen, wenn Du ein neues Projekt in Wonderlands Editor erstellst:

Schnellstart - AR mit 8thwall

Mit der neuen Vorlage ausgewählt, kannst Du ein Projekt erstellen.

Testen 

Um das Projekt lokal zu testen, erfordert 8thwall, dass Du lokale Zertifikate einrichtest, da sie das Servieren ohne HTTPS blockieren.

SSL Zertifikate einrichten 

Um eigene SSL-Zertifikate für localhost zu generieren, öffne Views > Preferences > Server und klicke Generate Certificates. Die Einstellungswerte werden automatisch konfiguriert.

Starte schließlich den Server neu: Stoppe den Server, indem Du oben im Editorfenster auf “localhost:8080” klickst, dann auf “Stop Server”. Klicke dann auf “not running”, und anschließend auf “Start Server”, um den Server neu zu starten.

Auf dem Smartphone anzeigen 

Für Android:

  1. Stelle sicher, dass auf Deinem Gerät “USB-Debugging” aktiviert ist.
  2. Verbinde Dein Gerät über USB.
  3. Wähle “Local Device”, um den Dialog “USB-Debugging zulassen” auf Deinem Gerät auszulösen.
  4. Sobald genehmigt, kannst Du das Gerät im Dropdown auswählen.
  5. Markiere das “SSL”-Checkbox.
  6. Drücke den grünen Pfeil, um den Browser mit der Seite auf Deinem Smartphone zu starten.

Für iOS:

  1. Verbinde Dein iOS-Gerät und Deinen Mac mit demselben Wi-Fi-Netzwerk.
  2. Auf Deinem Mac findest Du den Namen Deines Macs unter: System Preferences > Sharing.
  3. (optional) Installiere die oben generierten SSL-Zertifikate auf Deinem iOS-Gerät: Entweder indem Du das Zertifikat selbst per E-Mail sendest und über die Mail-App installierst, oder mithilfe des Apple Configurators.
  4. (optional) Vertraue dem installierten Zertifikat auf Deinem iOS-Gerät, indem Du navigierst zu Settings > General > About > Certificate Trust Settings.
  5. Öffne Safari auf Deinem iOS-Gerät: Gib die URL http://YourMacName.local:8080 ein oder https://YourMacName.local:8081, wenn SSL verwendet wird.

Veröffentlichung 

Um Deine 8thwall-basierte Erfahrung zu veröffentlichen, musst Du das 8thwall API Token im src/index.js ersetzen.

Ein 8thwall-Projekt erstellen 

  1. Erstelle ein Konto auf 8thwall.com. Klicke auf Deinem 8th Wall Dashboard auf “Start a new project”.
  2. Wähle “Self-Hosted”.
  3. Setze einen Projektnamen und einen “License Type”, der Deinen Bedürfnissen entspricht.
  4. Klicke auf “Create”.
  5. Füge Domains hinzu, auf denen Du hostest, bei “Setup Domains”.
  6. Gehe zu “Settings” (Zahnradsymbol links)
  7. Kopiere den App-Schlüssel aus dem Abschnitt “My App Key”.

Füge den App-Schlüssel in die src/index.js Datei ein: Ersetze den Wert von window.API_TOKEN_XR8 = '<here>';.