Web AR-Integration: Erwecken Sie Ihre Produkte zum Leben

Web-AR bezeichnet das Einfügen von 2D- oder 3D-Computergrafiken in Bilder der realen Welt in Echtzeit direkt auf einer Website. Man greift auf diese Art von Erfahrung direkt über den Webbrowser zu und nicht über eine Anwendung. So können Sie über Google chrome, safari oder Mozilla Firefox darauf zugreifen. Diese Technologie ermöglicht es, den Upload live durchzuführen, ohne dass der Nutzer auch nur eine Handy- oder Tablet-App aufrufen muss. Diese Art von Erfahrung ist für die meisten Menschen zugänglich und wird mithilfe der beiden Systeme AR Kit (iOS) und AR Core (Android) bereitgestellt. Sie verwendet unter anderem WebGL, WebVR, WebRTC. Dadurch kann der Nutzer in Szenen eintauchen, die Animationen, Videos, 3D-Modelle & alles auf interaktive Weise beinhalten. Die WebAR unterstützt auch die Bilderkennung. Kurz gesagt, sie bricht die Barrieren und macht die erweiterte Realität über einen QR-Code oder einen Link zugänglich.

AR hat das Feld der Möglichkeiten geöffnet und ist bereits im Alltag vieler von uns präsent. Viele Anwendungen nutzen sie und wir nutzen sie, ohne es zu merken. Dies ist auf Instagram und Snapchat über Filter & Effekte der Fall, aber auch in Apps wie IKEA place oder LEGO. Diese fehlenden Apps sind jedoch sehr schwer zu laden und erfordern viele Aktionen. Web-AR wirkt dem entgegen, indem es einfache, aber zugängliche Erlebnisse mit möglichst wenig Hemmungen bietet. Auch kann man bereits nach einem Löwen googeln und erhält direkt ein animiertes 3D-Modell vor sich. Die Anwendungsfälle sind breiter gefächert: E-Commerce, Forschung, Gesundheit, Bildung, Business & Entertainment. So können Sie jetzt eine Brille anprobieren und direkt die Farbe ändern, um zu sehen, was Ihnen am besten passt. Sie können auch ein Auto vor sich hinstellen, wenn Sie es in Ihrem Autohaus nicht vorrätig haben. Es ist möglich, Körperteile direkt darzustellen und ihre Funktion als Overlay für Medizinstudenten zu zeigen. Ein weiteres, nicht weniger wichtiges Beispiel ist das Spielen. Mit Web-AR werden Sie in der Lage sein, Spiele zu spielen, indem Sie direkt von Ihrem Smartphone aus mit Elementen aus der Realität interagieren.

ARCore bezeichnet das AR-Framework von Android, während ARKit das Gleiche für Apples iOS ist. Diese Frameworks ermöglichen es den Entwicklern, die fortschrittlichsten AR-Tools zu nutzen, um ein möglichst immersives und realistisches Erlebnis zu ermöglichen. So ist es dank dieser Werkzeuge möglich, dass Entwickler Elemente wie Motion Tracking oder Ähnliches hinzufügen können. Dadurch können die Geräte ihre Beziehung zur Umwelt besser verstehen. Ebenso ermöglichen Tools wie ARCore und ARKit Telefonen, die Größe und Position von Dingen wie Tischen und Stühlen zu schätzen, um ein realistischeres Gefühl in jeder Umgebung zu vermitteln. Um dies zu erreichen, nutzen ARCore & ARkit die verschiedenen Sensoren des Smartphones, um horizontale Oberflächen zu erkennen, aber auch um die Bewegungen des Telefons zu berücksichtigen und das in den Raum einfallende Licht zu schätzen, um die virtuellen Objekte realistisch und entsprechend der Umgebung beleuchten zu können.

Beide Technologien nutzen die folgenden Funktionen, um virtuelle Inhalte in die reale Welt zu integrieren:

• Bewegungsverfolgung – um die Position in der realen Welt zu verfolgen.
• Verständnis der Umgebung (Größen, Standorte, Winkel, Formen, Punkte und Plan)
• Lichtschätzung – um Informationen über die Beleuchtung zu erfassen.

Dennoch gibt es Unterschiede zwischen ARKit und ARCore :

Das Google SDK verfolgt mehr Punkte & Merkmale, aber das ARKit erkennt horizontale und vertikale Oberflächen genauer als ARCore. Auch Die letzten Updates haben ARKit einige Vorteile gebracht (Personenabschattung, Bewegungserfassung, gleichzeitige Front- und Rückkamera, Verfolgung mehrerer Gesichter, kollaborative Sitzungen).

8th Wall bezeichnet eine der führenden Web-AR-Lösungen, die am weitesten auf dem Markt verbreitet sind. 8th Wall bietet Entwicklungswerkzeuge zur Erstellung und Bereitstellung von Augmented-Reality-Erlebnissen im Web für Agenturen, Marken & Content Creators. Mit seinem Editor 8th Wall bietet Wall leistungsstarke Funktionen wie World Tracking, Gesichtseffekte und Bilderkennung. Diese werden über das Web bereitgestellt, ohne dass die Nutzer eine Anwendung herunterladen müssen. Das Framework von 8th Wall verwendet JavaScript- und WebGL-Bibliotheken und unterstützt die gängigsten 3D-Frameworks, darunter A-Frame, three.js, babylon.js, Amazon Sumerian und Play Canvas. Die Anzahl der Möglichkeiten an der 8th wall ist unendlich und ermöglicht komplexe und tiefgehende Erfahrungen wie Spiele oder AR-Kunstwerke. 8th Wall hat außerdem vor kurzem die Technologie Curved Image Target eingeführt, die Entwicklern neue Werkzeuge an die Hand gibt, um gekrümmte Oberflächen wie Tassen, Dosen und viele andere Objekte mithilfe von webbasierter Augmented Reality zum Leben zu erwecken.

Wenn man einen Augmented-Reality-Effekt im Web realisiert, spielen mehrere Komponenten eine Rolle, um den Preis zu schätzen. So ist es wichtig zu wissen, ob die Erfahrung 3D- oder 2D-Designs, Animationen, Partikel, einen Picker, besondere Aktionen oder auch andere Elemente enthalten wird. Dies ermöglicht eine genaue Schätzung. Dennoch ist es möglich, mehrere Preise und Spannen je nach Typologie des Effekts anzugeben:

• Einfache Produktintegration in 3D -> zwischen 500€ und 5000€.
• Face animation (8th wall) -> zwischen 2000€ und 30.000€.
• AR-Spiele (8th wall) -> zwischen 5.000€ und 50.000€.
• Bilderkennung -> zwischen 4000€ und 50.000€.
• Anprobe von Brillen oder Accessoires in Echtzeit -> zwischen 1500€ und 35.000€.
• Farb-/Kunst-/Lichteffekte -> zwischen 1500€ und 20.000€.
• Make-up -> zwischen 2500€ und 30.000€.

Zu diesem Produktionsanteil kommen noch Abonnementgebühren auf 8th wall zwischen 1250 $ und 5000 $ hinzu, je nach Anzahl der Aufrufe. Es können auch Wartungsgebühren anfallen. Diese Zahlen sind ungefähre Angaben und können je nach Projekt, Deadline und bereitgestellten Assets variieren. Weitere Details finden Sie auf unserer Seite Preise und Gebühren!

Obwohl sie Smartphone-Nutzern mehr Möglichkeiten bietet, weisen WebAR-Erfahrungen recht begrenzte Eigenschaften auf. Die Leistung von Augmented Reality ist bei Anwendungen einfach besser. Dennoch ist die Begrenzung des Speichers der Webseite, die ein AR-Bild anzeigt, eines der Hindernisse für die Verbesserung der Leistung von Augmented Reality im Web.Darüber hinaus sind auch die Funktionen stärker eingeschränkt als bei der anwendungsbasierten Augmented Reality. Beispielsweise wird es schwieriger, Objekte an der Wand zu platzieren oder Messungen durchzuführen. Im Vergleich zum Entwicklungsprozess der anwendungsbasierten AR können die Entwickler während der Erstellung des WebAR-Erlebnisses nicht auf alle Fähigkeiten und Funktionen der Geräte zugreifen, für die sie es entwerfen. Sie können daher nur mit den grundlegenden Funktionen arbeiten. Die Geschwindigkeit des Internets ist ein weiterer Faktor, der die Qualität des Erlebnisses beeinflussen kann: Es muss so schnell wie möglich sein und ohne Unterbrechung funktionieren, da browserbasierte AR eine ständige Internetverbindung erfordert. Es scheint jedoch, dass dieses Problem mit der Einführung von 5G kein Thema mehr sein wird.

Mit Web AR können Sie Ihre Produkte mithilfe von 3D und Augmented Reality hervorheben und verkaufen. Mit diesem Medium können Sie Ihren Kunden ein völlig neues Erlebnis bieten. Diese können Ihre Produkte personalisieren, sie aus allen möglichen Winkeln betrachten und mit einem Klick können sie das Produkt in ihrer Umgebung mit einem atemberaubenden Realismus visualisieren, der diesen Wow-Effekt mit sich bringt! Dies bietet ihnen die Möglichkeit, ihre Fragen zu beantworten:

„Passt dieses Möbelstück in unser Wohnzimmer?“

„Wird diese Farbe für die Inneneinrichtung unseres Schlafzimmers geeignet sein? „.

„Wie sieht das Innere dieses neuen Autos aus?“

All dies sind Fragen, die die Kunden beantworten können, um eine bessere Kaufentscheidung zu treffen, was den Umsatz um mindestens 50 % steigert. Diese Bemühungen tragen auch zur Schonung der Umwelt bei, indem sie die Rücklauf- & Logistikraten im Prozess reduzieren.

