Was ist Web AR und wie funktioniert es?

Web AR (Web-based Augmented Reality) ist eine Technologie, die das Erleben von Augmented Reality (AR) in einem mobilen oder Webbrowser ermöglicht. AR ist die Erweiterung der realen Welt durch digitale Inhalte wie Bilder, Videos, 3D-Modelle oder Animationen. Web AR unterscheidet sich von traditioneller AR, da der Nutzer keine speziellen Apps, Software oder Geräte herunterladen oder kaufen muss. In diesem Blogbeitrag möchten wir die Vorteile von Web AR näher beleuchten.

Web AR ist eine Technologie, die Augmented-Reality-Erlebnisse direkt im Webbrowser ermöglicht, ohne dass eine separate Anwendung heruntergeladen werden muss. Web AR nutzt die Kamera und andere Sensoren des Geräts, um digitale Inhalte in die reale Welt zu integrieren. Es ist ein kostengünstiger und zugänglicher Weg, um Augmented Reality-Erlebnisse zu schaffen, da keine separate Anwendung entwickelt und veröffentlicht werden muss. Web AR kann für verschiedene Anwendungen wie E-Commerce, Bildung, Marketing und Unterhaltung eingesetzt werden. Es gibt verschiedene Plattformen und Tools, mit denen Web AR-Erlebnisse erstellt werden können, wie z.B. Vuframe, 8th Wall und AR.js. Web AR ist abhängig von Technologien, die auf den meisten mobilen Geräten und Browsern vorhanden sind, was eine breite Zugänglichkeit und einheitliche Erfahrung gewährleistet. Die Anwendungen von Web AR sind nur durch die Kreativität der Entwickler begrenzt.

Welche Arten von AR-Erfahrungen können mit Web AR erstellt werden

Web AR ermöglicht es, Augmented-Reality-Erlebnisse direkt im Webbrowser zu erleben, ohne dass eine separate App heruntergeladen werden muss. Es gibt verschiedene Arten von AR-Erfahrungen, die mit Web AR erstellt werden können, wie z.B.:

• 3D-Modelle: Web AR kann verwendet werden, um 3D-Modelle von Produkten oder Objekten in die reale Welt zu integrieren, um eine interaktive Erfahrung zu schaffen.
• Animationen: Web AR kann verwendet werden, um Animationen in die reale Welt zu integrieren, um eine interaktive Erfahrung zu schaffen.
• Bilderkennung: Web AR kann verwendet werden, um Bilder zu erkennen und digitale Inhalte in die reale Welt zu integrieren, um eine interaktive Erfahrung zu schaffen.
• Spiele: Web AR kann verwendet werden, um Spiele zu erstellen, die in die reale Welt integriert sind, um eine interaktive Erfahrung zu schaffen.
• Marketingkampagnen: Web AR kann verwendet werden, um interaktive Marketingkampagnen zu erstellen, die die Benutzererfahrung verbessern und die Markenbekanntheit steigern.

Es gibt verschiedene Plattformen und Tools, die es ermöglichen, Web-AR-Erlebnisse zu erstellen. Die Anwendungen von Web AR sind nur durch die Kreativität der Entwickler begrenzt.

Welche Browser unterstützen Web AR?

Web AR ist eine Technologie, die es ermöglicht, Augmented Reality (AR) Erlebnisse in einem mobilen oder Web-Browser zu erleben. Um Web AR zu unterstützen, muss der Browser in der Lage sein, die WebXR Device API zu verwenden, die für die Erstellung von AR- und VR-Inhalten auf dem Web standardisiert ist¹.

Nicht alle Browser unterstützen Web AR vollständig, aber einige der beliebtesten Browser haben zumindest teilweise Unterstützung dafür. Laut einer Qulle sind die folgenden Browser in der Lage, Web AR zu unterstützen, mit unterschiedlichem Grad an Funktionalität und Leistung²:

• Chrome (mobil, desktop)
• Safari (mobil, desktop)
• Microsoft Edge (desktop, mobil)
• Mozilla Firefox (desktop, mobil)
• Samsung Internet (mobil)
• Servo (desktop)

