GLB-Texturkompression: KTX2 und WebP

Die Texturumwandlung verändert die in einer GLB-Datei eingebetteten Bilder. Wähle hier KTX2 oder WebP, um Qualität, Skalierung und maximale Größe einstellen zu können. Lasse den Dreiecksanteil beim Vergleich unverändert, damit die Wirkung der Textureinstellungen deutlicher wird.

Ein Format wählen, das dein Viewer laden kann

Abmessungen und Codierungsqualität erfüllen verschiedene Aufgaben

Eine Texturskalierung von 50% halbiert Breite und Höhe; vor Mipmaps bleibt ein Viertel der Pixel. Die maximale Größe begrenzt zusätzlich die Ausgabeabmessungen. Die Codierungsqualität steuert den Codec statt der Bildabmessungen. Qualität 8 in WebP entspricht deshalb nicht Qualität 8 in ETC1S oder UASTC.

Prüfe nach dem Skalieren Beschriftungen, Alphakanten und feine Oberflächendetails. Normal Maps erfordern besondere Aufmerksamkeit, da kleine Wertänderungen die Schattierung beeinflussen können. Teste die Textur mit der Beleuchtung und Zoomstufe deiner Anwendung.

Ein Vergleich mit einer Textur von 1024 × 1024 Pixeln

Dieses Testmodell besteht aus unserem CC0-Wellenmesh mit einer erzeugten PNG aus Farbverlauf und Rauschen, codiert mit nativem gltfpack 1.3. Alle Zeilen verwenden Meshopt-Kompression, 8.192 Dreiecke und bei Umwandlung Qualität 8. Die Werte sind vollständige GLB-Dateigrößen, nicht einzelne Texturgrößen. Gemessen werden Bytes, nicht Bildqualität oder GPU-Speicher.

Die Textur auf derselben Oberfläche vergleichen

Diese Nahansichten verwenden dasselbe Mesh sowie identische Kamera-, Licht- und Materialeinstellungen. Sie zeigen die tatsächlichen Dateien aus der Tabelle, gerendert in Three.js 0.180.0. Die erzeugte Textur enthält Farbverläufe und feines Rauschen. Sie eignet sich zur Prüfung dieser Details, steht aber nicht für Beschriftungen, Transparenz oder Normal Maps.

In diesen Aufnahmen glättet ETC1S einen Teil des feinen Rauschens auf der rosa Oberfläche, während UASTC mehr von der gesprenkelten Struktur erhält. Die WebP-Version mit halben Abmessungen verwischt die kleinen Unterschiede deutlicher. Vergleiche diese Beobachtung mit der Dateigrößentabelle: Der Erhalt dieser Details kostet je nach Codierung unterschiedlich viel Platz.

Öffne die Bilder in voller Größe und vergleiche feine Farbunterschiede und Oberflächendetails. Die Webseite verkleinert die Vorschauen und kann dadurch Unterschiede verdecken. Diese Screenshots sind visuelle Referenzen aus einem Browser und einer GPU, keine Qualitätsbewertung oder Garantie gleicher Darstellung auf allen Geräten.

Beispiel: Texturabmessungen halbieren und WebP exportieren

gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -ke

Wähle in der Oberfläche „Kleinere Datei“, dann WebP, öffne „Erweiterte Einstellungen“ und setze die Texturskalierung auf 50%. Lasse die maximale Texturgröße unverändert, sofern du nicht zusätzlich ein Pixellimit benötigst. Öffne das Ergebnis vor der Verwendung erneut in deinem Ziel-Viewer.

KTX2 und Meshopt in Three.js einrichten →

Engine-Referenz: gltfpack