PAGE online

WebGL-Tutorial: So optimiert ihr 3D-Avatare!

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.

Pia Heuge erklärt, worauf sie beim Design und der technischen Umsetzung der 3D-Avatare für WebGL achten musste
Dem fertigen Modell sieht man die ganze Performanceoptimierung gar nicht an! Die Formen und Strukturen sind klar definiert und die Mate­ria­lien 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 phy­sikbasierte Rendering (PBR) von WebGL voll bedienen. Außerdem erlaubt uns das relativ neue Dateiformat glTF/GLB für dreidimensiona­le Sze­nen und Modelle, das komplexe Material-Set-up unserer Avatare für Browser sowie App anzu­wenden. GlTF steht für Graphics Language Trans­mission Format, die Binärversion heißt GLB und ermöglicht das Speichern aller Assets in nur einer Datei, wodurch wir Dateigröße und Laufzeitver­arbeitung 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 Ober­flächen legten.

Step1: Die Optimierung des Avatars in WebGL beginnt schon in der Konzeptphase

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.

 

Step2: Referenzmodell anfertigen

Dazu bäckt man die Details in eine Textur, die ebenfalls nicht größer als 512 mal 512 Pixel sein darf. Deshalb musste ich beim High Poly trotzdem darauf achten, dass die Formen nicht zu kleinteilig sind, und verzichtete auf Oberflächenstruktur. Für eine gute Balance aus schneller Arbeit und gutem Ergebnis erhielten außerdem nicht alle Modellteile den gleichen Detailgrad. Ich habe den High Poly zum einen per Box-Modelling in der Smooth-Mesh-Preview von Maya erstellt und dann in Polygone umgewandelt und zum anderen in der Sculpting-Software ZBrush modelliert, denn sie eignet sich besser für kleinteilige Details.

3. Arbeitsmodell nachzeichnen

Für das Arbeitsmodell mit niedrigerer Polygonanzahl nutzt man das Referenzmodell und zeichnet einzelne neue Polygone auf seine Oberfläche. Man ahmt die vorher festge­legten Formen so nach, dass sie möglichst genau passen, aber nicht zu sehr ins Detail gehen. Einzelheiten wie weiche Kanten und Verläufe von einer Form zur anderen muss man nicht ins Low Poly übernehmen, so­lange sie nicht zur Silhouette und Formen­sprache des Modells beitragen. Als Richt­linie: Unsere Avatare bewegen sich alle ungefähr im Bereich von 6000 Vertices oder 12 000 Triangles. Da es nach diesem Schritt schwierig ist, noch etwas am Design zu ändern, sollten Art Director oder Kunde hier auf jeden Fall im Loop sein.

Step 3: Arbeitsmodell nachzeichnen Step 3 im WebGl-Tutorial: Arbeitsmodell nachzeichnen

4. UV-Layouts in Maya berechnen

Als Vorbereitung auf das Texturieren zer­legen wir in diesem Schritt das 3D-Modell in eine 2D-Repräsentation. Das nennt man UV-Mapping, wobei U und V für die Textur­koordinaten stehen. Wir legen für ein Modell einzel­ne UV-Layouts an, sodass wir in Substance Painter ­später einer sogenannten UV-Shell eine bestimmte ­Farbe geben können. Ich achte also darauf, dass alle Kanten, an denen sich zwei Farben treffen, separiert sind. Ein Trick: Alle Teile des Modells, die symmetrisch auf beiden Seiten der x-Achse vorhanden sind, wie Hände oder Schuhe, kann ich auf einer Seite löschen. Ich layoute die UVs und spiegle die fehlenden Teile wieder zurück. Damit verbraucht das Modell weniger UV-Space, und die Texturen lassen sich größer anzeigen.

Wir legen für ein Modell einzel­ne UV-Layouts an

Außerdem stelle ich hier schon die richtige Auflösung ein (512 mal 512 Pixel), damit Maya die perfek­te Shell-Größe ausrechnet. Mittels Padding vergrößere ich den Abstand zwischen den einzelnen UV-Shells, damit später keine unschönen Farbverläufe zwischen den Teilen entstehen. Am Schluss passe ich jede UV-Shell an, bis die Projektion der Textur möglichst wenig verzerrt ist.

