Come creare un file GLB ottimizzato per l'ecommerce
Guida tecnica alla creazione di modelli GLB per viewer 3D su ecommerce: strumenti, workflow, specifiche tecniche e ottimizzazione per web e mobile.
Il formato GLB (Binary glTF 2.0) è diventato lo standard de-facto per i modelli 3D sul web. Shopify, WooCommerce, Amazon e migliaia di shop usano GLB per i loro viewer interattivi. Questa guida spiega come creare un GLB di qualità per il tuo packaging, ottimizzato per performance e compatibilità.
Cos'è il formato GLB e perché è lo standard web
glTF (GL Transmission Format) è definito dal Khronos Group come il «JPEG dei modelli 3D». La variante .glb è la versione binaria che impacchetta in un unico file la geometria, i materiali PBR, le texture e le animazioni. Rispetto ai formati più vecchi (OBJ, FBX), glTF 2.0 supporta materiali fisicamente accurati e può essere caricato direttamente dal browser via WebGL senza conversioni.
Gli strumenti per creare un GLB
Blender (gratuito, raccomandato)
Blender è il software open-source più usato per creare modelli 3D per il web. Dalla versione 2.8, supporta nativamente l'esportazione in glTF 2.0/GLB con tutte le opzioni di ottimizzazione. Per packaging relativamente semplici esistono template e addon specifici che velocizzano enormemente il processo.
Cinema 4D e Maya (professionale)
Per studi e agenzie che già lavorano con questi software, esistono plugin glTF di terze parti. La qualità del risultato dipende molto dalla configurazione dell'esportatore e dalla corretta impostazione dei materiali PBR.
Workflow step-by-step: dalla fustella al GLB
- Importa la fustella (DXF o PDF) in Blender come reference per la modellazione
- Modella la geometria del packaging seguendo le linee di piega e taglio
- Applica UV unwrap su tutte le superfici, ottimizzando l'uso dello spazio UV
- Imposta i materiali PBR: roughness, metallic, normal maps per finiture speciali
- Applica le texture di stampa (artwork) come albedo map sulle UV
- Testa l'anteprima in Blender EEVEE o Cycles
- Esporta in glTF 2.0 / GLB con le impostazioni ottimali
- Verifica il file su gltf.report o model-viewer.dev
Specifiche tecniche per un GLB ecommerce ottimale
| Parametro | Target web | Nota |
|---|---|---|
| Poligoni | < 50.000 triangoli | Per packaging semplice < 15.000 |
| Texture principale | 1024×1024 px (max 2048×2048) | Sempre potenza di 2 |
| Formato texture | PNG o WebP embedded | JPEG per albedo, PNG per alpha |
| Dimensione file | < 5 MB | Target ideale < 2 MB per mobile |
| Animazioni | Opzionale | Rimuovere se non necessarie |
| LOD | Raccomandato | LOD0 desktop, LOD1 mobile |
Compressione Draco: la svolta per il mobile
La compressione Draco (sviluppata da Google) riduce la dimensione del file GLB del 60–90% senza perdita visibile di qualità. È supportata nativamente da model-viewer, Three.js e tutti i viewer moderni. Per attivarla in Blender: in fase di export glTF, abilitare «Geometry > Use Draco Mesh Compression».
Test prima dell'integrazione
Usa gltf.report (gratuito) per analizzare il tuo GLB: vedrai poligoni, dimensione texture, materiali e possibili errori. Un secondo check su model-viewer.dev ti permette di vedere come il file viene caricato dal browser, compreso il comportamento AR su mobile.
Integrazione su ecommerce
Shopify
Shopify supporta nativamente i modelli 3D: carica il file GLB nella scheda prodotto dalla sezione Media. Per la preview AR su iPhone usa USDZ, convertibile tramite Apple Reality Converter o tramite il nostro workflow di delivery.
WooCommerce e headless
Per WooCommerce usa il plugin «Model Viewer for WooCommerce» o integra il tag <model-viewer> (Google) direttamente nel template del prodotto. Per architetture headless (Next.js, Nuxt), la libreria @google/model-viewer si integra come componente React/Vue e offre la massima flessibilità di personalizzazione.
Pronto a iniziare?
Trasforma il tuo packaging in un asset digitale.
Il team Digityze progetta soluzioni 3D su misura. Raccontaci il tuo progetto.