GLB-texturen comprimeren: KTX2 en WebP

Textuurconversie verandert de afbeeldingen in een GLB. Kies in deze tool KTX2 of WebP om kwaliteit, schaal en maximale grootte te kunnen instellen. Houd tijdens deze vergelijking het driehoekbehoud gelijk, zodat het effect van de textuurinstellingen beter zichtbaar is.

Kies een formaat dat je viewer kan laden

Textuuruitvoer	Gebruik en laadvereiste
Origineel formaat	Behoudt de bestaande codering. Nuttig als referentie voor vergelijkingen.
WebP	Gebruikt EXT_texture_webp. Controleer ondersteuning in de doelviewer.
KTX2 / ETC1S	Een compacte Basis Universal-codering. Vereist ondersteuning voor KHR_texture_basisu.
KTX2 / UASTC	Behoudt meestal meer textuurdetail met een groter bestand. Gebruikt hetzelfde KTX2-laadpad.

Afmetingen en coderingskwaliteit doen iets anders

Een textuurschaal van 50% halveert breedte en hoogte, waardoor vóór mipmaps een kwart van de pixels overblijft. De maximale grootte beperkt ook de uitvoerafmetingen. Coderingskwaliteit regelt de codec, niet de afmetingen; kwaliteit 8 in WebP is dus niet gelijk aan kwaliteit 8 in ETC1S of UASTC.

Controleer na verkleinen de letters, transparantieranden en fijne oppervlaktedetails. Normal maps vragen extra aandacht omdat kleine waardeveranderingen de belichting kunnen beïnvloeden. Test de textuur met de verlichting en zoom van je toepassing.

Vergelijking met één textuur van 1024 × 1024

Codering en afmetingen	GLB-grootte (bytes)
Originele PNG, 1024 × 1024	2.914.152
WebP, 1024 × 1024	445.632
ETC1S, 1024 × 1024	258.488
UASTC, 1024 × 1024	1.373.516
WebP, 512 × 512	118.088

Dit testmodel gebruikt onze CC0-golfmesh met een gegenereerde PNG met kleurverloop en ruis, gecodeerd door native gltfpack 1.3. Alle rijen gebruiken Meshopt-compressie, 8.192 driehoeken en kwaliteit 8 waar conversie van toepassing is. Dit zijn complete GLB-groottes, geen afzonderlijke textuurgroottes. De tabel meet bytes, niet beeldkwaliteit of GPU-geheugen.

Vergelijk de textuur op hetzelfde oppervlak

Deze detailbeelden gebruiken dezelfde mesh, camera, verlichting en materialen. Ze tonen de daadwerkelijke bestanden uit de tabel in Three.js 0.180.0. De gegenereerde textuur bevat kleurverlopen en fijne ruis. Dat maakt haar geschikt om die details te bekijken, maar niet representatief voor letters, transparantie of normal maps.

Detailbeeld van de originele PNG-textuur op de golfmesh — Originele PNG · 1024 × 1024

Hetzelfde oppervlak met ETC1S-textuurcompressie — ETC1S · 1024 × 1024

Hetzelfde oppervlak met UASTC-textuurcompressie — UASTC · 1024 × 1024

Hetzelfde oppervlak met een WebP-textuur op halve afmetingen — WebP · 512 × 512

In deze beelden vlakt ETC1S een deel van de fijne ruis op het roze oppervlak af, terwijl UASTC meer van het gespikkelde uiterlijk behoudt. De WebP-versie op halve afmetingen vervaagt de kleine variaties duidelijker. Vergelijk dit met de bestandsgroottes: het bewaren van die details heeft per codering een andere prijs.

Open de afbeeldingen op ware grootte en vergelijk kleine kleurverschillen en oppervlaktedetails. De webpagina verkleint de voorbeelden, wat verschillen kan verbergen. Deze screenshots zijn visuele referenties van één browser en GPU, geen kwaliteitsscore of garantie voor identieke weergave op elk apparaat.

Voorbeeld: textuurafmetingen halveren en WebP exporteren

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

Selecteer in de interface Kleiner bestand, kies WebP, open Geavanceerde instellingen en zet Textuurschaal op 50%. Laat Maximale textuurgrootte ongewijzigd tenzij je ook een pixellimiet nodig hebt. Open het resultaat in je doelviewer voordat je het gebruikt.

Het laden van KTX2 en Meshopt instellen in Three.js →

Enginereferentie: gltfpack

Open de optimalisatietool ↗