Welche Tools werden für Web AR benötigt?

Es gibt verschiedene Tools für Web AR, die Sie verwenden können, um Augmented Reality Erlebnisse im Browser zu erstellen. Einige der beliebtesten sind:

• AR.js: Ein effektives JavaScript-basiertes Open Source Tool (MIT Lizenz) für Web AR. Es basiert auf der Open Source ARToolKit Tracking-Bibliothek, die WebGL & Three.js verwendet, um 3D-Modelle über realen Objekten zu rendern.
• ARToolKit: Eine beliebte Open Source SDK für die Erstellung von faszinierenden AR-Apps, die virtuelle Bilder auf die physische Umgebung überlagern. Es unterstützt verschiedene Plattformen wie Android, iOS, Linux, Windows und Mac OS X.
• 8th Wall: Eine plattformübergreifende Web AR Entwicklungslösung für den Bau von Augmented Reality Erlebnissen, die auf dem Web und auf mobilen Geräten laufen. Die Plattform bietet eine leistungsstarke Reihe von Entwicklerwerkzeugen, darunter einen Cloud-basierten Code-Editor, eine AR-Engine und Vorlagen zur Arbeit mit World Tracking und Image Targets.
• AWE: Eine Web-basierte Plattform, die die Erstellung von Mixed Reality Erlebnissen auf vielen Geräten unterstützt, einschließlich Smartphones, Tablets und sowohl mobilen, Desktop- als auch Standalone-AR- und VR-Brillen. Sie bietet verschiedene Arten von AR-Erlebnissen an, wie Marker-basierte, standortbasierte und Leap Motion Sensor AR.

Sie können mehr über die Verwendung von ARToolKit in der offiziellen Dokumentation⁴ oder in den mitgelieferten Beispielen lernen. Ich hoffe, das hilft Ihnen weiter.

Welche open source tools für web AR gibt es?

Es gibt verschiedene Open-Source-Tools für Web AR, die Entwickler verwenden können, um Augmented-Reality-Erlebnisse direkt im Webbrowser zu erstellen. Hier sind einige Beispiele:

1. AR.js: AR.js ist ein Open-Source-Framework für Web AR, das auf JavaScript und WebGL basiert. Es ermöglicht es Entwicklern, AR-Erlebnisse direkt im Webbrowser zu erstellen, ohne dass eine separate App heruntergeladen werden muss.
2. A-Frame: A-Frame ist ein Open-Source-Framework für Web AR, das auf der Three.js-Bibliothek basiert. Es ermöglicht es Entwicklern, 3D-Modelle und Animationen in die reale Welt zu integrieren und AR-Erlebnisse direkt im Webbrowser zu erstellen.
3. ARToolKit: ARToolKit ist ein Open-Source-Framework für Web AR, das auf C++ und JavaScript basiert. Es ermöglicht es Entwicklern, AR-Erlebnisse direkt im Webbrowser zu erstellen, ohne dass eine separate App heruntergeladen werden muss.
4. Three.js: Three.js ist eine JavaScript-Bibliothek, die es Entwicklern ermöglicht, 3D-Modelle und Animationen in die reale Welt zu integrieren und AR-Erlebnisse direkt im Webbrowser zu erstellen.

Diese Open-Source-Tools bieten Entwicklern eine kostengünstige und zugängliche Möglichkeit, AR-Erlebnisse zu schaffen, da es keine Notwendigkeit gibt, eine separate App zu entwickeln und zu veröffentlichen.

Links

AR.js project
ARToolKit 
argon.js framework 
Three.ar.js
Awe.js

Hinweis

Dieser Blogbeitrag ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe.

Dieses AR.js Tutorial entstand am 06.09.2023. Der Blogbeitrag ist für unsere Auftraggeber gedacht.

Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie. Der hier gezeigte Weg ist nicht der einzige, es ist lediglich, der, den ich bevorzuge.

Wie kann ich AR.js verwenden?

