Compressione texture GLB: KTX2 e WebP

La conversione della texture modifica le immagini incorporate in un GLB. In questo strumento, scegli KTX2 o WebP per abilitare i controlli di qualità, scala e dimensione massima. Mantieni invariata la conservazione del triangolo durante questo confronto in modo che l'effetto delle impostazioni della trama sia più facile da vedere.

Scegli il formato che il tuo visualizzatore può caricare

Le dimensioni e la qualità della codifica svolgono compiti diversi

Una scala di texture 50% dimezza la larghezza e l'altezza, lasciando un quarto dei pixel prima delle mipmap. L'impostazione della dimensione massima limita anche le dimensioni dell'output. La qualità della codifica controlla il codec anziché le dimensioni dell'immagine, quindi la qualità 8 in WebP non è equivalente alla qualità 8 in ETC1S o UASTC.

Ispeziona caratteri, bordi alfa e dettagli fini della superficie dopo il ridimensionamento. Le mappe normali necessitano di particolare attenzione poiché piccole modifiche ai valori possono alterare l'ombreggiatura. Testa la texture con l'illuminazione e il livello di zoom utilizzati nella tua applicazione.

Un confronto utilizzando una texture 1024 × 1024

Questo dispositivo è la nostra mesh ripple CC0 con un gradiente e rumore generato PNG, codificato da gltfpack nativo 1.3. Tutte le righe utilizzano la compressione Meshopt, 8.192 triangoli e qualità 8 dove si applica la conversione. Queste sono dimensioni GLB complete, non dimensioni di texture isolate. La tabella misura i byte, non la qualità visiva o la memoria GPU.

Confronta la trama sulla stessa superficie

Queste viste ravvicinate utilizzano le stesse impostazioni di mesh, telecamera, illuminazione e materiale. Restituiscono i file effettivi dalla tabella in Three.js 0.180.0. La texture generata contiene gradienti e rumore fine; è utile per ispezionare questi dettagli, ma non rappresenta caratteri, trasparenza o mappe normali.

In queste acquisizioni, la versione ETC1S attenua parte del rumore sottile sulla superficie rosa, mentre UASTC mantiene maggiormente il suo aspetto maculato. La versione WebP di dimensioni ridotte sfuma in modo più visibile le piccole variazioni. Confronta questa osservazione con la tabella delle dimensioni dei file: preservare questi dettagli ha un costo diverso per ciascuna codifica.

Apri le immagini a grandezza naturale e confronta piccole variazioni di colore e dettagli della superficie. La pagina Web ridimensiona le anteprime, il che può nascondere le differenze. Questi screenshot sono riferimenti visivi da un browser e GPU, non un punteggio di qualità o una garanzia di rendering identico su ogni dispositivo.

Esempio: dimezzare le dimensioni della 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 texture su 50%. Lascia invariata la dimensione massima della trama a meno che non sia necessario anche un limite di pixel. Riapri il risultato nel visualizzatore di destinazione prima di utilizzarlo.

Configura il caricamento di KTX2 e Meshopt in Three.js →

Riferimento motore: gltfpack