KI-generierte 3D-Modelle können Sie schnell von einer leeren Szene zu einer erkennbaren Stütze, einem Gebäude oder einer Kreatur bringen. Sie können auch mit dichter Topologie, fragmentierten Materialien, übergroßen Texturen, namenlosen Knoten oder Geometrie ankommen, die auf einem Plattenspieler harmlos aussieht, aber teuer wird, wenn sie über ein Spiellevel hinweg wiederholt werden.
Die Optimierung ist also nicht ein Knopf am Ende der Produktion, sondern eine Sequenz: Definieren, was das Asset tun muss, messen in einer repräsentativen Szene, entfernen Sie Abfall, vereinfachen Sie, was die Kamera nicht belohnen kann, komprimieren Sie die Lieferdateien und testen Sie erneut auf realen Geräten.
Das Ziel ist nicht die kleinstmögliche Datei, sondern ein zuverlässiges Asset, das schnell genug geladen wird, innerhalb des Szenenbudgets rendert, einfach zu debuggen bleibt und dennoch die beabsichtigte Silhouette und Materialsprache kommuniziert.
Kurzüberblick
Das Wichtigste
- Legen Sie ein Asset-Budget im Kontext der gesamten Szene fest, nicht aus einer Polygonzahl, die isoliert betrachtet wird.
- Beheben Sie doppelte Geometrie, versteckte Oberflächen, übermäßige Materialien, Transformationen und Texturabfälle, bevor Sie die Kompression anwenden.
- Die Geometriekompression reduziert die Übertragungsgröße, aber sie beseitigt nicht die Laufzeitkosten für das Zeichnen übermäßig komplexer Maschen.
- Führen Sie ein editierbares Quellmodell und exportieren Sie eine separate Lieferung GLB, die validiert, gemessen und sicher ersetzt werden kann.
Definieren Sie Browser-Ready, bevor Sie optimieren
Beginnen Sie mit der Aufgabe des Objekts. Ein Heldencharakter, der in der Nähe der Kamera gesehen wird, benötigt eine andere Geometrie- und Texturbehandlung als ein Hintergrundfelsen, der fünfzig Mal wiederholt wird. Ein statisches Wahrzeichen kann eine komplexere Silhouette tolerieren als ein enthäuteter Feind, dessen Eckpunkte in jedem Bild transformiert werden müssen.
Schreibe ein kleines Akzeptanzblatt, bevor du das Netz berührst. Nutze Bereiche nur als projektspezifische Leitplanken, dann verfeinere sie nach dem Profiling. Das hält das Team davon ab, eine beliebige Dreieckszählung als universelle Definition von Qualität zu behandeln.
| Haushaltsbereich | Frage zur Beantwortung | Nachweise für die Aufzeichnung |
|---|---|---|
| Visuelle Rolle | Wie nah kann die Kamera kommen und was muss lesbar bleiben? | Referenz-Screenshots in Nah-, Typischen und Fernen Entfernungen |
| Szenendichte | Wie viele Kopien oder ähnliche Assets erscheinen auf einmal? | Eine repräsentative Worst-Case-Szene |
| Tierkörperbeseitigung | Wie viele Maschen und Materialdurchläufe fügt eine Instanz hinzu? | Anrufe und Rendererstatistiken vor und nach |
| Speicher | Wie groß sind die decodierten Texturen und Geometrien auf dem Zielgerät? | Texturdimensionen, Formate und Gerätespeicherbeobachtungen |
| Lieferung | Was muss heruntergeladen werden, bevor der Spieler interagieren kann? | GLB Größe, Textur Nutzlast und Ladespur |
Messen Sie das Originalmodell in einer realen Szene
Importieren Sie das unberührte Asset in den gleichen Renderer, Beleuchtungsaufbau, Kamerabereich und Objektdichte, den das Spiel verwendet. Ein Modell, das an sich gut funktioniert, kann eine überfüllte Szene immer noch über das Budget bringen.
Eine Basislinie aufzeichnen: Dateigröße, Maschenweite und primitive Anzahl, Materialanzahl, Texturanzahl und -dimensionen, Animationsclips und sichtbare Rendering-Statistiken. Three.js zeigt Draw Calls, Dreiecke, Punkte, Linien, Geometrien und Texturen durch Renderer-Informationen; diese Werte sind nützlich für den Vergleich von Revisionen, auch wenn sie nicht alle Kosten auf Geräteebene erklären.
Nehmen Sie zwei oder drei Screenshots neben den Zahlen auf. Leistungsmessungen zeigen Ihnen, was sich geändert hat, während gepaarte Bilder zeigen, ob die Änderung die Silhouette, Schattierungen, UV-Nähte oder erkennbare Merkmale beschädigt hat.
- Testen Sie eine Kopie und die erwartete maximale Anzahl sichtbarer Kopien.
- Beinhaltet Animation, Transparenz, Schatten und Nachbearbeitung, die in der Produktion verwendet werden.
- Verwenden Sie mindestens ein leistungsschwächeres Zielgerät, anstatt sich nur auf einen Entwicklungs-Laptop zu verlassen.
- Halten Sie die Basislinie GLB, so dass spätere Regressionen reproduziert werden können.
Saubere Geometrie und Szenenhierarchie zuerst
Generierte Modelle enthalten oft die gleiche Art von strukturellem Abfall wie hastig zusammengebaute manuelle Assets: lose Teile, die im Modell verborgen sind, doppelte Oberflächen, winzige getrennte Komponenten, leere Knoten, nicht angewendete Transformationen und Topologie, die viel dichter sind als die Form erfordert.
Die Merkmale, die Identität tragen, schützen. Bei einem Gebäude können dies die Dachlinie, die Tür und der Fensterrhythmus sein. Bei einem Lebewesen können es Kopfprofile, Hände oder Zubehörformen sein. Bereiche, die flach auf dem Bildschirm bleiben, können normalerweise mehr Geometrie verlieren als eine Kontur, die den Himmel kreuzt.
Wenn das Objekt animiert, dann wird die Deformation nach jeder größeren Reduktion bestätigt. Ein Netz kann unverändert in einer Bindungsstellung aussehen und trotzdem an Schultern, Knien, Fingern oder Gesichtsgelenken zusammenbrechen. Zusätzliche Unterstützung um die Gelenke bewahren und die eigentlichen Animationsclips testen, nicht nur eine rotierende Vorschau.
Reduzieren Sie Draw Calls, ohne die Art Direction zu verflachen
Browser-Szenen sind oft durch die Anzahl der einzelnen Teile begrenzt, die der Renderer einreichen muss, nicht nur durch die Anzahl der Dreiecke. Zehn winzige Maschen mit zehn Materialien können ein schlechteres Lieferobjekt sein als ein sorgfältig verbundenes Maschennetz mit der gleichen sichtbaren Form.
Verschmelzen Sie statische Teile, wenn sie sich immer zusammen bewegen, verwenden Sie identische Geometrie durch Instancing wieder und konsolidieren Sie Materialien, die das gleiche Schattierungsmodell haben. Entfernen Sie Materialschlitze, die keine sichtbaren Gesichter mehr beeinflussen. Diese Änderungen sollten dem Szenenverhalten folgen: Verschmelzen Sie keine Tür in ein Gebäude, wenn das Gameplay es unabhängig öffnen muss.
Materialreduktion ist auch eine Kunstentscheidung. Jede Oberfläche in einem Atlas zu kombinieren kann Einreichungen speichern, aber das Verfassen, Mip-Verhalten oder zukünftige Varianten erschweren. Halten Sie separate Durchläufe, wenn sie einen echten Rendering-Bedürfnis kommunizieren, wie transparentes Glas oder emissive Zeichen, und entfernen Sie Trennungen, die nur existieren, weil die erzeugte Datei fragmentiert wurde.
Behandeln Sie Texturen als Laufzeitbudget, nicht nur als Bilddateien
Ein komprimiertes Bild kann auf der Festplatte klein aussehen und nach der Decodierung immer noch einen erheblichen GPU-Speicher belegen. Audit-Pixeldimensionen, Kanalnutzung, Alpha, Farbraum und wie viel Bildschirmfläche die Textur tatsächlich abdeckt. Eine Hintergrundstütze profitiert selten von der gleichen Auflösung wie ein Nahaufnahmezeichen.
Größere Texturen auf die höchste nützliche Detailebene für die Zielkamera. Packen Sie kompatible Graustufenkanäle, entfernen Sie unbenutzte Karten, vermeiden Sie Alpha, wenn das Material vollständig undurchsichtig ist, und verwenden Sie fliesenfähige Materialien, bei denen Wiederholung akzeptabel ist. Für Requisitenfamilien kann ein gemeinsamer Atlas oder eine Materialbibliothek sowohl die Konsistenz als auch das Batching verbessern.
KTX2/Basis Textur Delivery kann Netzwerk- und GPU-Kosten reduzieren, wenn Ihre Pipeline- und Zielbrowser sie unterstützen. Behandeln Sie die Konvertierung als visuellen QA-Schritt: Vergleichen Sie Gradienten, normale Details, transparente Kanten und Farbverschiebungen bei Spieldistanz, bevor Sie das Ergebnis genehmigen.
Komprimieren Sie die Lieferung GLB nach Visual QA
Sobald Geometrie, Hierarchie, Materialien und Texturen beabsichtigt sind, ist die Bereitstellungskomprimierung anzuwenden. Three.js GLTFLoader unterstützt gängige glTF-Pfade, einschließlich Draco-komprimierter Geometrie, Meshopt-komprimierter Maschen und KTX2-Texturen, wenn die entsprechenden Decoder konfiguriert sind.
Wählen Sie die Komprimierung auf der Grundlage des vollständigen Ladeerlebnisses. Ein kleinerer Download kann Decodercode und CPU-Zeit erfordern, also vergleichen Sie die Zeit mit dem ersten nützlichen Frame, anstatt die Dateigröße allein zu feiern. Mesh-Vereinfachung und Geometriekomprimierung lösen verschiedene Probleme: Vereinfachung reduziert das, was die GPU verarbeitet, während die Komprimierung hauptsächlich die Art und Weise reduziert, wie diese Daten übertragen und gespeichert werden.
glTF Transform bietet Inspect, Validate, Deduplicate, Preune, Simplifying, Resize, Textur Conversion und Computation Commands. Die Dokumentation warnt auch davor, dass ein Standard Optimiz Pass nicht für jede Szene ideal ist, weshalb Produktionsvoreinstellungen versioniert und überprüft werden sollten, anstatt blind angewendet zu werden.
Validieren auf Zielbrowsern und -geräten
Führen Sie einen glTF-Validierungspass aus und laden Sie dann das Lieferobjekt über den gleichen Produktionspfad, den das Spiel verwendet. Überprüfen Sie Konsolenwarnungen, fehlende Texturen, umgedrehte Normalen, defekte Animation, Farbraumunterschiede, transparente Sortierung und Entsorgung, wenn der Spieler die Szene verlässt.
Profilieren Sie eine repräsentative Ebene auf jeder unterstützten Leistungsebene. Achten Sie auf ein stabiles Frame-Erlebnis, aber prüfen Sie auch Ladepausen, Gedächtniswachstum nach wiederholten Szenenwechseln und Spikes, wenn mehrere Modelle zusammen erscheinen. Das richtige Ergebnis ist die Version, die Ihre Projektziele ohne offensichtlichen visuellen Verlust erfüllt.
Beenden Sie mit einem Ersatztest: Tauschen Sie das Asset gegen eine neue Überarbeitung, ohne den Gameplay-Code zu ändern. Vorhersehbare Knotennamen, Pivots, Skalierung, Materialkonventionen und Kollisionsproxies machen die Integration zukünftiger KI-generierter Varianten viel kostengünstiger.
- Bewahren Sie die editierbare High-Detail-Quelle außerhalb des versendeten Bundles auf.
- Versionieren Sie die Export- und Optimierungseinstellungen mit dem Asset.
- Vergleichen Sie Baseline und optimierte Screenshots bei Gameplay-Kamera-Abständen.
- Lehnen Sie eine kleinere Datei ab, wenn sie sichtbare Artefakte oder eine langsamere erste Interaktion verursacht.
- Dokumentieren Sie das genehmigte Liefermodell als Vorlage für die nächste Asset-Familie.
Häufig gestellte Fragen
Was ist die beste Polygonzahl für ein Browserspielmodell?
Es gibt keine universelle Zahl, da die Kosten von der Szenendichte, den Materialien, der Animation, den Schatten und den Zielgeräten abhängen.
Verbessert die Draco-Komprimierung die Frame-Rate?
Draco reduziert hauptsächlich die Geometrieübertragungsgröße und kann die Downloadkosten verbessern, es ersetzt nicht die Mesh-Vereinfachung oder reduziert die Anzahl der Draw-Aufrufe nach der Dekodierung des Modells.
Sollte jedes AI-generierte Modell auf GLB umgestellt werden?
GLB ist ein bequemer Liefercontainer für Browserlaufzeiten, die glTF unterstützen, aber die Wahl hängt immer noch von Ihrer Engine und Pipeline ab.Behalten Sie das editierbare Quellformat separat, damit die ausgelieferte Datei nicht zum Produktionsmaster wird.
Was soll ich zuerst optimieren: Polygone oder Texturen?
In einigen Szenen dominieren Texturgedächtnis und Materialzahl, während in anderen gehäutete Geometrie, Schatten oder wiederholte Maschen die höheren Kosten verursachen.
Kann ich jedes Mesh zu einem Objekt zusammenführen?
Nur Teile, die Bewegung, Sichtbarkeit und Materialbedürfnisse teilen, zusammenführen. Türen, Waffen, zerstörbare Teile und animierte Komponenten müssen oft unabhängig bleiben, um das Gameplay zu ermöglichen.
Wie bewahre ich den Stil eines generierten 3D-Modells?
Identifizieren Sie die Silhouette, Proportionen, Farbblöcke und Materialhinweise, die das Modell erkennbar machen, bevor Sie es vereinfachen. Vergleichen Sie Revisionen an der eigentlichen Gameplay-Kamera, anstatt nur ein Nahaufnahme-Rendering zu beurteilen.
Sehen komprimierte Texturen immer schlechter aus?
Nein, aber jede Format- und Qualitätseinstellung schafft unterschiedliche Kompromisse. Überprüfen Sie Normalwerte, Steigungen, Transparenz und kleine kontrastreiche Details auf Zielgeräten, bevor Sie die Umwandlung genehmigen.
Wie sollte ich ein optimiertes Modell testen?
Laden Sie es in einer Worst-Case-Szene und vergleichen Sie die Liefergröße, das Rendern von Statistiken, das Speicherverhalten und die visuelle Ausgabe mit der Baseline. Wiederholen Sie den Test auf mindestens einem Gerät mit niedrigerer Leistung in Ihrem unterstützten Bereich.
Quellen und weiterführende Literatur
- Three.js GLTFLoader Dokumentation
Unterstützte glTF-Erweiterungen und Decoder-Integrationen, einschließlich Draco-, Meshopt- und KTX2-Pfade.
- Three.js WebGLRenderer Dokumentation
Renderer-Informationsfelder für Aufrufe, Dreiecke, Punkte, Linien, Geometrien und Texturen.
- glTF Transformieren Sie CLI Dokumentation
Inspektion, Validierung, Beschneiden, Vereinfachung, Texturverarbeitung und Kompressionsbefehle für glTF-Assets.
Nächster Schritt