Step 4: UV-Layouts in Maya berechnen

5. Texturen backen und Farbe auf das Modell bringen

Das Baking führe ich in Substance Painter durch. Ich lade das Arbeitsmodell mit vor­bereite­tem UV-Layout zusammen mit dem Re­fe­renzmodell in das Programm. Es berechnet auf einen Klick, welche Punkte des Low-Poly-Modells dem des High-Poly-Modells am nächsten sind, und schreibt diese Information ins UV-Layout. Dadurch entstehen verschiedene Texture-Maps, die jeweils anders berechnet werden und andere Zwecke erfüllen.

In unserem Fall wollten wir das Physically-Based Rendering (PBR) von WebGL voll ausnutzen, und so erstellte ich zuerst eine Normal-Map und eine Ambient-Occlusion-Map. Daraus ließen sich dann relativ leicht eine Color-Map, eine Roughness- und Metal-Map sowie die Emissive-Map erstellen. Dafür lege ich für jede Oberfläche eine neue Füllebene an und weise sie über eine Schwarz-Weiß-Maske jenen UV-Shells zu, die diese Oberfläche erhalten sollen. Alle Maps zusammen ergeben dann ein vollständiges PBR-Material, das zwar pro Avatar immer noch sechs Texture-Maps enthält, aber da wir ja optimiert haben, dürfen wir hier so viele Texturen nutzen.

6. Animationen optimieren

Sobald alle Texturen den Anforderungen entsprechen, beginne ich mit dem Skinning und Rigging des Arbeitsmodells. Hier gibt es nicht besonders viele Möglichkeiten der Optimie­rung, wir haben aber darauf geachtet, dass jedes Mo­dell genau auf dasselbe Skelett-Rig passt, damit wir nicht für jeden Avatar ein eigenes Animationsset bauen müssen. Außerdem haben wir nicht alle Finger animiert, sondern nur die Daumen und den Rest der Hand. Das fällt in der dunklen Umgebung und in Bewegung nicht auf und ist in der Anwendung ohnehin nicht von Bedeutung.

Step 6: Animationen optimieren

Die Animationen speichern wir als .fbx-Dateien und wenden sie für einen Nutzer auf alle Modelle gleichzeitig an. Angezeigt wird aber nur das Modell, das der User gewählt hat, alle anderen bleiben versteckt. So müssen wir nur eine Datei mit allen Avataren und allen Animationen hochladen.

7. Ins GLB-Format exportieren

GLB-Dateien repräsentieren 3D-Modelle in einem binären Format. Es erlaubt uns, PBR auch in WebGL voll auszunutzen, und ist außerdem das Format, mit dem sich auf Android-Endgeräten Augmented Reality darstellen lässt. Im letzten Schritt wandelte ich also über den Babylon Exporter meine Materials aus Maya automatisch in PBR-fähige GLB-Materials um. Das Tool teilt auch sämtliche Animationen in einzelne Tracks auf und bietet einen Webviewer zum Prüfen des Modells. Wir haben viele unterschiedliche Workflows, Plug-ins und Exporter ausprobiert, bis wir diesen Ansatz gefunden haben. Das Format Binary GL Transmission ist noch nicht sehr verbreitet, das wird sich aber ­sicher in Zukunft ändern.

3D Artist Pia Heugel3D Artist Pia Heugel arbeitet trotz räumlicher Trennung immer eng mit ihrem Team zusammen, um Fehler von vornherein zu vermeiden und Zeit zu sparen.

 

 

 

 

 

 

WebGL-DJ-Party von Demodern

Für ein Albumrelease-Live-Event schuf die Digitalagentur Demodern eine virtuelle Klublandschaft, in der das Publikum als 3D-Avatar unbeschwert feiern kann. Die ganze Story ist zuerst in PAGE 05.2021 erschienen.

PDF-Download: PAGE 05.2021

Kalkulation: Das ist Design wert ++ 3D animation with Blender ++ Buchgestaltung ++ Kleine & mittels-tändische Kunden ++ WebGL-DJ-Party ++ Fontfamilie für den Cornelsen Verlag ++ Spezialpapiere für Packa-gings & Co

8,80 €
AGB

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren