|
|
:flag_us: Dies ist die englische Version des Tutorials. Sie können die deutsche Version überprüfen.
|
|
|
# **Intro**
|
|
|
## :flag_de: 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.
|
|
|
|
|
|
## :flag_us: What is AR?
|
|
|
Augmented reality (AR) is a technology that overlays computer-generated content, such as images, videos, or 3D models, onto the real-world environment in real-time. It allows users to experience a blended reality where virtual elements are integrated with the physical world around them. AR is commonly used in mobile devices, such as smartphones and tablets, but it can also be experienced through wearable devices like smart glasses or headsets. AR can be used in a variety of applications, including gaming, education, retail, advertising, and industrial training, among others.
|
|
|
|
|
|
## :flag_de: 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.
|
|
|
|
|
|
|
|
|
## :flag_us: What you'll build
|
|
|
In this tutorial, you build a web app that places a model in the real world using augmented reality. Your app will:
|
|
|
- Use the target device's sensors to determine and track its position and orientation in the world
|
|
|
- Render a 3D model composited on top of a live camera view
|
|
|
- Execute hit tests to place objects on top of discovered surfaces in the real world
|
|
|
|
|
|
## :flag_de: 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.
|
|
|
|
|
|
## :flag_us: What you'll need?
|
|
|
- A workstation for coding
|
|
|
- ARCore-capable Android device running Android 8.0 Oreo
|
... | ... | @@ -35,37 +18,6 @@ In this tutorial, you build a web app that places a model in the real world usin |
|
|
- Basic knowledge of HTML, CSS, JavaScript, and Google Chrome Developer Tools
|
|
|
|
|
|
# **Step 1 - Server**
|
|
|
|
|
|
## :flag_de:
|
|
|
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.
|
|
|
![image](uploads/f44a98cf1b5886f1143c2b781797a115/image.png)
|
|
|
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:
|
|
|
![image](uploads/0541a53d02eb04caa6213f6971d98e26/image.png)
|
|
|
|
|
|
|
|
|
## :flag_us:
|
|
|
In order to host your AR web app you will need a server with https support. You can use the HfT Gitlab pages, for that please follow the tutorial and make the changes as described below.
|
|
|
|
|
|
After creating the project, it's important to make minor changes to the **.gitlab-ci.yml** in order for the website to work properly. You can use **Edit in Pipeline editor** function which appears in blue color. The final file should look like this:
|
... | ... | @@ -87,11 +39,15 @@ pages: |
|
|
- master
|
|
|
```
|
|
|
From the left menu, you can check if everything is working correctly. If yes, you will the URL for the website.
|
|
|
|
|
|
![image](uploads/f44a98cf1b5886f1143c2b781797a115/image.png)
|
|
|
|
|
|
You can access your new website using the link:
|
|
|
https://transfer.hft-stuttgart.de/pages/$CI_PROJECT_PATH/index.html
|
|
|
The $CI_PROJECT_PATH part in the URL will different according to your account and project name.
|
|
|
|
|
|
If everything works fine you will see this page:
|
|
|
|
|
|
![image](uploads/0541a53d02eb04caa6213f6971d98e26/image.png)
|
|
|
|
|
|
|
... | ... | |