Esempio di tour virtuale creato con Sketchfab.

Fino a pochi anni fa, quando volevamo inserire modelli 3D sul web ci scontravamo con alcuni problemi tecnici.

Innanzitutto, la velocità della rete Internet e la potenza di calcolo dei device, poiché entrambe non supportavano in modo adeguato la visualizzazione di grafica 3D. Oggi, fortunatamente, sia la rete fissa che quella mobile arrivano quasi ovunque con velocità molto elevate. Anche la questione della potenza di calcolo è ormai risolta e la maggior parte dei PC e degli smartphone sono ormai in grado di gestire grafica 3D senza difficoltà.

C’era però un ulteriore problema tecnico: fino a 7 o 8 anni fa per visualizzare grafica 3D era necessario installare applicazioni dedicate e questo rendeva complicato condividere contenuti 3D, poiché per vederli era indispensabile l’applicazione di riferimento.

Oggi però esiste un linguaggio web che ha permesso di superare anche questo scoglio. Si tratta del linguaggio WebGL (acronimo di Web Graphics Library), un linguaggio ormai accettato da tutti come standard, che permette di inserire un oggetto 3D all’interno di una pagina web e garantisce che qualsiasi browser sia in grado di visualizzarlo. Non c’è più quindi bisogno di installare applicazioni dedicate, perché basta un normale browser web (come Chrome, Firefox, Safari…).

Il linguaggio WebGL oggi ci permette di pubblicare un modello 3D sul web, con la certezza che potrà essere visualizzato con qualsiasi browser e da qualsiasi dispositivo, sia da PC che da smartphone. L’applicazione più diffusa, basata su WebGL, è oggi Sketchfab: https://sketchfab.com/.

Sketchfab è un’applicazione web che permette di pubblicare, condividere e vendere modelli 3D attraverso Internet. Ospita migliaia (ormai forse milioni) di modelli 3D di qualsiasi tipo, basta dare un’occhiata al sito web per rendersi conto della vastità dei contenuti offerti dalla piattaforma. La maggior parte di questi modelli sono solo visualizzabili, ma molti sono anche disponibili per il download gratuito e molti altri sono acquistabili.

La grande forza di Sketchfab consiste nel costo accessibile, nella facilità d’uso e nella perfetta ottimizzazione anche per smartphone e tablet.

Esempio di galleria di modelli 3D creata con Sketchfab.

In fase di registrazione possiamo scegliere tra il profilo per INDIVUDALS, utilizzabile solo a scopo personale, o quello per COMPANIES, che ci permette di utilizzare Sketchfab a scopo commerciale. Ad esempio, se scegliamo il profilo INDIVIDUALS non possiamo usare come nome account il nome di un’azienda o di un’attività professionale, non possiamo inserire il link a un sito web aziendale e nell’immagine non possiamo inserire un logo aziendale. In questi casi, dobbiamo registrarci con uno dei piani previsti per il profilo COMPANIES.

I piani tra cui possiamo scegliere quando ci registriamo sono sei: il BASIC è completamente gratuito, mentre gli altri (PRO, PREMIUM, BUSINESS e ENTERPRISE) sono a pagamento e si parte dai 7 euro mensili del piano PLUS, per arrivare ai 249 euro di quello BUSINESS. Ovviamente, ad un maggior costo corrispondono maggiori funzioni.

La differenza principale consiste nel numero di modelli pubblicabili: 1 al mese per il piano BASIC, 500 al mese con il piano BUSINESS. Il conteggio del limite è particolare, perché non vengono considerati i modelli caricati e non pubblicati (salvati in bozza), quelli resi disponibili per il download gratuito e quelli messi in vendita nello Store di Sketchfab. Ci sono poi molte altre differenze, ad esempio nella dimensione dei file che possiamo caricare, nel numero di annotazioni o di audio che possiamo associare ad ogni modello, la possibilità di rendere il modello privato e di proteggerlo con una password, e molto altro.

A questo link è possibile vedere tutte le differenze e scegliere il piano con cui registrasi: https://sketchfab.com/plans.

Una volta che ci siamo registrati, dal menù in alto destra, in corrispondenza del nostro avatar, possiamo scegliere la voce SETTINGS e personalizzare le informazioni relative al nostro account: possiamo inserire una breve bio, i nostri contatti, una foto, possiamo fare l’upgrade ad un piano di livello superiore, possiamo anche cancellare definitivamente l’account.

Per caricare un modello 3D, ci basta cliccare sul tasto UPLOAD e trascinare il file nella finestra di caricamento.

Possiamo caricare quasi qualsiasi formato, tutti quelli più diffusi nel mondo del 3D sono accettati senza problemi. Tuttavia, quelli consigliati sono: .obj, .blend, .fbx, .gltf (+.bin), .glb; a questo link una lista completa dei formati accettati: clicca qui.

