Wie WebAR-Experiences entwickelt werden

In Teil 2 unserer Reihe geht es um die verschiedenen Möglichkeiten, die AR-Technologie bietet. Dabei werden auch Fragen zur Funktionsweise von Web AR beantwortet. 
Von:
José Burga
February 23, 2021
November 6, 2020

Web AR Experiences sind aktuell beliebter denn je – auf Kundenseite, aber auch auf Seiten der Unternehmen. Da sie Verbraucher interaktiv einbeziehen, ermöglichen AR Experiences außergewöhnliche Customer Journeys. In unserer Reihe “Behind the Tech” beschäftigen wir uns daher mit dem Thema Web AR und geben Einblicke in die Entstehung der Experiences. Im ersten Teil geht es um die verschiedenen Entstehungsphasen von Web AR. Hier gelangen Sie zum Artikel.


Eine Agentur wird Ihnen derartige Überlegungen in der Regel weitgehend abnehmen und Sie zum günstigsten Vorgehen beraten. Rechnen Sie jedoch damit, dass sich nur äußerst selten eine maßgeschneiderte Web AR-Experience für eine Marke oder ein Unternehmen aus generischen, vollkommen unbearbeiteten Objekten aus einem 3D-Webportal “zusammenkaufen” lässt. 

Sammeln Sie deshalb insbesondere bei sehr klaren eigenen Vorstellungen bereits vor der Storyboardphase möglichen Input, den Sie den Designern für das Design Ihrer Welt oder den Objekten in ihr mit an die Hand geben können. Das können beispielsweise Referenzbilder aus Best Practice-Beispielen von AR-Experiences, Vorschläge für Oberflächen-Texturen oder auch Blueprints von 3D Objekten sein.

Die Agentur wird einerseits geeignete Objekte auf 3D-Webportalen recherchieren, für Ihre Experience erwerben und – falls nötig – Farben, Texturen oder auch die Geometrie der Objekte soweit bearbeiten, bis sie den qualitativen Anforderungen an Optik und Performance entsprechen. Andererseits werden die Entwickler spezielle Objekte von Grund auf modellieren müssen. Zeitfresser – insbesondere in realistischen, hochpolygonierten Experiences – sind hierbei vor allem Renderzeiten. Denn je mehr Polygone ein Objekt besitzt, desto mehr Processing Power muss für das Rendering aufgewandt werden.

Mehr Details bedeuten höheren Zeitaufwand

Auch das Gegenteil, also das nachträgliche Reduzieren von Polygonen, kann in einem Projekt sehr viel Zeit beanspruchen. Dies tritt beispielsweise dann auf, wenn äußerst detaillierte CAD-Daten eines technischen Produkts die Grundlage für eine Animation bilden sollen. Oft enthalten derartige Daten eine große Menge Details, die für die eigentliche Experience nicht notwendig sind, z. B. kleine Schrauben und Teile in einem Motormodell. Diese muss der Entwickler nachträglich “herausrechnen”.

Wenn Sie sich beim Look Ihrer Welt nicht für die Low Poly-Variante entschieden haben, sollten Sie auch beim Modellieren und Animieren von 3D-Vegetation, aber auch sonstigem “Beiwerk” wie Wolken oder Flüssigkeiten mit einem höherem Zeit- und Kostenaufwand rechnen. Selbst wenn derartige Assets gekauft werden können, sind sie oft teuer und hochpolygoniert. Letzteres sollte keinesfalls dazu führen, dass die eigentlichen Fokus-Objekte darunter leiden, etwa weil sich die Framerate der Experience verringert. Das macht sich meist in ruckeligen Animationen oder einer Verzögerung bei der Bewegung des Smartphones um ein Objekt herum bemerkbar. Deshalb ist auch hier eine Reduzierung in der Regel sinnvoll.


Arbeitsprozesse hinter 3D-Animationen verstehen

Apropos Animationen: Sehr wahrscheinlich wird Ihre Experience animierte Objekte enthalten. Auch hier gilt es zu überlegen, welche Animationen als Preset direkt aus einer 3D -Software exportiert werden sollten und welche das Entwickler-Team selbstständig im Code herstellen kann. Relativ einfach im Code herzustellende Animationen sind etwa konstante Rotationen eines Objekts oder eine Bewegung von einem Punkt A zu einem Punkt B. Sie sind auch nachträglich sehr flexibel. Wenn zum Beispiel der Rotationskreis zu groß oder zu klein angelegt wurde oder ein Objekt aus einer zu großen Höhe einschwebt, kann der Entwickler dies sehr einfach ändern.

Hier kostenlos downloaden!