Um AR.js zu verwenden, müssen Sie zuerst die AR.js-Bibliothek in Ihre Webseite einbinden. Sie können dies tun, indem Sie das folgende Skript-Tag in den Kopfteil Ihrer HTML-Datei einfügen:

<script src=“https://cdn.jsdelivr.net/npm/ar.js”></script>

Dann müssen Sie ein AR-Szenario definieren, das aus einem Marker-Bild und einem 3D-Modell besteht, das darauf angezeigt wird. Sie können ein Marker-Bild mit dem AR.js Marker Training Tool erstellen. Sie können ein 3D-Modell mit einem beliebigen 3D-Editor erstellen oder ein vorhandenes Modell verwenden. Sie müssen das Modell im glTF-Format speichern, um es mit AR.js kompatibel zu machen.

Um das AR-Szenario in Ihre Webseite einzubetten, können Sie das A-Frame-Framework verwenden, das von AR.js unterstützt wird. A-Frame ist ein Web-Framework für die Erstellung von VR- und AR-Erlebnissen mit HTML und JavaScript. Sie können A-Frame in Ihre Webseite einbinden, indem Sie das folgende Skript-Tag in den Kopfteil Ihrer HTML-Datei einfügen:

<script src=“https://aframe.io/releases/1.2.0/aframe.min.js”></script>

Dann können Sie eine A-Frame-Szene erstellen, die aus einer Kamera, einer Lichtquelle und einem a-marker-Element besteht. Das a-marker-Element definiert den Marker, der als Trigger für das AR-Erlebnis dient. Sie müssen die URL des Marker-Bildes im preset-Attribut angeben. Zum Beispiel:

<a-marker preset=“custom” type=“pattern” url=“marker.patt”></a-marker>

Innerhalb des a-marker-Elements können Sie dann ein a-entity-Element hinzufügen, das das 3D-Modell definiert, das auf dem Marker angezeigt wird. Sie müssen die URL des Modells im src-Attribut angeben. Zum Beispiel:

<a-entity gltf-model=“model.gltf” scale=“0.1 0.1 0.1” position=“0 0 0”></a-entity>

Sie können auch andere Attribute wie scale, position und rotation verwenden, um die Größe, Position und Ausrichtung des Modells anzupassen.

Das ist alles, was Sie brauchen, um eine einfache AR-Webseite mit AR.js zu erstellen. Um die Webseite zu testen, müssen Sie sie auf einem lokalen oder entfernten Server hosten und dann mit Ihrem Smartphone darauf zugreifen. Sie müssen die Kamera Ihres Smartphones auf den Marker richten, um das AR-Erlebnis zu sehen.

Sie können mehr über AR.js und wie man es verwendet auf der offiziellen GitHub-Seite oder auf der A-Frame-Website erfahren.

Wie kann ich ARToolKit: verwenden?

Um ARToolKit zu verwenden, müssen Sie zuerst die ARToolKit-Bibliothek herunterladen und installieren, die Sie für Ihr Betriebssystem und Ihre Programmiersprache benötigen. Sie können die neueste Version von ARToolKit von der offiziellen Website oder von GitHub herunterladen. ARToolKit unterstützt verschiedene Plattformen wie Windows, Linux, Mac OS X, Android und iOS, sowie verschiedene Sprachen wie C, C++, Java und Python.

Um ARToolKit zu verwenden, müssen Sie auch eine Kamera oder ein Video-Gerät haben, das mit Ihrem Computer verbunden ist. Sie müssen auch einige Marker-Bilder erstellen oder verwenden, die als Referenzpunkte für die Erkennung und Verfolgung von ARToolKit dienen. Sie können Marker-Bilder mit dem ARToolKit Marker Generator Tool erstellen oder einige der mitgelieferten Beispiele verwenden.

Um ein einfaches AR-Programm mit ARToolKit zu erstellen, müssen Sie die folgenden Schritte befolgen:

