Portare il virtuale nella realtà con AR su Shopify

La realtà aumentata è qualcosa che abbiamo visto spuntare sempre di più, ma che cos'è esattamente e come si fa? Tutti conoscono la realtà virtuale grazie a videogiochi e film come Ready Player One. In Virtual Reality indossi un visore VR e vivi una realtà completamente sintetica, rimuovendoti dal mondo fisico e permettendoti di immergerti in un mondo completamente diverso. Nel frattempo, la realtà aumentata offusca il confine tra virtuale e reale. Consente all'utente di sperimentare contenuti artificiali come parte dell'ambiente fisico ed è destinato a prendere d'assalto l'e-commerce, poiché Shopify sta abbracciando la tecnologia per abilitare l'AR per i proprietari dei suoi negozi.

Recentemente Shopify ha integrato l'uso di ARKit di Apple per fornire contenuti AR ai suoi utenti e da allora noi di Eastside Co lo abbiamo sperimentato. Più di recente abbiamo collaborato con Lazy Oaf per fornire versioni in realtà aumentata della loro nuova linea di scarpe sviluppate in collaborazione con le leggendarie Doc Martens. Portare l'estetica unica dei design di Lazy Oaf nella realtà aumentata attraverso la modellazione 3D è stata una sfida divertente e, credo, ha aggiunto un livello di interattività allo shopping online simile a quello che in precedenza era disponibile solo nei negozi al dettaglio.

Quindi cosa serve per realizzare un prodotto virtuale per AR e quali sono i problemi che emergono lungo il percorso?

Prepararsi

Lazy Oaf è stato così gentile da inviarci i prodotti reali prima del lancio, così ho potuto avere un'idea di come fossero i prodotti. Questo può essere estremamente vantaggioso poiché a volte le foto non riescono a catturare i tipi o la sensazione dei materiali utilizzati nel prodotto e questo può essere importante per far sembrare il prodotto più avanti nella linea. Il nostro fotografo e operatore video, Dave, ha gentilmente fotografato ciascuna delle scarpe Doc Marten dalla parte anteriore, posteriore, entrambi i lati, dall'alto e dal basso, nonché da varie angolazioni per aiutare a catturare alcuni dettagli delle superfici prima che iniziassi il processo di modellazione 3D.

Dopo aver ritagliato e ridimensionato le foto per renderle accurate l'una con l'altra, le ho disposte come progetti in 3DS Max 2018.

Modellazione di base

Da qui inizia la modellazione con forme semplici. La scarpa è nata come un unico piano che è stato estruso e manipolato per adattarsi alla forma della suola.

Una volta completata la forma di base ho tagliato i bordi che avrebbero formato il battistrada della suola e li ho estrusi seguiti dal resto della suola, applicando alcuni modificatori per ottenere il fondo arrotondato della suola nel suo insieme. Dopo un'ulteriore modellazione di base, la suola era pronta per essere inserita in ZBrush per eseguire il lavoro ad alta risoluzione.

Modellazione 3D ad alta risoluzione

Prendendo un modello a bassa risoluzione e aumentando il numero di poligoni, il modello si attenua. Questo processo è stato eseguito su alcuni livelli dando una superficie molto più liscia che mi ha permesso di aggiungere punti lungo l'orlo della suola e scolpire manualmente i fori dei punti sulla superficie per far sembrare che fossero punti veri.

Una volta levigata e levigata la suola ho iniziato dalla parte superiore della scarpa, creando una forma base che seguisse il profilo della scarpa stessa.

Utilizzando questa versione grezza come base sono riuscito ad estrarre le forme di tutti i pezzi che componevano il dettaglio della scarpa. Tutti i pezzi di materiale sovrapposti che formavano la forma sono stati estratti da questa forma e disposti di conseguenza. L'area allacciata sulla parte anteriore della punta è stata scolpita.

Da questa fase si è trattato di aggiungere gli accessori come le fibbie e i lacci sulla punta e ovviamente altri piccoli dettagli come le cuciture per i pannelli.

La parte difficile

Con un po' di colore quel modello è sicuramente finito, giusto? Sfortunatamente no. Il modello 3D della scarpa Doc Marten nel suo insieme è composto da poco meno di 10 milioni di poligoni. Anche se gli smartphone che portiamo nelle nostre tasche ora sono dispositivi informatici incredibilmente potenti, avrebbero difficoltà a visualizzare tanti poligoni tutti in una volta. Proprio come un editor di film, devi scegliere le parti importanti di ciò che stai cercando di presentare. Noterai che l'interno della scarpa non è finito. Questo è stato il primo pezzo che ha colpito il pavimento della sala di montaggio, per così dire. L'interno della scarpa non ha avuto un'importanza significativa per l'estetica generale e quindi non modellarlo ha ridotto la complessità del modello (oltre a farmi risparmiare un po' di tempo). Ma ci restano ancora quasi 10 milioni di poligoni.

Poiché la realtà aumentata rende il modello in tempo reale, dobbiamo ridurre la complessità. Ciò comporta la riduzione del conto alla rovescia del poligono a livelli gestibili ed è un processo incredibilmente noioso. Fortunatamente la maggior parte delle parti è nata come versioni a basso poligono e sono stato in grado di tornare a quelle parti e riutilizzarle per questo compito. Nello screenshot qui sotto puoi vedere che mentre la forma è rappresentativa della scarpa stessa, manca dei dettagli più fini come i punti, i bordi leggermente smussati e la levigatezza generale offerta da tutti quei poligoni. Tuttavia, puoi anche vedere che il conteggio dei poligoni è stato ridotto da quasi 10 milioni a poco più di 6000 e potrebbe effettivamente essere ridotto un po' ulteriormente se necessario, ma 6000 poligoni rientrano ampiamente nel budget e avere una geometria per supportare la forma può essere utile per la fase successiva.

