GLB textuurcompressie: KTX2 en WebP

Textuurconversie verandert de afbeeldingen die zijn ingebed in een GLB. Kies in deze tool KTX2 of WebP om de besturingselementen voor kwaliteit, schaal en maximale grootte in te schakelen. Houd de driehoeksretentie tijdens deze vergelijking ongewijzigd, zodat het effect van textuurinstellingen gemakkelijker te zien is.

Kies het formaat dat uw kijker kan laden

Textuuruitvoer	Gebruiks- en laadvereisten
Origineel formaat	Behoudt de bestaande codering. Handig als vergelijkingsbasislijn.
WebP	Maakt gebruik van EXT_texture_webp. Controleer de ondersteuning in de bestemmingsviewer.
KTX2 / ETC1S	Een compacte Basis Universal-codering. Vereist KHR_texture_basisu-ondersteuning.
KTX2 / UASTC	Houdt meestal meer textuurdetails bij een grotere bestandsgrootte. Het gebruikt hetzelfde laadpad KTX2.

Afmetingen en coderingskwaliteit doen verschillende taken

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

Inspecteer letters, alfaranden en fijne oppervlaktedetails na het wijzigen van het formaat. Normale kaarten vereisen bijzondere zorg, omdat kleine veranderingen in de waarde de arcering kunnen veranderen. Test de textuur onder de verlichting en het zoomniveau dat in uw toepassing wordt gebruikt.

Een vergelijking met één textuur van 1024 × 1024

Codering en afmetingen	GLB-grootte (bytes)
Origineel 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 armatuur is ons CC0-rimpelgaas met een gegenereerde gradiënt-en-ruis PNG, gecodeerd door native gltfpack 1.3. Alle rijen gebruiken Meshopt-compressie, 8.192 driehoeken en kwaliteit 8 waar conversie van toepassing is. Dit zijn volledige GLB-formaten, geen geïsoleerde textuurformaten. De tabel meet bytes, geen visuele kwaliteit of GPU-geheugen.

Vergelijk de textuur op hetzelfde oppervlak

Deze close-views gebruiken dezelfde mesh-, camera-, belichtings- en materiaalinstellingen. Ze renderen de daadwerkelijke bestanden uit de tabel in Three.js 0.180.0. De gegenereerde textuur bevat verlopen en fijne ruis; het is nuttig voor het inspecteren van die details, maar vertegenwoordigt geen letters, transparantie of normale kaarten.

Weergave van dichtbij van de originele PNG-textuur op het rimpelgaas — Origineel 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 van halve grootte — WebP · 512 × 512

In deze opnames verzacht de ETC1S-versie een deel van de fijne ruis op het roze oppervlak, terwijl de UASTC meer van zijn gespikkelde uiterlijk behoudt. De WebP-versie op halve grootte vervaagt de kleine variaties zichtbaarder. Vergelijk deze observatie met de tabel met bestandsgroottes: het behouden van deze details brengt voor elke codering andere kosten met zich mee.

Open de afbeeldingen op volledige grootte en vergelijk kleine variaties in kleur en oppervlaktedetail. De webpagina schaalt de voorbeelden omlaag, waardoor verschillen kunnen worden verborgen. Deze schermafbeeldingen 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 stel Textuurschaal in op 50%. Laat de maximale textuurgrootte ongewijzigd, tenzij u ook een pixellimiet nodig heeft. Open het resultaat opnieuw in uw doelviewer voordat u het gebruikt.

Configureer het laden van KTX2 en Meshopt in Three.js →

Motorreferentie: gltfpack

Open de optimalisatie ↗