Pia Heugel, 3D Artist bei Demodern, erklärt, worauf sie beim Design und der technischen Umsetzung der 3D-Avatare für WebGL achten musste, damit sie im Browser gut aussehen und performant laufen.
Dem fertigen Modell sieht man die ganze Performanceoptimierung gar nicht an! Die Formen und Strukturen sind klar definiert und die Materialien für den Einbau in das Projekt vorbereitet. Genau dieses Modell werden die User später auch durch die Experience bewegen können
Für möglichst effiziente Avatare gibt es verschiedene Optimierungsmaßnahmen: Wir verwenden nur ein einziges Material pro Avatar, reduzieren die Größen aller Texturen oder lassen Animationen weg. Da wir im Environment selbst außer Lightmaps keine Texturen verwendeten, konnten wir hier mehr davon nutzen und das physikbasierte Rendering (PBR) von WebGL voll bedienen. Außerdem erlaubt uns das relativ neue Dateiformat glTF/GLB für dreidimensionale Szenen und Modelle, das komplexe Material-Set-up unserer Avatare für Browser sowie App anzuwenden. GlTF steht für Graphics Language Transmission Format, die Binärversion heißt GLB und ermöglicht das Speichern aller Assets in nur einer Datei, wodurch wir Dateigröße und Laufzeitverarbeitung minimieren.
Mit diesem Workflow in derzeit fünf Programmen erzielen wir performante, präzise und hochwertig ausgeleuchtete Charaktere. Ich verwende:
Autodesk Maya,
Babylon Exporter für Maya,
AdvancedSkeleton für Maya,
ZBrush und
Substance Painter.
Step-by-step: 3D-Avatare für WebGL optimieren
1. Konzept erstellen
Optimierung beginnt schon in der Konzeptphase, denn viele visuelle Details wie beispielsweise Reflexionen und Schatten sind in einer in WebGL entwickelten Szenerie nicht so einfach umzusetzen, ohne dass dafür andere Features wegfallen – es geht von vornherein um Priorisierung. Damit die Anwendung zudem auf möglichst vielen Gerätetypen läuft, sollte man grundsätzlich sparsam mit Texturen umgehen, um die Prozessorlast zu reduzieren. Wir beschlossen deshalb schon sehr früh, dass unsere Texturen höchstens 512 mal 512 Pixel groß sein sollten. Detaillierte Muster sind da schwierig darzustellen, sodass wir den Fokus auf plakative Farben, große Formen und einfache Oberflächen legten.
2. Referenzmodell anfertigen
Die Anzahl der zu rendernden Polygone ist wichtig bei der Optimierung – je weniger, desto besser. Um sie zu reduzieren, aber trotzdem ein detailliertes Modell zu erhalten, nutze ich den High-Poly-to-Low-Poly-Workflow. Das heißt, dass ich ein Referenzmodell (High Poly) erstelle, das so viele Polygone enthalten kann, wie ich will. Anschließend fertige ich ein gröberes Arbeitsmodell (Low Poly). Per Offline-Raycasting projizieren wir dann in der Anwendung die Details des Referenzmodells auf das Arbeitsmodell.
