GLB Texturkomprimierung: KTX2 und WebP

Durch die Texturkonvertierung werden die in einem GLB eingebetteten Bilder geändert. Wählen Sie in diesem Tool KTX2 oder WebP, um die Steuerelemente für Qualität, Skalierung und maximale Größe zu aktivieren. Lassen Sie die Dreiecksbeibehaltung während dieses Vergleichs unverändert, damit die Auswirkung der Textureinstellungen leichter erkennbar ist.

Wählen Sie das Format, das Ihr Viewer laden kann

Abmessungen und Kodierungsqualität erfüllen unterschiedliche Aufgaben

Eine Texturskala von 50% halbiert Breite und Höhe, sodass ein Viertel der Pixel vor den Mipmaps verbleibt. Die Einstellung für die maximale Größe begrenzt auch die Ausgabeabmessungen. Die Kodierungsqualität steuert den Codec und nicht die Bildabmessungen, daher ist Qualität 8 in WebP nicht gleichbedeutend mit Qualität 8 in ETC1S oder UASTC.

Überprüfen Sie nach der Größenänderung die Beschriftung, die Alpha-Kanten und die feinen Oberflächendetails. Normale Karten erfordern besondere Sorgfalt, da kleine Wertänderungen die Schattierung verändern können. Testen Sie die Textur unter der in Ihrer Anwendung verwendeten Beleuchtung und Zoomstufe.

Ein Vergleich mit einer 1024 × 1024-Textur

Bei dieser Vorrichtung handelt es sich um unser CC0-Ripple-Mesh mit einem erzeugten Gradienten- und Rauschsignal PNG, codiert durch natives gltfpack 1.3. Alle Zeilen verwenden die Meshopt-Komprimierung, 8.192 Dreiecke und Qualität 8, sofern die Konvertierung gilt. Hierbei handelt es sich um vollständige GLB-Größen, nicht um isolierte Texturgrößen. Die Tabelle misst Bytes, nicht die visuelle Qualität oder den GPU-Speicher.

Vergleichen Sie die Textur auf derselben Oberfläche

Diese Nahansichten verwenden die gleichen Netz-, Kamera-, Beleuchtungs- und Materialeinstellungen. Sie rendern die tatsächlichen Dateien aus der Tabelle in Three.js 0.180.0. Die generierte Textur enthält Farbverläufe und feines Rauschen; Es ist nützlich, um diese Details zu prüfen, stellt jedoch keine Beschriftung, Transparenz oder Normalkarten dar.

In diesen Aufnahmen glättet die Version ETC1S einen Teil des feinen Rauschens auf der rosa Oberfläche, während UASTC mehr von ihrem gesprenkelten Aussehen behält. Die halbgroße Version WebP verwischt die kleinen Variationen deutlicher. Vergleichen Sie diese Beobachtung mit der Dateigrößentabelle: Die Beibehaltung dieser Details ist bei jeder Codierung mit unterschiedlichen Kosten verbunden.

Öffnen Sie die Bilder in voller Größe und vergleichen Sie kleine Abweichungen in Farbe und Oberflächendetails. Die Webseite verkleinert die Vorschau, wodurch Unterschiede verdeckt werden können. Bei diesen Screenshots handelt es sich um visuelle Referenzen von einem Browser und GPU, nicht um einen Qualitätsfaktor oder eine Garantie für die identische Darstellung auf jedem Gerät.

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ählen Sie in der Benutzeroberfläche „Kleinere Datei“ aus, wählen Sie „WebP“, öffnen Sie „Erweiterte Einstellungen“ und stellen Sie „Texturskalierung“ auf 50% ein. Lassen Sie die maximale Texturgröße unverändert, es sei denn, Sie benötigen auch eine Pixelbeschränkung. Öffnen Sie das Ergebnis erneut in Ihrem Ziel-Viewer, bevor Sie es verwenden.

Konfigurieren Sie das Laden von KTX2 und Meshopt in Three.js →

Motorreferenz: gltfpack