Da Blender al Deploy: Compressione End-to-End in Pratica

In questa serie abbiamo già parlato di strumenti, principi e scelte. In quest'ultimo articolo, mettiamo tutto insieme in una pipeline funzionante: partiamo da un modello Blender reale, lo comprimiamo passo dopo passo, registrando le variazioni di dimensione file, VRAM e tempi di caricamento, e vediamo se riusciamo a trasformare un "peso massimo" da 50MB in un modello da 5MB che si apre istantaneamente su mobile.

Questo articolo è per chi ha letto i 5 precedenti ed è pronto a mettere le mani in pasta. Niente nuovi concetti, solo procedure, comandi e script pronti all'uso.

Punto di partenza: un modello PBR reale

Usiamo un tipico modello per e-commerce come campione: un prodotto ad alta precisione con texture PBR complete.

Metrica iniziale	Valore
File sorgente Blender	~120MB (inclusa high-poly non esportata)
Export GLB (float32 + PNG)	~50MB
Numero di vertici	~180.000
Texture	6 x 4096×4096 (albedo, normal, roughness, metallic, AO, emissive)
Occupazione VRAM (6 texture decompresse)	~520MB
Obiettivo	File ≤ 5MB, VRAM controllata, apertura istantanea su mobile

Un file da 50MB e 520MB di VRAM: questo modello su mobile farebbe crashare qualsiasi cosa. Procediamo con ordine.

Passo 0: Export corretto da Blender

Il primo ostacolo per la compressione è l'export. Molti perdono sangue proprio qui.

Impostazioni chiave per l'export glTF da Blender:

• Formato: glTF Binary (.glb) (file singolo, facile da trasferire)
• Geometria: spuntare Normals e Tangents (le normal map PBR richiedono le tangenti)
• UV: assicurarsi che siano esportate (default attivo)
• Texture: Automatic o JPEG (il formato qui non conta, verrà ricompresso dopo, ma devono essere esportate)
• Compressione: NON spuntare la compressione mesh integrata di Blender, useremo strumenti più professionali
• Trasformazione: +Y Up (standard glTF)
• Dati: esportare solo il necessario (se animazioni, camera e luci non servono, non esportarle per ridurre il peso)

Il model.glb esportato: 50MB, 6 texture PNG, vertici float32. Questa è la nostra baseline.

Primo errore comune: Blender di default esporta mesh inutilizzate e oggetti helper nascosti. Prima dell'export, usa File > Clean Up > Purge Orphans e seleziona solo gli oggetti da esportare nell'outliner.

Panoramica della pipeline end-to-end

Visualizziamo l'intera pipeline per avere una visione d'insieme:

File sorgente Blender
   │  Export .glb (float32 + PNG)            50MB
   ▼
[1] Deduplicazione + saldatura vertici (gltf-transform)   ~45MB
   │
[2] Compressione vertici: MeshOpt (gltfpack / gltf-transform) ~30MB
   │
[3] Compressione texture: PNG → KTX2 (ETC1S/UASTC)     ~6MB
   │
[4] (Opzionale) Simplificazione geometrica LOD (simplify)         ~4-5MB
   ▼
model-final.glb finale                          ~5MB
   │
Caricamento motore (Three.js / Babylon.js) → transcodifica runtime → online

I numeri di ogni passaggio verranno tracciati in tempo reale nelle tabelle qui sotto.

Toolchain: quale scegliere

Ci sono diversi strumenti di compressione. Confrontiamoli per evitare scelte sbagliate:

Strumento	Punti di forza	Punti deboli	Ideale per
gltf-transform	Tuttofare, texture + vertici, API e scriptabile	Rapporto di compressione estremo inferiore agli strumenti specializzati	Scelta principale consigliata, la maggior parte dei casi
gltfpack	Specialista compressione vertici, supporto nativo MeshOpt	Debole sulla compressione texture	Modelli con molti vertici, controllo fine MeshOpt
toktx	Il più professionale per texture, parametri completi	Solo texture, non modelli interi	Ottimizzazione fine di singole texture
gltf-pipeline	Storico, supporta Draco	Manutenzione poco attiva, poche funzioni	Progetti legacy con Draco
Strumenti online (gltf.report)	Zero installazione	Non adatto ad automazione e grandi volumi	Test, attività una tantum

Percorso principale consigliato: gltf-transform per l'intero flusso, con gltfpack per i vertici e toktx per texture singole se necessario. Tutti i passaggi seguenti si basano su gltf-transform.

Passo 1: Deduplicazione + Saldatura

I modelli contengono spesso vertici duplicati, nodi e materiali inutilizzati. Puliamo prima.

