3 tecniche per creare siti web in 3D
Per creare siti web in 3D esistono principalmente 3 tecniche:
- inserire immagini bidimensionali create in 3D (rendering).
- inserire oggetti in 3D all'interno del sito per consentire all'utente di ruotarli e vederli da ogni angolazione (3D in runtime).
- navigare in uno spazio web totalmente tridimensionale (webGL/OpenGL).
In questo articolo verrà esposta la prima tecnica con un esempio concreto.
Cinema4D: lo strumento perfetto per il web design avanzato
Nel 2003 ho realizzato uno dei miei primi siti web utilizzando 3D Studio Max. Dopo un paio d'anni di sperimentazione ho sostituito 3DSM con Cinema4D.
La mia scelta è stata condizionata da diverse considerazioni su Cinema4D:
- un sistema relativamente semplice per la creazione di grafica 3D con un ottimo motore di rendering integrato.
- velocità nella lavorazione dei 3D e relativi rendering anche grazie alla presenza di una licenza multinodo.
- esportazione dei 3D per animazioni video o sequenze di immagini da montare in After Effects molto intuitiva.
- possibilità di avere (all'epoca) un training center piuttosto vicino che mi potesse guidare nello scoprire le funzioni principali del software.
Da subito sperimentai alcuni setup per crearmi uno stile web usando il 3D: linee pulite, colori saturi, illuminazione generalmente "sintetica", approccio minimalista.
Qui un esempio del mio primo rendering datato 2006, presente anche su Behance
Tipi di rendering per il web design
Rendering di immagini statiche
Nelle grafiche che ho creato negli anni ho sempre preferito utilizzare il 3D per realizzare determinati contenuti che potessero massimizzare l'efficacia del design dal punto di vista estetico-funzionale.
Esistono diverse scuole di pensiero e stili nel 3D: c'è chi realizza immagini fotorealistiche, chi è specializzato nella creazione di personaggi animati per film, pubblicità o cartoni, chi si specializza in ambito di rendering architettonico e design di interni ecc.
La mia idea fu di portare il 3D all'interno dei siti web per rappresentare determinati contenuti.
Al posto di usare Photoshop o Illustrator ho potuto creare immagini che si sono rivelate molto utili a livello tecnico e stilistico.
Non ho seguito quindi la direzione di creare rendering fotorealistici ricchi di dettagli scenici, ho preferito concentrarmi su alcuni dettagli di design, sul colore e sulla capacità di mescolare forme 2D e 3D per ottenere determinati effetti di comunicazione.
Qui possiamo vedere la fase di progettazione di un mini giardino zen che ho realizzato con Cinema4D 11, un elemento grafico che verrà successivamente inserito nel sito web del cliente.
L'immagine seguente mostra il rendering finito, sottoposto ad una leggera post produzione in Photoshop per migliorare la resa cromatica rispetto al contesto di design del sito web.
Infine l'immagine viene inserita all'interno del sito web.
Rendering per il compositing
Tramite Photoshop utilizzo immagini realizzate in 3D con Cinema4D per generare particolari effetti di compositing. Wikipedia dà una definizione tecnico-storica perfetta per comprendere le potenzialità del compositing.
Il compositing è la combinazione di elementi visivi provenienti da fonti separate in singole immagini, spesso per creare l'illusione che tutti questi elementi siano parti della stessa scena. Oggi in quasi tutti i casi, il compositing viene ottenuto attraverso la manipolazione di immagini digitali, ma forme di compositing pre-digitale risalgono addirittura ai film di Georges Méliès alla fine del diciannovesimo secolo.Wikipedia
In sostanza il compositing è concettualmente un collage: si prendono immagini diverse, da diverse fonti, e si fondono insieme per crearne una nuova.
Nell'immagine seguente è visibile una pagina web del sito Alchemical Pixel. Lo scopo è quello di creare un collage (compositing) tra questa immagine del sito ed uno smartphone in 3D, dando l'illusione che lo smartphone visualizzi questa pagina.
Il primo passaggio è quello di estrapolare la pagina dal sito web con una cattura dello schermo (screenshot). Questa sarà la prima immagine utilizzata per il compositing
Nell'immagine seguente è visibile il design di uno smartphone stilizzato, realizzato interamente in 3D.
Le due immagini vengono aperte in photoshop e sovrapposte. La prima immagine viene ritagliata, inclinata e sovrapposta al monitor dello smartphone per andare a creare una nuova grafica dello stesso sito web.
Vengono poi aggiunte delle leggere ombreggiature sulle immagini sovrapposte per aumentare il livello di realismo.
Qui il risultato finale con la fusione dei due elementi.
In questo caso il 3D si è rivelato molto utile per illustrare una caratteristica dei servizi di Alchemical Pixel, ovvero il web design responsivo: una pagina deve potersi caricare correttamente sui più diffusi dispositivi.
Usando il 3D è stato possibile mostrare concretamente il risultato ed illustrare i vantaggi del responsive in modo visivo. Se il sito web avesse utilizzato solo le parole la comunicazione sarebbe stata sicuramente meno chiara ed efficace perché l'utente avrebbe dovuto immaginare un risultato senza vederlo, estrapolando parole ed interpretando concetti in modo soggettivo.
In questo caso le immagini danno l'idea del servizio in modo oggettivo e quindi un potenziale cliente può comprendere immediatamente l'utilità di dotarsi di un servizio web che sviluppi soluzioni responsive.
Rendering di sequenze immagini
Le sequenze di immagini permettono di creare brevi animazioni.
Si rivelano molto utili in due casi:
- gif animate
- animazioni legate allo scroll del mouse o tramite touch
Le gif animate consentono di rappresentare processi e lavorazioni particolari in movimento che non sarebbero chiare ed esaustive con delle singole immagini.
Le scroll animation sono molto utili per fornire all'utente una presentazione più fluida dei contenuti. La combinazione di immagini, testo ed animazioni consente di focalizzare l'attenzione dell'utente su specifici aspetti del contenuto: l'occhio segue un percorso cognitivo definito a monte dal marketing e realizzato dal web designer.
Entrambe le tecniche migliorano sensibilmente la UX (esperienza utente).
Riassumendo, i vantaggi e le caratteristiche di queste tecniche sono:
- esperienza più immersiva da parte dell'utente.
- possibilità di rappresentare contenuti in modo dinamico, interattivo e coinvolgente.
- miglioramento nella chiarezza di quello che si vuole comunicare.
- fluidità di fruizione del contenuto.
- miglioramento della focalizzazione dell'osservatore.
- definizione di percorsi cognitivi che bilanciano aspetti di marketing e di web design.
Tutti questi aspetti e vantaggi vanno quindi a massimizzare l'efficacia della comunicazione: il prodotto o servizio illustrati con queste tecniche sono più facilmente fruibili e memorizzabili da parte del potenziale cliente.
Rendering 3D per creare video
In 3D è possibile realizzare anche dei veri e propri video. È inoltre possibile effettuare il compositing mescolando elementi 2D, 3D e video.
In sostanza si aggiungono immagini in 2D/3D sovrapposte ad un video per aggiungere elementi non presenti al momento delle riprese. Questo è reso possibile da una tecnica denominata 3D camera tracking.
Rendering veloci ed accurati via GPU
Attualmente sto utilizzando Redshift per alcuni rendering nei siti web in 3D. Redshift è un motore di rendering che permette di realizzare immagini ed animazioni fotorealistiche.
Per il cliente ci sono due grandi vantaggi nell'avvalersi di un servizio di rendering 3D basato su Redshift:
Il primo è che RedShift è estremamente veloce nel mostrare le anteprime delle immagini, attività che solitamente richiede parecchio tempo. Questo riduce i tempi di lavorazione consentendo di riassegnare il tempo risparmiato in attività più produttive (migliorare la qualità dell'immagine, curare maggiormente determinati dettagli ecc.).
Il secondo è nella qualità dell'immagine: nel caso di rendering fotorealistici RedShift si dimostra uno strumento eccellente per rappresentare prodotti aziendali di qualsiasi tipo, con un grado di realismo anche superiore alla fotografia.
Vantaggi del 3D lato marketing
Immaginiamo di dover lavorare solo con le foto. Ogni piccola variazione di un dettaglio di prodotto o più semplicemente una variante colore ci obbliga a rivolgerci ad un fotografo che dovrà necessariamente rifare le foto utilizzando lo stesso processo di produzione.
Nel 3D questo problema viene eliminato: una volta definito il modello basterà sostituire il materiale e la posizione della camera virtuale per avere una nuova immagine dello stesso prodotto, con varianti colori e cambio dell'angolo di inclinazione della "foto". Non sarà quindi nemmeno necessario rispedire il prodotto al fotografo perché l'immagine in 3D sarà già pronta per essere renderizzata con le nuove modifiche.
Inoltre in determinati contesti si rivela molto utile avere una preview rapida del rendering in bassa risoluzione per scegliere la giusta inquadratura prima di effettuare il rendering definitivo.
Il rendering inoltre ha una qualità nettamente più alta: questo aspetto è dovuto ad un motivo tecnico. Le immagini in 3D possono essere create alla dimensione desiderata. Se per esempio volessimo un'immagine rettangolare larga un metro il software 3D potrebbe fornirla senza alcuna perdita di dettaglio.
Nelle foto invece esiste un problema relativo al limite di "risoluzione" della fotocamera. Ingrandendo l'immagine oltre la propria effettiva risoluzione (oltre il 100%) otteniamo un effetto di sgranatura e sarebbe quindi necessario un ulteriore lavoro di correzione in Photoshop che comunque non garantirebbe mai un'elevata qualità.
Come visto in precedenza è possibile utilizzarlo anche nel compositing perché ogni parte del modello, ogni livello o componente, ogni canale, luce e materiale può essere salvato in un livello separato di Photoshop. Questo amplia enormemente le possibilità espressive grafiche e di design per realizzare in sostanza qualsiasi contenuto di marketing basato sull'immagine.
Un esempio fra tutti è lo scontorno immagine: in 3D è possibile avere immagini già scontornate rispetto ai singoli pixel del bordo dell'immagine. Non solo è una perfezione non ottenibile con nessuno scontorno in Photoshop ma il canale che separa l'oggetto in 3D dallo sfondo è già separato dal software e salvato dentro l'immagine da elaborare.
Questo aspetto migliora notevolmente le fasi di compositing viste in precedenza da un punto di vista qualitativo e soprattutto di workflow.
Si possono inoltre creare immagini di prodotti non ancora realizzati nella realtà: processi denominati prototipazione e previsualizzazione.
La prototipazione in 3D consente di utilizzare lo stesso file per la creazione di immagini che verranno utilizzate dal reparto marketing per il sito web, per il catalogo e nei social network.
La previsualizzazione consente di visualizzare a monitor il prodotto finale per effettuare precise scelte di marketing e comunicazione prima dell'effettiva realizzazione del prodotto in CAD/CAM.
L'industria che orbita attorno al settore automotive, ad esempio, fa un grandissimo uso del 3D per visualizzare immagini delle auto e dei rispettivi dettagli. Spessissimo tutta l'immagine viene realizzata in 3D perché le grafiche dei siti web, dei cataloghi e dei video necessitano di lavorazioni che garantiscano lo stesso setup di luci e colori, utilizzando uno stesso modello che possa essere manipolato tra diversi reparti tecnici (CAD, prototipazione rapida, marketing e sales in primis).
Nei processi di previsualizzazione il cliente può quindi vedere l'anteprima di un prodotto prima di realizzarlo, con luci, ombre, materiali, inquadratura specifica e profondità di campo.
Un altro utilizzo molto utile è la possibilità di usare varianti di rendering per effettuare test di marketing.
Immaginiamo ad esempio un'azienda produttrice di sgabelli ed ipotizziamo che voglia sapere quali colori siano performanti in termini di vendita. Decide quindi di utilizzare 20 colori differenti a titolo di test. Usando le foto dovrebbe realizzare 20 sgabelli diversi prima di fare un test di marketing, soprattutto se oltre al colore utilizzasse materiali e texture differenti, con riflessioni e scattering (diffusione ottica) eterogenei.
In 3D sarà sufficiente cambiare materiale lavorando con la stessa identica illuminazione oppure con un'illuminazione specifica per il setup colore/materiale desiderato, con tutti i vantaggi derivati per quanto visto in precedenza.
I migliori software 3D nelle 3 diverse tecniche
Modellazione e rendering
Render Engine per l'esecuzione in runtime su pagine web
- BabylonJS
- ThreeJS
- Unity
Formati:
Navigazione immersiva in un ambiente 3D
Tecnologie chiave coinvolte:
Software per web design avanzato in 3D
Ce ne sono molti ma di seguito sono elencati quello che uso personalmente:
- Cinema4D (modellazione, rendering e animazioni 3D)
- Redshift (rendering fotorealistico)
- Red Giant (effetti speciali)
- After Effects (compositing e sequenze di immagini in post-produzione)
- Adobe Premiere (editing video)
- Photoshop (editing immagini e texture per il 3D)
- Illustrator (grafica vettoriale utilizzata nel 3D)
- Adobe Media Encore (codifica video e gif animate)
In questo articolo puoi vedere la mia pipeline personale per lo sviluppo di siti web.