Optimierte Assets, also 3D-Scans und 3D-Modelle sind entscheidend für die Performance und Nutzererfahrung in WebXR-Anwendungen. Für dich als Designer, Architekten und Kreativdienstleister ist es daher essenziell, 3D-Modelle zu erstellen, die sowohl visuell ansprechend als auch ressourcenschonend sind.
In dem heutigen Beitrag zeige ich dir, wie du deine 3D-Assets für deine A-Frame und WebXR Anwendungen optimieren kannst, um eine flüssige und ansprechende Nutzererfahrung zu gewährleisten.
Die Darstellung von 3D-Inhalten mit WebXR und Aframe eröffnet erstmal viele spannende Möglichkeiten, stellt aber auch besondere Anforderungen an Performance und Nutzererfahrung. Hier sind die wichtigsten Gründe, warum du deine Assets und 3D-Modelle vorab optimieren solltest:
Web-Browser haben (noch) nicht die gleichen Ressourcen wie native VR-Anwendungen. Unoptimierte, große oder detailreiche 3D-Modelle können daher die Leistung erheblich beeinträchtigen, was zu langsamen Ladezeiten und ruckeligen Animationen führen kann.
WebXR-Inhalte können gängigerweise einfach per Link auf einer Vielzahl von Geräten aufgerufen werden. Das reicht von leistungsstarken PCs bis hin zu älteren Smartphones. Je nach Endgerät kann jedoch die Performance variieren.
Nicht jeder hat jederzeit Zugang zu schnellem Internet. Große, unoptimierte 3D-Dateien verursachen daher lange Ladezeiten und können so manche Nutzer frustrieren, besonders bei ruckeligen mobilen Datenverbindungen.
Schnelle und reibungslose Benutzererfahrungen mit deiner 3D Szene halten Nutzer länger auf deiner Webseite und verbessern somit auch dein Suchmaschinenranking (SEO). Mit vorab optimierten 3D-Modellen sorgst du dafür, dass deine Seite schneller lädt, was sowohl die User Experience (UX) als auch deine Sichtbarkeit im Web erhöht.
An einem simplen Fallbeispiel möchte ich dir nun die Optionen vorstellen, wie du ein 3D Asset- oder Modell vorab optimieren kannst. Dazu habe ich neulich einen 3D Scan gemacht, den ich nun für meine Aframe Szene vorbereite:
Um die Polygonanzahl deiner Modelle zu reduzieren:
Methoden zur Reduktion der Polygonanzahl: Verwende in Blender den Decimation Modifier, um die Anzahl der Vertices zu reduzieren, ohne die Sichtbarkeit der Details zu verlieren. Dieser bewirkt die Verringerung der Polygonanzahl, während er die Geometrie vereinfacht und die Form des Modells erhalten bleibt.
Als nächstes kannst du deine Texturen optimieren, um die Leistung zu verbessern. Oft bringen 3D Scans mit hochauflösenden Texturen große Datenmengen mit sich, die allerdings oft nicht notwendig sind.
Du kannst dazu die Textur im 'UV-Editing-Tab' aus blender exportieren und anschließend mit einem Bildbearbeitungsprogramm, kleiner skalieren und die Auflösung aufs Minimum reduzieren.
Für den erneuten Export kannst du Formate wie JPEG oder WebP verwenden, die eine gute Komprimierung bieten und dennoch qualitativ hochwertiges Bildmaterial liefern.
Falls du deine 3D-Modelle in blender animieren möchtest, achte darauf, diese zu vereinfachen. Um die Dateigröße weiter zu reduzieren und die Performance zu verbessern, kannst du beispielsweise die Anzahl der Keyframes klein halten und die Dauer der Animation verringern.
Falls du wiederkehrende Animationen erstellen möchtest könntest du beispielsweise mit einfachen Loops animieren und diese dann in Aframe unendlich wiedergeben lassen.
Zwei weitere effektive Strategien zur Optimierung sind der Einsatz von einfachen Shadern und damit die Reduktion der Materialkomplexität.
Shader sind kleine Programme, die auf dem Grafikprozessor ausgeführt werden und bestimmen, wie die Oberflächen deiner 3D-Objekte gerendert werden. Sie beeinflussen Aspekte wie Farbe, Helligkeit und Reflexion. Während komplexe Shader beeindruckende visuelle Effekte erzeugen, beanspruchen sie oft mehr Rechenleistung, was zu längeren Ladezeiten und ruckeligen Darstellungen führen kann.
<!-- Objekt mit komplexeren Shader (Phong-Shader) -->
<a-box
position="1 1 0"
material="shader: phong; color: #FF5722; metalness: 0.5; roughness: 0.1;"
></a-box>
Komplexe Shader:
Der Phong-Shader iefert detaillierte visuelle Effekte, einschließlich Glanz und Reflexionen. Diese Effekte können die Performance beeinträchtigen, insbesondere auf weniger leistungsfähigen Geräten.
<!-- Objekt mit einfachem Shader (Flat-Shader) -->
<a-box
position="-1 1 0"
material="shader: standard; color: #FF5722"
></a-box>
Einfache Shader:
Der Flat-Shader benötigt wesentlich weniger Rechenleistung, da er keine komplexen Beleuchtungseffekte berechnet. Dies macht ihn ideal für Anwendungen, bei denen Performance und Ladezeiten wichtiger sind als hochgradig realistische Darstellungen.
Für WebXR-Anwendungen ist das GLTF- und GLB Format zu empfehlen, da es eine effiziente Dateigröße und gute Unterstützung in modernen Browsern bietet.
Stelle beim Export Blender sicher, dass die richtigen Optionen gewählt sind, um die Modellgröße und -qualität für WebXR zu optimieren.
Wähle 'Compression', um die Dateigröße deines 3D-Modells zusätzlich zu komprimieren.
Mit den oben genannten Techniken kannst du 3D Scans, 3D-Modelle oder sonstige Assets für deine Aframe/ WebXR Szene optimieren und eine reibungslose Benutzererfahrung gewährleisten.
Meinen 3D Scan vom Anfang konnte ich durch die genannten Verfahren von anfangs 15 mb auf nun etwa 1 mb komprimieren - ohne jeglichen Qualitätsverlust und das sogar mit einer Animation! Ich würde sagen, das hat sich gelohnt.
Das Fazit
Das Optimieren von 3D-Assets für A-Frame und WebXR ist wichtig für die Leistungsfähigkeit und Benutzererfahrung deiner interaktiven Architekturvisualisierungen und 3D-Mockups.
Durch die Reduzierung von Vertices, die Komprimierung von Texturen, die Vereinfachung von Materialien und Shadern und letztlich den richtigen Exporteinstellungen aus blender kannst du sicherstellen, dass deine Modelle sowohl qualitativ hochwertig als auch performant sind.
Nutze diese Tipps gerne bei der nächsten Optimierung deiner 3D-Modelle und verbessere damit Performance und Benutzererfahrung deiner WebXR-Anwendungen!
Bis zum nächsten Mal.