Una volta completato l’upload, possiamo inserire le informazioni relative al nostro modello: titolo, descrizione (con possibilità di testo formattato, immagini e link), categorie, tags. Possiamo, inoltre, impostare la visibilità del nostro modello (pubblica, privata o protetta con password – ma non nel piano BASIC), possiamo decidere se renderlo scaricabile o se venderlo, possiamo convertirlo nei formati per Facebook e per applicazioni di realtà aumentata.

Attraverso il pulsante EDIT 3D SETTINGS possiamo accedere ad alcuni strumenti molto utili per migliorare la visualizzazione del nostro modello 3D da parte degli utenti. Gli strumenti sono suddivisi in 8 sezioni: Scene, Lighting, Materials, Post processing filters, Annotations, Animation, VR/AR, Sound.

SCENE

Innanzitutto, possiamo ruotare il modello per cambiare la posizione iniziale, sia usando le frecce in corrispondenza degli assi, sia usando gli strumenti di rotazione avanzata.

Possiamo poi scegliere la modalità di resa del colore (CLASSIC, PBR, MATCAP) e il tipo di ombreggiatura: con ombre artificiali (LIT), senza ombre artificiali (SHADELESS). La prima modalità ci permette, successivamente, di impostare le fonti di luci nella sezione LIGHTING, oppure di utilizzare le luci ambientali se scegliamo l’opzione ENVIRONMENT in BACKGROUND.

Possiamo impostare la deformazione ottica con cui è visualizzato il modello (FIELD OF VIEW): 45° è il valore di default che corrisponde a una visione prospettica tradizionale, mentre 1° permette una vista perfettamente ortogonale del modello.

Dalla versione PRO in avanti, possiamo anche impostare limiti allo spostamento del modello (PAN), allo zoom (ZOOM IN e ZOOM OUT) e alla rotazione (VERTICAL e HORIZONTAL), in modo da limitare le possibilità di visualizzazione dell’utente. Ad esempio, se non vogliamo che l’utente possa vedere il retro del modello, possiamo impostare una rotazione di soli 180°.

Possiamo impostare la visualizzazione WIREFRAME di default, per rendere visibili i lati dei poligoni che compongono la mesh del modello.

Infine, possiamo scegliere lo sfondo (BACKGROUND):

• un ambiente tra quelli disponibili nella sezione LIGHTING o importando una immagine a 360° (quest’ultima possibilità non disponibile nel piano BASIC),
• un’immagine tra quelle disponibili o importandone una personalizzata (quest’ultima possibilità non disponibile nel piano BASIC),
• un colore uniforme.

Gli strumenti di rotazione.

Gli strumenti per limitare la rotazione del modello 3D da parte degli utenti.

La scelta dello sfondo.

LIGHTING

In questa sezione possiamo personalizzare l’illuminazione del nostro modello.

Se in BACKGROUND abbiamo scelto ENVIRONMENT, l’illuminazione dell’oggetto sarà legata all’ambiente che scegliamo e non possiamo intervenire in alcun modo. Possiamo solamente scegliere uno degli ambienti disponibili oppure importarne uno in forma di immagine a 360°.

Se, invece, vogliamo personalizzare in modo maggiore l’illuminazione, in questa sezione dobbiamo spegnere ENVIRONMENT e attivare LIGHTS (ma dobbiamo aver scelto l’opzione LIT nella sezione precedente).

Una volta attivate le luci, possiamo scegliere uno dei sei preset cliccando su LOAD LIGHTING PRESET. Per ogni luce possiamo:

• accenderla o spegnerla,
• modificare la posizione (traslandola e ruotandola),
• decidere il tipo di luce: Directional (simile alla luce del sole), Point (simile a una lampadina), Spot (simile a un faretto), Hemi (una semisfera luminosa).

Per ogni tipo di luce possiamo variare alcune caratteristiche, tra cui:

• l’intensità,
• il colore,
• attivare o disattivare l’opzione ATTACHED TO CAMERA, per decidere se la fonte luce deve ruotare insieme al modello o restare fissa,
• personalizzare la resa delle ombre (CAST SHADOWS e SHADOWS BIAS).

Inoltre, alla voce GROUND SHADOWS possiamo creare un’ombra tra la base e il modello, modificandone l’intensità, i bordi, la distanza e il raggio di diffusione. Si crea un effetto di ombreggiatura molto suggestivo, utile per accentuare l’effetto di tridimensionalità.

Il settaggio delle luci.

Impostazione dell’ombreggiatura sotto il modello 3D.

La scelta dell’ambiente di sfondo.

MATERIALS

In questa sezione possiamo gestire in maniera avanzata texture complesse. Nel caso di modelli 3D che derivano da rilievi 3D (OBJ con texture) non ci sono funzioni particolarmente utili.

POST PROCESSING FILTERS