Riportare i dettagli

Quindi ora abbiamo due versioni della scarpa: una versione ad altissima risoluzione e una versione a bassa risoluzione che renderà veloce e fluido sull'hardware mobile. Ma ora ci mancano i dettagli che direi che rendono la scarpa unica.

Per trasferire i dettagli ad alta risoluzione alla versione a bassa risoluzione, dobbiamo "infornarli" in varie mappe di texture che forniscono informazioni alla luce virtuale nella nostra realtà aumentata. Per fare ciò dobbiamo prima scartare il nostro modello e appiattirlo, creando una mappa UV. Che cos'è una mappa UV? È una rappresentazione 2D del nostro modello se fosse spiegato come un modello di origami; consente alle trame di essere proiettate sulla sua superficie più avanti lungo la linea.

Per mantenere i dettagli nitidi e puliti, ho deciso di dividere il modello in due parti. La suola, fibbie e cinturini in una parte, e poi la parte superiore in un altro. Ciò mi ha permesso di utilizzare 2 piccole mappe di texture invece di una singola grande che porta a una dimensione del file più piccola in modo che si carichi più velocemente.

Di seguito puoi vedere le mappe UV, le versioni appiattite di entrambe le parti.

Una volta fatto ciò, possiamo cuocere le nostre mappe e lavorare sulle trame, aggiungendo le informazioni sul materiale che faranno sembrare il prodotto simile al prodotto.

Il viola nello screenshot qui sopra può sembrare strano, ma questo è il modo principale con cui riportiamo i dettagli nel nostro modello. La superficie del modello ad alta risoluzione viene proiettata sul modello a risoluzione inferiore e registrata nei valori di rosso, verde o blu a seconda di come punta la superficie. Quando viene applicato al modello e viene colpito da una sorgente di luce, il colore del pixel colpito dalla luce determina la direzione in cui la luce rimbalza, creando una superficie 3D artificiale senza il costo del poligono. Questo è più ovvio con i punti.

Una volta create queste mappe, ora si tratta solo di applicare materiali e texture alla superficie.

Diventare fisico

I moderni renderer in tempo reale utilizzano un sistema chiamato PBR o Physical Based Rendering. Ciò significa che il motore di illuminazione e rendering cerca di mappare accuratamente il modo in cui si comporta la luce quando colpisce la superficie di un modello in base al materiale di quella superficie. Il moderno software di texturing ha reso molto semplice la creazione di materiali realistici. Substance Painter è stato determinante nel consentire la ricreazione digitale delle superfici di questi oggetti della vita reale. Utilizziamo principalmente 5 diverse mappe di texture per applicare varie proprietà al modello:

• Mappa dei colori Questo è come sembra, è il colore di base del materiale.
• Metalness Si tratta di una mappa in bianco e nero che determina quale parte del modello è in metallo o non in metallo.
• Rugosità Proprio come sembra, definisce quanto sono ruvide o lisce le superfici del modello.
• Occlusione ambientale Una mappa in scala di grigi che imita quelle minuscole ombre di contatto in cui due superfici si incontrano nell'angolo, aggiunge ulteriore profondità all'illuminazione.
• Mappa normale Questa è la mappa viola mostrata in precedenza ed è responsabile di mostrare i dettagli della superficie - come mostrato di seguito, non c'è quasi nessun dettaglio quando si disattiva la mappa normale sulla suola e quindi sulla parte superiore della scarpa.

Una volta completato il processo di testurizzazione, abbiamo qualcosa che sembra piuttosto convincente. I passaggi finali consistono nell'esportare il modello e le trame e convertirli in un formato compatibile con AR. In questo caso è USDZ in quanto è il formato utilizzato da Apple ARKit.

Se sei ancora con me, ben fatto! Il risultato di AR è molto più affascinante del processo di realizzazione, ma spero che questo piccolo sguardo dietro le quinte mostri quanto ci sia nel processo di ricreare manualmente una rappresentazione virtuale di un prodotto reale. Nuove tecnologie come la scansione 3D e la fotogrammetria renderanno il processo più semplice in futuro, ma in questo momento la qualità non è del tutto presente a meno che non si investa una grossa somma di denaro nella tecnologia.

Siamo ancora agli albori della tecnologia della realtà aumentata: man mano che continua ad avanzare e man mano che i telefoni cellulari diventano più potenti e capaci, inizieremo a vedere questa tecnologia sempre di più nei luoghi di tutti i giorni. Mentre Ready Player One e altri film di fantascienza hanno reso popolare la realtà virtuale, credo che la realtà virtuale rimarrà nel regno dell'intrattenimento e dell'istruzione mentre la realtà aumentata diventerà pervasiva come Internet, specialmente quando tutti avremo i nostri aggiornamenti cibernetici. Forse è un po' lontano, ma fino ad allora almeno posso mettere delle scarpe sul tavolo e non farmi sgridare.

Visita Lazy Oaf e dai un'occhiata alle scarpe Dr Marten sul tuo iPhone o iPad con iOS e Safari 12.