• Initialisieren Sie die ARToolKit-Bibliothek und laden Sie die Kamera-Parameter-Datei, die die Eigenschaften Ihrer Kamera beschreibt.
• Öffnen Sie das Video-Gerät und starten Sie die Video-Aufnahme.
• Laden Sie die Marker-Bilder und initialisieren Sie die Marker-Informationen, wie Größe, Position und Orientierung.
• Erstellen Sie eine Schleife, in der Sie für jedes Video-Frame die folgenden Aktionen ausführen:
  • Holen Sie sich das aktuelle Video-Frame und konvertieren Sie es in ein Graustufen-Bild.
  • Erkennen Sie die Marker im Graustufen-Bild und berechnen Sie ihre Position und Orientierung relativ zur Kamera.
  • Zeichnen Sie das Video-Frame auf den Bildschirm oder auf eine Textur.
  • Zeichnen Sie virtuelle Objekte auf den Bildschirm oder auf eine Textur, basierend auf der Position und Orientierung der erkannten Marker.
  • Aktualisieren Sie den Bildschirm oder die Textur mit den gezeichneten Bildern.
• Schließen Sie das Video-Gerät und beenden Sie die ARToolKit-Bibliothek.

Kann ich ARToolKit auch für VR verwenden?

Ja, Sie können ARToolKit auch für VR verwenden, wenn Sie einige Anpassungen vornehmen. VR steht für Virtual Reality, eine Technologie, die eine immersive und interaktive Simulation einer virtuellen Umgebung bietet. Um VR zu erleben, benötigen Sie normalerweise ein spezielles Headset, das ein Display und Sensoren enthält, die Ihre Kopfbewegungen verfolgen.

ARToolKit ist ursprünglich für AR (Augmented Reality) konzipiert, eine Technologie, die digitale Inhalte auf die reale Welt überlagert. Um AR zu erleben, benötigen Sie normalerweise eine Kamera, die die reale Umgebung erfasst, und einen Bildschirm, der die digitalen Inhalte anzeigt.

Um ARToolKit für VR zu verwenden, müssen Sie also einige Änderungen an Ihrem Setup vornehmen. Zum Beispiel:

• Statt einer Kamera können Sie ein VR-Headset verwenden, das ein integriertes Display und Sensoren hat. Sie müssen die ARToolKit-Bibliothek so konfigurieren, dass sie die Daten von Ihrem VR-Headset anstelle von Ihrer Kamera verwendet.
• Statt eines Bildschirms können Sie eine VR-Brille verwenden, die ein stereoskopisches Bild erzeugt, das Ihnen ein Gefühl von Tiefe und Räumlichkeit vermittelt. Sie müssen die ARToolKit-Bibliothek so konfigurieren, dass sie das Bild in zwei Hälften teilt und jede Hälfte an jedes Auge anpasst.
• Statt Marker-Bildern können Sie virtuelle Objekte verwenden, die als Referenzpunkte für die Erkennung und Verfolgung von ARToolKit dienen. Sie müssen die ARToolKit-Bibliothek so konfigurieren, dass sie die Position und Orientierung der virtuellen Objekte relativ zum VR-Headset berechnet.

Sie können mehr über die Verwendung von ARToolKit für VR auf der offiziellen GitHub-Seite oder auf der A-Frame-Website erfahren. Dort finden Sie auch einige Beispiele und Tutorials, wie Sie ARToolKit für VR-Projekte nutzen können.

Welche VR-Headsets werden von ARToolKit unterstützt?

ARToolKit ist eine Open Source SDK für die Erstellung von AR-Anwendungen, die virtuelle Bilder auf die reale Umgebung überlagern. ARToolKit unterstützt verschiedene VR-Headsets, die mit einem Computer verbunden sind, wie zum Beispiel:

