This is the German version of the tutorial. You can check the English version.

Intro

Was ist AR?

Augmented Reality (AR) ist eine Technologie, die computer-generierte Inhalte wie Bilder, Videos oder 3D-Modelle in Echtzeit auf die reale Umgebung überlagert. Sie ermöglicht es Benutzern, eine Mischrealität zu erleben, in der virtuelle Elemente mit der physischen Welt um sie herum integriert sind. AR wird häufig in mobilen Geräten wie Smartphones und Tablets verwendet, kann aber auch über tragbare Geräte wie Smart Glasses oder Headsets erlebt werden. AR kann in verschiedenen Anwendungen eingesetzt werden, darunter Gaming, Bildung, Einzelhandel, Werbung und industrielle Schulung, unter anderem.

Was Sie bauen werden?

In diesem Tutorial bauen Sie eine Web-App, die mithilfe von Augmented Reality ein Modell in die reale Welt einfügt. Ihre App wird folgende Funktionen haben:

• Die Sensoren des Zielgeräts verwenden, um seine Position und Ausrichtung in der Welt zu bestimmen und zu verfolgen
• Ein 3D-Modell über einem Live-Kamerabild anzeigen
• Hit-Tests ausführen, um Objekte auf entdeckten Oberflächen in der realen Welt zu platzieren.

Was Sie benötigen werden?

• Eine Arbeitsstation zum Codieren
• Ein ARCore-fähiges Android-Gerät mit Android 8.0 Oreo
• Google Chrome
• Google Play-Dienste für AR installiert (Chrome fordert Sie automatisch zur Installation auf kompatiblen Geräten auf)
• Ein Webserver mit https-Unterstützung
• Grundkenntnisse in HTML, CSS, JavaScript und den Google Chrome Developer Tools.

Step 1 - Server

Um Ihre AR-Web-App hosten zu können, benötigen Sie einen Server mit https-Unterstützung. Sie können die HfT GitLab-Seiten verwenden, dafür folgen Sie bitte dem Tutorial und führen Sie die folgenden Änderungen wie beschrieben durch.

Nachdem Sie das Projekt erstellt haben, ist es wichtig, geringfügige Änderungen an der .gitlab-ci.yml vorzunehmen, damit die Website ordnungsgemäß funktioniert. Sie können die Funktion Im Pipeline-Editor bearbeiten verwenden, die in blauer Farbe angezeigt wird. Die finale Datei sollte wie folgt aussehen:

image: alpine:latest

stages:
    - deploy
  
pages:
  stage: deploy
  script:
    - echo "deploy to https://transfer.hft-stuttgart.de/pages/$CI_PROJECT_PATH/"
  artifacts:
    paths:
      - public
  only: 
    - master

Über das linke Menü können Sie überprüfen, ob alles korrekt funktioniert. Wenn ja, erhalten Sie die URL für die Website.

Sie können auf Ihre neue Website über den folgenden Link zugreifen: https://transfer.hft-stuttgart.de/pages/$CI_PROJECT_PATH/index.html Der Teil $CI_PROJECT_PATH in der URL wird je nach Ihrem Konto- und Projektname unterschiedlich sein. Wenn alles funktioniert, sehen Sie diese Seite: