Il caso Brionvega: realtà aumentata nel browser

In breve

• Dal link alla stanza: la WebAR porta un oggetto nello spazio reale a partire da un link, senza app.
• Un'interazione breve: un invito, la sessione AR se il dispositivo la supporta, il ritorno alla pagina.
• Modello 3D pronto: è un prerequisito. Su Brionvega i modelli sono di un artista 3D esterno; io integro la scena.
• Nel flusso, non a parte: Brionvega AR è una SPA in Vite con model-viewer, in cui l'AR è un passaggio del percorso.
• Pochi oggetti riconoscibili: ha senso su prodotti selezionati, non come effetto su un catalogo intero.
• Fallback: se la sessione non parte resta un'immagine statica; il testo è in HTML.

Cosa intendo per WebAR

Il visitatore è sul sito e può vedere l'oggetto nello spazio in cui si trova, con la fotocamera, senza store né account. L'oggetto compare a una scala credibile; si guarda, si chiude, si torna alla pagina.

Risponde a una domanda spaziale: quanto è grande, che presenza ha qui. Se la domanda è un'altra, basta una buona fotografia.

«Vogliamo l'AR» copre spesso tre lavori diversi:

1. un'app di marca;
2. un configuratore;
3. questo gesto, corto, su pochi prodotti.

Il terzo è il caso Brionvega e il servizio WebAR. Lo sviluppo è scena e flusso; la modellazione è di un'altra persona.

Nessuna app da installare

Un'app nativa ha senso quando c'è un motivo per tornare: account, catalogo, programma. Costa in modo continuo — due store, aggiornamenti. Per un gesto breve non si ripaga.

La pagina c'è già, con nome del prodotto, tono del brand, eventuale acquisto. L'AR si appoggia lì.

Su Brionvega AR gli oggetti arrivano nella stanza dal browser, su ar.brionvega.com. Se il modello cambia, cambia un asset, non una build da mandare in review sugli store.

Su Queer Beer la bottiglia si vede in 3D e in AR dal browser, con model-viewer.

Un gesto corto

Nella fotocamera si legge e si confronta male. Prezzo, varianti e scheda tecnica stanno nella pagina, in HTML. Nella sessione ci sono l'oggetto e un'uscita.

Il gesto:

1. un invito di una riga («vedilo nella stanza»);
2. un'azione per entrare;
3. l'oggetto;
4. un'azione per tornare.

Se serve un tutorial, il problema è l'invito o l'oggetto: si sistema la pagina.

Un configuratore — materiali, misure, varianti salvate, preventivo — è un altro lavoro e deve funzionare anche senza fotocamera. Il permesso della fotocamera si chiede quando è chiaro cosa si ottiene, non al primo caricamento.

Il modello 3D è un lavoro a parte

Integro la scena; non modello il prodotto. Su Brionvega i modelli sono di un artista 3D esterno.

Un modello CAD non è un modello da web. Per la pagina servono una mesh leggera, una scala credibile, materiali che reggano la luce del browser, un peso adatto. È un mestiere con tempi propri.

Se il modello non c'è, va commissionato prima, con una consegna chiara: formato, scala, contenuto. Se slitta il modello, slitta la scena.

Modello e sito hanno budget distinti. Una WebAR sposta la stima perché richiede modelli, performance e un fallback; il motion misurato, da solo, no. Ne parlo in quanto costa un sito animato o 3D. Se il modello va creato da zero dentro il budget del sito, la WebAR è la voce che tolgo.

Con il modello chiedo anche un'immagine ferma (foto o render): è ciò che vede chi non apre la sessione.

Brionvega: la scena nel flusso

• Architettura: single-page application in Vite, non Next.js. Anteprima 3D e AR con model-viewer.
• Flusso: l'oggetto si guarda in pagina e da lì si porta nello spazio. Nessuna route separata piena di testo nascosto.
• Bundle: la scena si monta quando serve, non come condizione per leggere il nome dell'oggetto.
• Crediti: cliente Brionvega; modelli di un artista 3D esterno; scena e flusso miei. Nessuno studio intermedio.

In produzione su ar.brionvega.com; nel portfolio come Brionvega AR.

Pochi oggetti, un invito chiaro

Ha senso quando:

• gli oggetti sono pochi e si riconoscono senza didascalia;
• il modello esiste, o tempi e costi del modello sono già chiusi;
• la pagina regge da sola — nome, testo, immagine — e l'AR è un di più.

Ha meno senso come pulsante su ogni scheda di un catalogo: ogni «vedi in AR» significa un modello, un peso e un fallback in più, per un gesto che quasi nessuno compie mentre confronta prodotti. Il confronto si fa nella lista, in HTML.

Diesel Farm e NAYT sono un altro lavoro: vetrina, racconto, Shopify. Non proporrei l'AR accesa su tutte le schede.

Quick Look, Scene Viewer e l'immagine ferma

Con model-viewer: AR con Quick Look su iOS e Scene Viewer su Android, senza app.

Non pubblico un elenco di telefoni: invecchierebbe alla prima versione di browser. La sessione dipende da cosa supportano il browser e il sistema in quel momento, e dal permesso della fotocamera.

Il flusso prevede un bivio:

• se la sessione è disponibile e il permesso è concesso, parte l'AR;
• altrimenti resta un'immagine ferma dell'oggetto, già in pagina, con dimensioni vere.

Quell'immagine è anche il percorso di chi è su desktop. Su touch o con prefers-reduced-motion la scena può restare spenta. Se la sessione non è disponibile, non mostro un pulsante che non fa nulla. Stesso criterio di siti animati e SEO.

Il testo resta in HTML

I crawler leggono il documento, non eseguono la scena. Se nome e invito esistono solo nel canvas, la URL è povera; se esistono in un blocco nascosto, il documento non coincide con la pagina.

In HTML, prima della sessione: titolo, cos'è l'oggetto, invito, link. Niente loader a tutto schermo: testo e immagine subito, scena dopo.

La WebAR non è uno strumento SEO, ma è compatibile con una pagina indicizzabile. La manutenzione di ciò che i browser cambiano è un accordo a parte: manutenzione dopo il lancio.

Domande frequenti

Serve un'app dello store?

No. Il gesto parte dalla pagina.

Chi fa il modello 3D?

Un artista 3D esterno o lo studio. Io lo integro con model-viewer.

Su quali telefoni funziona?

Dipende dal browser e dal permesso della fotocamera in quel momento. Se la sessione non parte, resta l'immagine ferma con il testo.

Il testo può stare solo nella scena?

No. Titolo, descrizione, invito e link stanno in HTML, visibili.

Ha senso su tutto il catalogo?

Quasi mai. Su pochi oggetti riconoscibili, con un modello pronto per ciascuno.

Quanto costa aggiungerla?

Dipende da modello, sessione, fallback e performance. Se il modello va costruito dentro il budget del sito, di solito non la propongo. Approfondimento: costo di un sito animato o 3D.

L'AR sostituisce le foto?

No. Foto o render restano: sono il fallback.

La mia scelta

Propongo la WebAR quando gli oggetti sono pochi e riconoscibili, il modello esiste o ha un incarico definito, l'invito si esprime in una frase e il testo è in HTML. Non la propongo come elemento decorativo su un catalogo, né all'interno di un budget che deve coprire anche la produzione dei modelli.

Su Brionvega: modelli di un artista 3D esterno, sito in Vite, anteprima 3D e AR con model-viewer, integrati nel flusso. Servizio correlato: WebAR.

Per un progetto: Contatti.