Qui possiamo gestire la resa del colore del nostro modello. Abbiamo a disposizione molti strumenti, che in certi casi assomigliano ai filtri dei programmi di fotoritocco, che ci permettono di migliorare e correggere molte impostazioni legate al colore e alla luminosità. É importante sottolineare che le modifiche che apportiamo con questi strumenti modificano solamente la visualizzazione, mentre il modello 3D vero e proprio resta inalterato; ciò significa che se torniamo a scaricare il nostro modello o se qualcuno lo scaricherà o la acquisterà, tali modifiche non ci saranno.

Con gli strumenti che abbiamo a disposizione possiamo:

• aggiungere ambient occlusion ed enfatizzare le ombreggiature (SSAO),
• creare l’effetto della grana della pellicola, anche animata (GRAIN),
• aumentare la nitidezza dei dettagli (SHARPNESS),
• simulare l’effetto di aberrazione cromatica (CHROMATIC ABERRATIONS),
• creare un alone scuro lungo i bordi della finestra di visualizzazione (VIGNETTE),
• aumentare l’effetto luminosità (BLOM),
• correggere i valori di esposizione, luminosità, contrasto e saturazione (TONE MAPPING),
• bilanciare le tonalità di colore (COLOR BALANCE).

ANNOTATIONS

Possiamo applicare annotazioni sul modello, in modo da fornire informazioni utili su specifiche parti. Un’annotazione è una finestra pop-up, che può contenere testo e immagini e che è indicata da un pallino numerato: quando un utente clicca sul pallino, la finestra si apre.

Un utente può anche navigare tra le annotazioni usando le apposite frecce presenti nella parte bassa del visualizzatore; inoltre, è possibile impostare un tour automatico tra le varie annotazioni, in modo tale da creare un tour virtuale del modello 3D (come quello che compare all’inizio di questo tutorial).

Ogni annotazione ha un titolo e una descrizione, una posizione sul modello e una vista predefinita, cioè è possibile impostare una inquadratura particolare per quando un utente clicca sull’annotazione. Per aggiungere un’annotazione, basta fare doppio clic sul modello nella posizione in cui vogliamo che compaia. Il numero di annotazioni che possiamo aggiungere varia in base al nostro piano, ad esempio con il piano BASIC è possibile aggiungerne fino a 5.

ANIMATIONS

Se carichiamo un modello animato, in questa sezione possiamo attivare le animazioni che sono già state create e impostate all’interno del programma di modellazione 3D.

VR/AR

In questa sezione possiamo impostare la visualizzazione del modello per i visori di Realtà Virtuale e Aumentata, come Google Cardboard o Oculus Rift.

In particolare, possiamo:

• decidere la posizione dell’utente facendo doppio clic sulla griglia che simula il pavimento,
• possiamo definire il rapporto di scala ingrandendo o rimpicciolendo l’anteprima dell’utente (in WORLD SCALE),
• possiamo stabilire l’altezza del modello rispetto al pavimento (in FLOOR LEVEL),
• se come background abbiamo scelto un ENVIRONMENT, lo vedremo come sfondo della scena al posto dello sfondo grigio.

SOUNDS

Possiamo abbinare al nostro modello 3D uno o più file audio (musiche, suoni, testi…); il numero di file che possiamo aggiungere varia in base al nostro piano, ad esempio con il piano BASIC è possibile aggiungere un solo file audio.

Una volta terminato il 3D SETTING, nella pagina del nostro modello 3D, sia noi che gli utenti possiamo interagire con esso. All’interno del visualizzatore ci sono alcuni strumenti con cui possiamo:

• vedere i comandi per la visualizzazione (HELP),
• gestire il volume del contenuto audio (se è stato aggiunto),
• gestire la modalità di vista (ORBIT o FIRST PERSON) e la risoluzione della texture (quando disponibile),
• attivare il MODEL INSPECTOR per visualizzare il modello in altre modalità,
• attivare la visualizzazione per dispositivi VR/AR,
• attivare la visualizzazione a schermo orizzontale o a tutto schermo.

Sotto il visualizzatore, nella PARTE bassa della pagina, abbiamo altre opzioni. Possiamo commentare il modello, mettere un like, vedere informazioni descrittive e tecniche (MORE MODEL INFORMATION). Possiamo aggiungere il modello a una collezione (ADD TO), possiamo condividerlo come link (SHARE), possiamo copiare il codice HTML per inserirlo all’interno di una pagine web (EMBED).

Quest’ultima possibilità è molto interessante, perché possiamo creare un codice HTML per inserire il visore 3D all’interno di qualsiasi pagina web, semplicemente copiandolo e incollandolo. In questo modo possiamo creare delle vere e proprie gallerie di modelli 3D direttamente sul nostro sito web. Ad esempio, questa è la modalità che abbiamo usato per il nostro 3D Virtual Museum.