Configuratore 3D Online: funzionalità del motore grafico

Non può esistere configuratore 3D senza motore grafico 3D.
In buona sostanza si tratta di quel sistema di metodi e funzionalità che permettono di visualizzare elementi 3D all’interno di un mondo (chiamata “scena“) e che sfruttano librerie grafiche di visualizzazione. Nel nostro caso specifico inoltre parliamo di un ambiente di tipo online e quindi utilizzabile da browser web (Explorer, Chrome, Safari, etc) e da mobile (smartphone e tablet).

Di seguito una breve analisi di tutte le componenti che un motore grafico deve avere per permettere lo sviluppo di un configuratore 3D online.

1. Caricamento dei modelli

Ovviamente il caricamento dei modelli è la funzionalità principale di un motore grafico per configurazione 3D online in quanto serve a visualizzare nel browser il modello tridimensionale generato da software di modellazione dedicati (ad esempio Autodesk 3DS Max o Maya, Blender, Solidworks e molti altri). Una delle discriminanti di questa sezione è la scelta dei formati che il motore grafico può gestire in quanto incide molto sulle modalità di esportazione dei modelli stessi. Formati standard di esportazione e apertura nel web sono .obj (con file dei materiali .mtl esteno), .fbx (include anche un ottimo supporto alle animazioni), .gltf (relativamente nuovo), .dae, etc

2. Gestione dei materiali

Imprescindibile dal caricamento dei modelli è la gestione dei materiali legati alle singole parti del modello stesso. Con materiale non si intende unicamente l’immagine da applicare (detta texture) ma si intendeono anche tutte le proprietà che servono a identificare il comportamento della luce di tale materiale. Pensiamo alle differenze sostanziali di un materiale legno da un materiale metallo. E’ chiaro quanto una gestione dei materiali efficace e strutturata permette di visualizzare un modello 3D in modo realistico. Tecniche più recenti come il PBR (Phisically Based Rendering) permettono di definire un materiale attraverso più texture e più parametri rendendo l’aspetto finale simile al fotorealismo.

Desdinova WebGL Engine: materiali PBR

3. Gestione degli accessori e delle ancore

Una delle componenti dei configuratori 3D online è quella di poter selezionare differenti accessori ed opzioni legate al modello stesso. Pensiamo ad esempio ad un mobile da soggiorno del quale è possibile scegliere differenti tipologie di maniglie. Tali elementi devono essere ovviamente modellati singolarmente in 3D ma soprattutto devono poter essere collocati nella posizione esatta in cui devono stare, anche in riferimento al volume che occupano. Un sistema di agganci (chiamate “ancore“) aiuta, in fase di progettazione, a definire i punti in cui caricare gli accessori. Spesso tali ancore vengono gestire attraverso elementi detti “dummy” che non sono altro che indicatori posizionali x,y,z (con relativi parametri custom).

4. Gestione degli hotspot

Un configuratore online è prima di tutto un applicativo che deve rendere facile ed intuitiva la presentazione di un prodotto. In un contesto 3D risulta quindi fondamentale mostrare punti di interesse (chiamati “hotspot“) collocati direttamente sul modello stesso. Tali punti vengono spesso indicati con differenti icone grafiche (anche numerate) in modo da poter essere cliccati agevolmente durante la rotazione del modello o la navigazione della scena stessa. Al click tali icone punti devono poter mostrare informazioni contestuali alla parte interessata come ad esempio schermate modali di infomazioni, video e animazioni, apertura di link esterni o avvio di animazioni.

5. Gestione delle animazioni

Componente importante, anche se non fondamentale per tutti i configuratori 3D, sono le animazioni. Chiaramente i livelli di animazione possono essere differenti, dai più complessi come semplici rotazioni/spostamenti fino ad animazioni di aperture/chiusure, esplosioni, etc. Importante per un motore grafico è poter avere il controllo su tutte le fasi dell’animazione e riuscire, in casi specifici, a concatenarle tra loro in modo da generare animazioni più complesse ed eleaborate.

Desdinova WebGL Engine: animazioni

6. Gestione dell’ambiente

Più un modello è inserito nell’ambiente che lo circonda e più questo apparirà reale. E’ dunque importante poter gestire gli elementi intorno al modello stesso e, in generale, quelli facenti parte della scena in cui esso è collocato. Parliamo sicuramente della gestione delle luci (fondamentale per dare realismo ai materiali) ma anche dello sfondo ad esempio generato da uno skybox oppure da una immagine fissa. Altri elementi importanti sono la gestione delle ombre (proiettate realtime oppure generate precedentemente tramite shadow-map) e della nebbia (la quale aiuta anche a dissolvere il modello a distanze consierevoli). Più l’ambiente è ricco di particolari e funzionalità e più il progetto risulterà elaborato (a scapito, probabilmente, di una minore fluidità).