gltf-transform optimize model.glb step1.glb --weld --prune

Fase	Dimensione file	VRAM	Variazione
Baseline	50MB	~520MB	—
Step 1 Deduplicazione	45MB	~520MB	-5MB (VRAM invariata, le texture sono ancora lì)

La VRAM è quasi invariata, come previsto: la deduplicazione risparmia principalmente su vertici e struttura, mentre le texture sono la parte dominante della VRAM.

Passo 2: Compressione vertici MeshOpt

gltf-transform optimize step1.glb step2.glb --meshopt --weld --prune

--meshopt quantizza i vertici a 16 bit e li codifica senza perdita con MeshOpt, aggiungendo automaticamente l'estensione EXT_meshopt_compression.

Fase	Dimensione file	VRAM	Variazione
Step 1	45MB	~520MB	—
Step 2 + MeshOpt	30MB	~520MB	-15MB (parte vertici)

VRAM ancora ~520MB? Giusto: i vertici occupano una piccola parte della VRAM (10-20%), quindi ridurli ha un impatto limitato. Il vero mostro di VRAM sono le texture, che affronteremo al prossimo passo.

Passo 3: Compressione texture PNG → KTX2

Questo è il passo con il miglior rapporto qualità/prezzo.

gltf-transform optimize step2.glb step3.glb \
  --texture-compress basisu \
  --meshopt --weld --prune

--texture-compress basisu rileva automaticamente il tipo di ogni texture: le texture colore (albedo, emissive) usano ETC1S, le texture dati (normal, roughness, metallic, AO) usano UASTC.

Fase	Dimensione file	VRAM	Variazione
Step 2	30MB	~520MB	—
Step 3 + KTX2	6MB	~70MB	-24MB file / -450MB VRAM

Questo è il punto di svolta dell'intera pipeline:

• File da 30MB a 6MB
• VRAM da 520MB a ~70MB — perché le 6 texture 4096 passano da "pixel grezzi decompressi" a "block compression", ognuna da ~87MB a ~11-14MB

La VRAM scende di un ordine di grandezza: questo è il fattore decisivo per la resa su mobile.

Passo 4: (Opzionale) Simplificazione geometrica

Se serve ancora più leggerezza e il contesto consente una precisione inferiore dei vertici, possiamo aggiungere la semplificazione geometrica.

gltf-transform optimize step3.glb final.glb \
  --texture-compress basisu \
  --meshopt \
  --simplify --simplify-ratio 0.5 \
  --weld --prune

--simplify-ratio 0.5 indica di mantenere circa il 50% dei vertici.

Fase	Dimensione file	VRAM	Variazione
Step 3	6MB	~70MB	—
Step 4 + Simpl. 0.5	4.5MB	~70MB	-1.5MB (VRAM quasi invariata)

La semplificazione riduce principalmente la dimensione del file, con poco impatto sulla VRAM. Il costo è una minore fedeltà del modello: visibile da vicino. Per le pagine prodotto e-commerce di solito non è consigliata una semplificazione eccessiva, mentre è ideale per architettura e scene ampie.

Tabella riepilogativa dei risultati

Vediamo il quadro completo dei quattro passaggi (basato sul campione sopra, i numeri servono a illustrare gli ordini di grandezza):

Passaggio	Dimensione file	VRAM	Riduzione cumulativa
Baseline (float32 + PNG)	50MB	~520MB	—
+ Deduplicazione/saldatura	45MB	~520MB	-10%
+ MeshOpt vertici	30MB	~520MB	-40%
+ Texture KTX2	6MB	~70MB	-88% file / -87% VRAM
+ Simplificazione geom. (0.5)	4.5MB	~70MB	-91% file

Conclusione: la compressione delle texture contribuisce alla stragrande maggioranza dei guadagni in termini di dimensioni file e VRAM. La compressione dei vertici è la ciliegina sulla torta; la compressione delle texture è il piatto principale. Questo conferma esattamente la tesi del primo articolo: le texture occupano l'80% del volume, ottimizzarle offre il miglior ritorno.

Versione one-liner: compressione一键

Se non vuoi procedere per passaggi, puoi fare tutta l'ottimizzazione in una volta sola:

gltf-transform optimize model.glb model-final.glb \
  --texture-compress basisu \
  --meshopt \
  --simplify --simplify-ratio 0.5 \
  --weld --prune

Questo singolo comando = deduplicazione + saldatura + MeshOpt vertici + texture KTX2 + semplificazione geometrica. Copre il 90% dei casi; i passaggi separati servono principalmente per capire e ottimizzare i parametri.

