Site icon Atelier für 3D-Visualisierungen, V/AR. Produktvisualisierung und Rendering. ❤ r23

Was ist Web AR und wie funktioniert es?

Ralf Dreiundzwanzig

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 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.:

Es gibt verschiedene Plattformen und Tools, die es ermöglichen, Web-AR-Erlebnisse zu erstellen. Die Anwendungen von Web AR sind nur durch die 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 ist1.

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 Leistung2:

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:

Sie können mehr über die Verwendung von ARToolKit in der offiziellen Dokumentation4 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: 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.

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 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 verwenden?

Um 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 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 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 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 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:

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:

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:

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:

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:

Exit mobile version