Filtermaker generiert automatisch Script-Snippets (kleine Code-Schnipsel), die Informationen und Variablen zu Ihren Produkten enthalten. So werden die Dateien in den mit allen Browsern kompatiblen Formaten USDZ und GLB angezeigt. Sie sind auf Ihrer Seite als WebAR- und 3D-Konfigurator/Visionär sichtbar. Diese Funktionen können in wenigen Sekunden zu Ihrer Produktseite hinzugefügt werden. Ob Sie also Produkte benötigen, die in RA an einer Wand, auf dem Boden oder in einem offenen Raum angezeigt werden sollen, wir liefern Ihnen den Code, der zu Ihrer Art von Erfahrung passt.

Um 3D-Modelle auf einer Website zu visualisieren, ist die am weitesten verbreitete Technologie ein iFrame. Dieser ist ein Frame, der eine Seite innerhalb einer anderen Seite lädt.

Heutzutage sind die Google-Roboter, die Websites überprüfen, intelligent genug, um zu verstehen, dass das, was sich innerhalb des Rahmens befindet, nicht mit der Website in Verbindung steht und einer anderen Website gehört. So sind sie der Ansicht, dass der Inhalt dem Eigentümer des Konfigurators und/oder Viewers und nicht dem Verantwortlichen der Website gehört. 3D-Modelle wirken sich also nicht negativ auf das Laden und die SEO einer Website aus, sondern genau das Gegenteil ist der Fall.

Die 3D-Ansicht der Produkte ermöglicht es den Nutzern, das Produkt von allen Seiten kennenzulernen. Man kann sie heranzoomen, um sie aus nächster Nähe zu betrachten und sich jedes Detail anzusehen. Im Durchschnitt interagieren zukünftige Kunden länger als 20 Sekunden mit einem 3D-Konfigurator, +30 % sogar länger als 30 Sekunden. Diese hohe Interaktivität lässt nicht nur die Zeit, die mit der Vorlage verbracht wird, sondern auch die Verweildauer auf der Website um bis zu 200% ansteigen.

Zusammenfassend lässt sich sagen, dass jede zusätzliche Sekunde, die auf einer Seite einer Website verbracht wird, die Absprungrate verringert, d. h. den Prozentsatz der Besucher, die die Website verlassen, ohne weitere Seiten zu durchsuchen. In den Augen von Google bedeutet diese Art von Daten, dass der Inhalt sehr relevant ist und somit eine bessere Platzierung impliziert.

Die Einführung eines Konfigurators führt zu besseren Verkaufsergebnissen und ist ein überzeugendes Argument für Verbraucher auf der Suche nach dem für sie am besten geeigneten Produkt. Um ihre Erwartungen zu erfüllen und sie zu einer immer präziseren Auswahl zu führen, wurde eine Reihe von Funktionen in den Konfiguratoren entwickelt. Zu diesen gehören unter anderem:

• Die Wahl der Farbe
• Die Wahl des 3D-Modells (und seiner Varianten)
• Das Hinzufügen von anpassbaren Optionen
• Das Hinzufügen von Text und Merkmalen, die sich auf einen bestimmten Teil des Spiels beziehen
• Links zu einer externen Seite
• Ein Export der gewählten Optionen (Farben, Vorlage) als PDF-Datei
• Speichern der Konfiguration in Ihrer Galerie
• Ein Modul, das auf eine Zahlungsschnittstelle führt (wie Apple pay)

Darüber hinaus können die Modelle auf Aktionen über Gesten wie Klicks und Tapes auf dem Bildschirm reagieren. Diese Aktionen können visuelle Animationen (Partikel, Erscheinungen etc.), aber auch physische Animationen (Öffnen einer Fahrzeugtür) auslösen. Jede ihrer Aktionen ist anpassbar und hängt von der Vorlage & dem Experiment selbst ab.

Quick Look ist eine innovative Funktion, die Apple im Jahr 2018 eingeführt hat. Dieses Tool ermöglicht es E-Commerce-Anbietern, eine Vorschau ihrer Produkte in der erweiterten Realität anzuzeigen. Die Apfelmarke hat seitdem eine neue Funktion ihres Augmented-Reality-Tools (AR) Quick Look Anfang 2020 eingesetzt. Jetzt kann jeder iPhone- und iPad-Benutzer online einkaufen und eine Augmented-Reality-Vorschau seiner zukünftigen Einkäufe genießen, um zu überprüfen, ob sie sich gut in die Umgebung einfügen. Im Anschluss an diesen Prozess werden sie aufgefordert, auf eine Schaltfläche am unteren Rand ihres Bildschirms zu klicken. Diese Schaltfläche ermöglicht es ihnen, wenn ihre Zahlungsmethode registriert ist, ihren Kauf zu bestätigen und den angegebenen Betrag zu bezahlen. Das alles erleichtert den Weg zum Kauf und reduziert die Anzahl der notwendigen Aktionen vom Entdecken des Produkts bis zum Kaufabschluss. Diese Schaltfläche ist anpassbar und kann für verschiedene Zwecke verwendet werden. und kann auch dazu verwendet werden, einen Live-Chat hinzuzufügen, damit Kunden eventuelle Fragen zu einem Produkt direkt an die Verkäufer stellen können.