Non vuoi configurare l'ambiente? Usa la compressione online di Any3D

I comandi e gli script gltf-transform di cui sopra richiedono Node.js, toolchain e una serie di parametri da ricordare. Lo strumento di compressione online di Any3D elimina tutto questo:

• Niente download di script o installazione di ambienti — apri la pagina web e sei pronto
• Il modello non viene caricato su server — tutto viene elaborato localmente nel browser, i file non lasciano mai il tuo dispositivo
• Configurazione visuale — texture KTX2, vertici MeshOpt, semplificazione geometrica: regolatori e anteprima in tempo reale
• Multi-versione con un click — esporta risultati compressi per piattaforme mobile / desktop / VR

Scegli un GLB, seleziona la piattaforma di destinazione, clicca e ottieni il modello compresso. Sotto il cofano è lo stesso motore della riga di comando (gltf-transform), ma senza alcuna barriera all'ingresso e senza toccare il terminale.

FAQ: errori comuni

Il modello è nero / le texture non si vedono dopo la compressione

• Nel 99% dei casi è lo spazio colore: manca sRGB sulla texture colore. In Three.js: texture.colorSpace = THREE.SRGBColorSpace.
• Con toktx, dimenticato --srgb sulla texture colore.

Le normal map compresse danno un'illuminazione sbagliata

• La normal map è stata compressa con ETC1S, passa a UASTC.
• La normal map è in stile DirectX (canale G verso il basso), ma il motore vuole lo stile OpenGL: devi invertire il canale G.

Il caricamento su mobile si blocca sulla prima schermata

• Verifica se stai caricando il decoder wasm di Draco (richiesta extra). Su mobile preferisci MeshOpt.
• Percorso del transcoder KTX2 errato: la transcodifica fallisce e si ripiega sulla decompressione CPU.

Il file compresso è più grande dell'originale

• Texture troppo piccole (< 128px): la compressione KTX2 non conviene, la block compression ha un overhead fisso.
• Il modello è già stato compresso: un'ulteriore compressione non dà benefici (anzi, può essere negativa).

Il modello semplificato ha facce rotte

• --simplify-ratio troppo basso: scendi a 0.7-0.8.
• La semplificazione funziona bene su superfici dure (meccanica, architettura), ma male su superfici organiche (personaggi).

KTX2 non si carica su alcuni browser

• Safari vecchio / WebView vecchi non lo supportano. Prepara un fallback PNG/WebP, oppure usa il campo fallback di KHR_texture_basisu per fornire una texture di riserva.

Cheat sheet di serie

Il meglio dei 6 articoli in una tabella. Da salvare.

Composizione del volume

Componente	Percentuale	Strumento di ottimizzazione
Texture	70-85%	KTX2 (massimo guadagno)
Dati vertici	10-20%	MeshOpt / quantizzazione / Draco
Dati animazione	0-15%	Riduci keyframe / compressione
Altro	< 2%	Deduplicazione

Formula VRAM

VRAM formato tradizionale = larghezza * altezza * 4 byte * 1.333 (con mipmap)
VRAM block compression KTX2 ≈ formula sopra / 4 (ETC1S) o / 2 (UASTC)

Scelta compressione vertici

Scenario	Consigliato
Zero dipendenze, massima semplicità	Solo quantizzazione (KHR_mesh_quantization)
Scelta equilibrata per il Web	MeshOpt
Rapporto di compressione estremo, si può attendere la decodifica	Draco
Mini-programmi / sensibilità al peso del bundle	Solo quantizzazione / MeshOpt, evita Draco

Scelta compressione texture

Tipo di texture	Codifica consigliata
albedo / emissive (colore)	KTX2 ETC1S
normal / roughness / metallic / AO (dati)	KTX2 UASTC
Web desktop, priorità alla velocità di download	WebP / AVIF
Texture piccole (< 128px)	Mantieni PNG, niente KTX2

Comando one-shot

# Ottimizzazione completa (texture + vertici + semplificazione)
gltf-transform optimize model.glb model-final.glb \
  --texture-compress basisu --meshopt \
  --simplify --simplify-ratio 0.5 --weld --prune

Riferimento rapido per piattaforma

Piattaforma	Texture	Vertici
Web desktop	WebP / KTX2	MeshOpt
Web mobile	KTX2 obbligatorio	MeshOpt
VR	KTX2 obbligatorio	MeshOpt + LOD
Mini-programmi	KTX2 / WebP	MeshOpt / quantizzazione
Scene ampie	KTX2 obbligatorio	MeshOpt + Draco + LOD

Riepil