• Oculus Rift: Ein beliebtes VR-Headset, das ein immersives und hochauflösendes VR-Erlebnis bietet. ARToolKit kann mit dem Oculus Rift SDK integriert werden, um AR-Inhalte auf dem Headset anzuzeigen.
• Valve Index: Ein fortschrittliches VR-Headset, das ein breites Sichtfeld und eine hohe Bildwiederholrate bietet. ARToolKit kann mit dem SteamVR SDK integriert werden, um AR-Inhalte auf dem Headset anzuzeigen.
• PlayStation VR: Ein VR-Headset, das mit der PlayStation 4 oder 5 Konsole kompatibel ist. ARToolKit kann mit dem PlayStation VR SDK integriert werden, um AR-Inhalte auf dem Headset anzuzeigen.

Wie unterscheiden sich Open-Source-Tools von proprietären Tools für Web-AR

Open-Source-Tools für Web AR bieten Entwicklern eine kostengünstige und zugängliche Möglichkeit, AR-Erlebnisse zu schaffen, da es keine Notwendigkeit gibt, eine separate App zu entwickeln und zu veröffentlichen. Im Gegensatz dazu sind proprietäre Tools für Web AR in der Regel kostenpflichtig und erfordern eine separate App-Entwicklung. Open-Source-Tools bieten Entwicklern auch mehr Flexibilität und Kontrolle über den Code, da sie den Quellcode anpassen und erweitern können. Proprietäre Tools bieten in der Regel eine benutzerfreundlichere Oberfläche und eine breitere Palette von Funktionen, die für bestimmte Anwendungen erforderlich sein können. Es ist wichtig zu beachten, dass die Wahl zwischen Open-Source- und proprietären Tools von den spezifischen Anforderungen und Zielen des Projekts abhängt.

Beispiele für Web AR

Web AR ist eine Technologie, die es ermöglicht, Augmented Reality (AR) Erlebnisse in einem mobilen oder Web-Browser zu erleben. AR ist die Erweiterung der realen Welt mit digitalen Inhalten, wie Bildern, Videos, 3D-Modellen oder Animationen. Web AR ist von traditioneller AR unterschiedlich, weil es nicht erfordert, dass der Nutzer spezielle Apps, Software oder Geräte herunterlädt oder kauft.

Mit Web AR können Sie einfach AR Erlebnisse über das Internet teilen, ohne eine App zu benötigen. Sie müssen nur Ihre Nutzer zu einer bestimmten URL schicken, und schon können sie mit Ihrer digitalen Erfahrung interagieren. Web AR kann für verschiedene Zwecke verwendet werden, wie Marketing, Bildung, E-Commerce oder Unterhaltung. Zum Beispiel können Sie mit Web AR:

• Ihre Visitenkarte mit AR 3D-Modellen, Bildern, Videos oder Hologrammen verbessern.
• Ihren Nutzern erlauben, Ihre Produkte in ihrem eigenen Zuhause mit interaktiven Produktvorführungen zu sehen.
• Immobilien in einer visuellen Weise mit 3D-Vorschauen präsentieren, die es ihnen ermöglichen, um ihr zukünftiges Zuhause herumzulaufen und die Details zu erkunden.
• Geführte Touren oder Mitarbeitertrainings auf ein neues Level bringen mit einem AR-Führer, der ihnen die Sehenswürdigkeiten zeigt und erklärt.
• Digitale Charaktere zu gedruckter Werbung hinzufügen, um ein unvergessliches Erlebnis zu schaffen und die Markenbekanntheit zu erhöhen.
• Eine visuelle Vorschau Ihrer Fahrzeuge erstellen, um ihren zukünftigen Besitzern zu ermöglichen, sie ohne einen Besuch beim Händler zu erleben.

Um Web AR zu erstellen, benötigen Sie keine Programmier- oder 3D-Fähigkeiten. Sie können verschiedene Plattformen nutzen, um Web AR-Projekte mit einem einfachen Drag-and-Drop-Editor zu erstellen und zu verwalten. Einige Beispiele für solche Plattformen sind:

• MyWebAR: Eine Plattform zur Erstellung von Web AR für Marketing, Bildung und E-Commerce.
• Web-AR.Studio: Eine Plattform zur Erstellung von Web AR-Fotos ohne Code.
• VNTANA: Eine Plattform zur Erstellung von Web AR für E-Commerce und Produktdemonstrationen.

---