DeskForge
Un configuratore 3D di postazioni per negozi di elettronica: l’acquirente compone lo spazio di lavoro sulla propria scrivania reale e aggiunge l’intero set al carrello.


Sfida
Chi compra online un monitor, un braccio e una scrivania non sa se tutto ci starà e funzionerà insieme, quindi esita, compra un articolo alla volta o restituisce ciò che non va bene.
Soluzione
- Configuratore 3D: una scena realistica con materiali PBR, ombre morbide e occlusione ambientale, spigoli arrotondati, tastiere con layout reali, colori reali dei prodotti, modelli da Blender e file GLB, illuminazione RGB, schermi opachi o lucidi; un budget di rendering con mesh unite e una modalità qualità per i telefoni.
- Scrivania e stanza: scrivanie parametriche (dritte, con incavo, a L), posizione della scrivania nella stanza, mobili, finestra, arredi e sei preset di ambienti.
- Motore di regole: posizionamento, ergonomia e compatibilità degli attacchi (VESA, carico, morsetto) con avvisi e correzioni in un clic; layout da uno a tre monitor; bracci e supporti; una modalità quote.
- Catalogo e vendita: un’API di catalogo con amministrazione, importazione e OpenAPI; 38 prodotti dimostrativi reali con foto in 14 categorie; varianti, sconti e prodotti esauriti; suggerimenti di prodotti compatibili e «what’s missing»; l’intera postazione aggiunta al carrello in un clic.
- Integrazione in un negozio: uno script di caricamento sotto i 10 KB compresso con gzip, una modalità embed con CSP frame-ancestors e un negozio dimostrativo, un widget compatto per le pagine prodotto.
- Configurazioni: salvate tramite link breve, con nome, «My setups», una pagina di condivisione con anteprima Open Graph, esportazione in PNG e PDF; annulla e ripeti.
- Analytics: un piano degli eventi, raccolta e funnel, inoltro a GA4 e Meta Pixel con consenso, attribuzione degli ordini e valore medio dell’ordine.
- Sicurezza: container che non girano come root, limiti alla dimensione delle richieste, rate limiting compatibile con IPv6, origini consentite per l’embed.
- Architettura: undici architecture decision record, tra cui un benchmark dei motori di rendering prima di sceglierne uno.
Risultato
Configuratore, catalogo, embed e analytics sono pronti e coperti da test; Shopify è la prima integrazione con un negozio in programma. Misurazioni: 60 foto di prodotto sono passate da 18,8 MB a 124,5 KB come miniature; il caricamento differito del frame embed ha tolto 35–40 ms all’LCP; i preset degli ambienti cambiano in meno di 135 ms.