7. Gestione della camera e dei movimenti

Collocare un modello all’interno di una scena e visualizzarlo non rende il configuratore un configuratore 3D. Quello che attiva la tridimensionalità è la possibilità di potersi muovere all’interno dell’ambiente e poter ruotare/manipolare il modello principale. In questo caso un buon motore grafico deve permettere entrambi le possibilità: movimenti arbitrari della camera nella scena e manipolazione del modello. Queste due componenti garantiscono al configuratore una visualizzazione puntuale, realistica e innovativa del prodotto ma soprattutto permettono semplicità di interazione e customizzazione da parte dell’utente.

Desdinova WebGL Engine: controllo della camera avanzato

8. Gestione del post-processing

Un’altro elemento importante è la possibilità del motore grafico di gestire gli effetti di post-processing. Ricadono in questa sezione effetti di bagliore delle luci (chiamato bloom), antialiasing (utile per migliorare la resa grafica), effetto bokeh o di blur, ssao (Screen Space Ambient Occlusion, permette di simulare le ombre generate dalle occlusioni dei modelli) e tanti altri. E’ bene specificare quanto questi effetti di post-processing possano essere una discriminante importante sulle prestazioni del motore grafico e del configuratore rendendo necessaria una scelta ponderata nel loro utilizzo. Inoltre, dovendosi confrontare anche con i dispositivi mobili, si attuano spesso azioni di ottimizzazione selettiva degli effetti di post-processing abilitandoli solo su alcuni di essi.

Desdinova WebGL Engine: effetto bloom e environment map

9. Gestione dei suoni

Suppur non facente parte del motore grafico, i suoni possono risultare un elemento utile per la realizzazione di un configuratore 3D. In questa sezioni ricadono tutti gli elementi audio, musiche ed effetti sonori, atti a immergere l’utente nella scena in modo completo. Pensiamo ad esempio alla configurazione di una motocicletta che permette la scelta di un motore o di una cilindrata. In questo caso il suono dell’accensione del motore potrebbe rendere ancor più realistica la scena e dunque la configurazione stessa.

10. Conclusioni: tutto insieme

Abbiamo visto come un configuratore 3D ha bisogno di funzionalità e caratteristiche proprie del motore grafico che lo implementa. E’ quindi indubbio che un ottimo configuratore è dato da un ottimo motore grafico 3D. Nel mondo online è necessario che sia più che ottimo in quanto si scontra con una moltitudine di fattori, primo fra tutti la compatibilità con diversi browser web e dispositivi (desktop o mobile). E’ necessaria quindi molta esperienza e diverse capacità di sviluppo per poter arrivare a realizzare un motore grafico 3D solido e performante.

Daniele Ferlahttps://www.desdinova.it
Aiuto aziende e professionisti che hanno bisogno di sviluppare in modo creativo, alternativo ed efficace la loro identità digitale e che desiderano ottenere visibilità e risultati concreti attraverso lo sviluppo di strumenti online dall'elevata innovazione e personalizzazione.
Aiuto aziende e professionisti che hanno bisogno di sviluppare in modo creativo, alternativo ed efficace la loro identità digitale e che desiderano ottenere visibilità e risultati concreti attraverso lo sviluppo di strumenti online dall'elevata innovazione e personalizzazione.

Must Read

Abilitare l’autocomplete(intellisense) per Visual Studio in Unity 3D

Per chi programma molto Unity3D con gli script, purtroppo può capitare che l'editor Visual Studio non riconosca l'auto-completamento (o intellisense) degli oggetti...

Configuratore 3D Online: funzionalità del motore grafico

Non può esistere configuratore 3D senza motore grafico 3D. In buona sostanza si tratta di quel sistema di metodi e funzionalità che permettono di visualizzare elementi 3D all'interno di un mondo (chiamata "scena") e che sfruttano librerie grafiche di visualizzazione. Nel nostro caso specifico inoltre parliamo di un ambiente di tipo online e quindi utilizzabile da browser web (Explorer, Chrome, Safari, etc) e da mobile (smartphone e tablet).

Configuratore 3D Online: Componenti di configurazione e di interazione frontend

Un configuratore 3D è, per definizione, un applicativo che deve permettere la personalizzazione di un prodotto rispetto a scelte compiute dall'utente. Esistono chiaramente diversi livelli di personalizzazione, dal più semplice al più complesso, che influiscono sia sulle caratteristiche estetiche ma anche sui comportamenti del prodotto stesso. La personalizzazione quindi deve poter essere eseguita in modo autonomo attraverso una interfaccia frontend efficace, usabile e soddisfacente alla vista