Bei komplexeren Animationen, wie z. B. einer Skeleton-Animation, ist eine nachträgliche Anpassung im Code der Web AR Experience wesentlich aufwendiger. Warum? 3D-Animationen werden – ähnlich wie auch Zeichentrickfilme – immer noch mit sogenannten Keyframes erarbeitet. Das sind Schlüsselbilder, die etwa den Start- und den Endpunkt einer Bewegung vorgeben. Beim Zeichentrickfilm gibt der “Keyframer” derartige Punkte in “Schlüsselbildern” oder eben “Keyframes” vor, der “Inbetweener” zeichnet alle Bilder dazwischen (“Interframes”), die das Ganze schließlich zu einer flüssigen Bewegung machen. 

Auch bei 3D-Animationen gibt es Keyframes und Interframes. Was bedeutet das für unsere beispielhafte Skeleton-Animation? Ein Standard-3D-Skeleton besteht aus 65 Knochen, die bei Bewegungen in einer großen Abhängigkeit zueinander stehen. Verändert der Entwickler das Keyframe A einer Bewegung, z. B. die Stellung des rechten Beins, müssen dazu nicht nur die einzelnen Parameter der betreffenden “Knochen” innerhalb des Beins für das Keyframe A im Code geändert werden, sondern auch die aller folgenden Interframes. Andernfalls sähe die Bewegung unnatürlich aus.

So arbeitet ein Entwickler

In der Praxis bedeutet dies, dass die Keyframes der zu ändernden Animation in einer 3D-Animation-Software nochmals von Grund auf neu durch den Entwickler festgelegt werden müssen. Die Software übernimmt die Berechnung aller Interframes und der Entwickler kann wesentlich schneller kontrollieren, ob der Bewegungsablauf stimmig ist und natürlich aussieht. Zwar bleibt der Aufwand unter Umständen trotz Nutzung der Software hoch, er ist im Vergleich zum händischen Schreiben des Codes jedoch wesentlich geringer.

Der Entwickler kann den fertigen Code der neuen Animation schließlich aus der 3D-Software exportieren und in den Code der Web AR-Umgebung einbetten. Bestimmte Daten müssen direkt im Objekt gespeichert werden. Diesen Vorgang nennt man im Fachjargon “backen”. Das Backen stellt einerseits sicher, dass Lichtreflexionen, Schatten und Texturen des Objekts beim Export erhalten bleiben. 

Andererseits können durch das Backen auch Animationsdaten in der Geometrie des Objektes gespeichert werden. Auf diese Weise gehen die Animationsdaten bei einem Export nicht verloren. Je nach Komplexität der Animation bedeutet auch dies einen größeren zeitlichen Aufwand. Gängige web-freundliche 3D-Formate für den Export sind etwa GLTF oder GLB.


Entwicklung und UX-Design

Da wir eine interaktive, virtuelle Welt in 3D erschaffen, sind die Arbeitsschritte im Development der Experience ähnlich wie bei einem klassischen Game Development. Zunächst werden alle exportierten 3D-Assets und zusätzlich auch allen anderen benötigten Assets, wie typografische Elemente oder Sounddateien, in die Entwicklungsumgebung importiert. In der Regel lassen sich in dieser Phase auch noch Optimierungen am Look vornehmen und weitere visuelle Effekte, wie z. B. Bloom-, Glare- oder Particle-Effekte (jeweils Bilder) hinzufügen, etwa um Produkte attraktiver oder emotionaler zu präsentieren. 

Auf der Grundlage des Storyboards und aller Assets wird nun die eigentliche Logik der Experience programmiert. Entscheidend ist hierbei ein gut durchdachtes UX Design, das den User zum spielerischen Entdecken der Experience durch Interaktion mit der virtuellen Welt animiert. Durch Taps und GUIs (Graphical User Interfaces) können nun Interaktionen mit den Assets verknüpft werden. In der oben beschriebenen Skeleton-Animation könnte das etwa das Heben des Beines bei einem Tap auf den Screen sein, bei zwei Taps das Senken o.ä. Hier kommt es ganz auf das zuvor definierte Konzept, die Storyline und das UX-Design der Experience an.


Content selbst verwalten

Abschließend sei noch erwähnt, dass es für Kunden grundsätzlich günstig ist, selbstständig die Web Experience verwalten und editieren zu können. Hierzu sollte die Agentur – ähnlich wie bei einer Homepage – den Zugang zu einem Content Management System (CMS) anlegen. Dies kann insbesondere bei häufig wechselnden Informationen Zeit und Kosten sparen. 

Sicherlich gibt es noch viele weitere Aspekte, die zum optimalen Gelingen eines WebAR-Projekts beitragen. Mit dem hier dargestellten Hintergrundwissen bewegen Sie sich jedoch definitiv auf einem sehr guten Niveau, um den Start Ihres eigenen Web AR-Projekts erfolgreich mit dem Dienstleister Ihrer Wahl zu gestalten.