Compressione delle texture GLB: KTX2 e WebP

La conversione delle texture modifica le immagini incorporate nel GLB. In questo strumento, scegli KTX2 o WebP per abilitare qualità, scala e dimensione massima. Durante il confronto mantieni invariata la percentuale di triangoli, così sarà più facile distinguere l'effetto delle impostazioni delle texture.

Scegli il formato che il visualizzatore può caricare

Formato delle texture in uscita	Uso e requisito di caricamento
Formato originale	Mantiene la codifica esistente. Utile come riferimento per il confronto.
WebP	Usa EXT_texture_webp. Verifica il supporto nel visualizzatore di destinazione.
KTX2 / ETC1S	Una codifica compatta Basis Universal. Richiede il supporto di KHR_texture_basisu.
KTX2 / UASTC	Solitamente conserva più dettagli delle texture producendo file più grandi. Usa lo stesso percorso di caricamento KTX2.

Dimensioni e qualità di codifica hanno funzioni diverse

Una scala delle texture del 50% dimezza larghezza e altezza, lasciando un quarto dei pixel prima delle mipmap. Anche la dimensione massima limita le dimensioni del risultato. La qualità di codifica regola il codec, non le dimensioni dell'immagine: qualità 8 in WebP non equivale a qualità 8 in ETC1S o UASTC.

Dopo il ridimensionamento controlla scritte, bordi alfa e dettagli fini della superficie. Le normal map richiedono particolare attenzione, perché piccole variazioni nei valori possono cambiare l'ombreggiatura. Prova la texture con l'illuminazione e il livello di zoom della tua applicazione.

Confronto con una texture 1024 × 1024

Codifica e dimensioni	Dimensione GLB (byte)
PNG originale, 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

Questo campione usa la nostra mesh ondulata CC0 con un PNG generato con gradiente e rumore, codificato da gltfpack nativo 1.3. Tutte le righe usano compressione Meshopt, 8.192 triangoli e qualità 8 quando viene applicata la conversione. Sono dimensioni dei GLB completi, non delle sole texture. La tabella misura byte, non qualità visiva o memoria GPU.

Confronta la texture sulla stessa superficie

Queste viste ravvicinate usano mesh, camera, illuminazione e materiali identici. Mostrano i file reali della tabella renderizzati in Three.js 0.180.0. La texture generata contiene gradienti e rumore fine: è utile per osservare questi dettagli, ma non rappresenta scritte, trasparenza o normal map.

Vista ravvicinata della texture PNG originale sulla mesh ondulata — PNG originale · 1024 × 1024

Stessa superficie con compressione delle texture ETC1S — ETC1S · 1024 × 1024

Stessa superficie con compressione delle texture UASTC — UASTC · 1024 × 1024

Stessa superficie con texture WebP dimezzata — WebP · 512 × 512

In queste immagini, ETC1S attenua parte del rumore fine sulla superficie rosa, mentre UASTC conserva meglio l'aspetto puntinato. La versione WebP dimezzata sfuma più visibilmente le piccole variazioni. Confronta questa osservazione con la tabella delle dimensioni: conservare quei dettagli ha un costo diverso per ogni codifica.

Apri le immagini a dimensione intera e confronta le piccole variazioni di colore e i dettagli della superficie. La pagina riduce le anteprime, il che può nascondere le differenze. Questi screenshot sono riferimenti visivi ottenuti con un browser e una GPU, non un punteggio di qualità né una garanzia di rendering identico su tutti i dispositivi.

Esempio: dimezzare le dimensioni delle texture ed esportare WebP

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

Nell'interfaccia seleziona File più piccolo, scegli WebP, apri Impostazioni avanzate e imposta Scala delle texture al 50%. Lascia invariata la dimensione massima, a meno che non serva anche un limite in pixel. Prima di usarlo, riapri il risultato nel visualizzatore di destinazione.

Configurare il caricamento KTX2 e Meshopt in Three.js →

Riferimento del motore: gltfpack

Apri l'ottimizzatore ↗