ThreeJS: la libreria open source per il 3D sul web (1/4)

Sono lontani i tempi in cui, giocando a Doom o Tomb Raider, ci stupivamo della grafica 3D che riusciva a farci immergere in un ambiente realistico (forse un po' spigoloso, ma per quell'epoca era qualcosa di mai visto).

Abbastanza lontani anche i tempi in cui abbiamo iniziato ad esplorare il mondo con Google Earth che utilizza un sistema di modellazione 3D per creare un effetto di profondità e realismo tale da farci credere di essere realmente tra montagne, colline e valli di paesi lontani.

Negli ultimi anni il 3D ha guadagnato sempre più importanza nel mondo della tecnologia e il 3D sul browser è diventato un elemento chiave per la creazione di esperienze altamente realistiche ed interattive in svariati ambiti: ludici, commerciali, scientifici, ecc.

Il 3D è utile, infatti, per creare modelli interattivi di prodotti che i clienti possono visualizzare in modo più dettagliato, ruotando o zoomando l’oggetto in questione; viene utilizzato per la progettazione di ambienti che possono essere modificati in tempo reale; serve anche per visualizzare grandi quantità di dati scientifici; ovviamente per i giochi online e tanto altro.

Ma andiamo con ordine.

Cosa è il 3D? E come lo posso creare?

Partendo dal concetto scolastico di rappresentazione di un punto in 2 dimensioni, è facile passare in 3D aggiungendo alla rappresentazione cartesiana di X e Y (altezza e larghezza) un’altra dimensione, ovvero la profondità con Z.

Avendo quindi l’ubicazione delle tre coordinate, ho un punto nello spazio; unendo più punti creo delle linee (vertici) e così via fino a creare a creare facce; inserisco poi delle informazioni sul colore, sulle ombre (shader), componenti fisici e altro fino a creare interi oggetti.

Una volta avuta questa enorme mole di informazioni per creare un oggetto 3D, queste devono essere in qualche modo conservate nella memoria delle nostre macchine con lo scopo di essere renderizzate da 3D in 2D per la rappresentazione nei nostri schermi tramite un processo matematico di proiezione. La renderizzazione deve avvenire 60 volte al secondo e tenere conto di rotazione e altre numerose variabili.

In contrapposizione ad un normale programma di grafica 2D dove i calcoli matematici sono solo per due assi, nel 3D si lavora anche con la profondità, aggiungendo rotazioni, angoli di visualizzazione, ecc. e di conseguenza, l’ammontare del calcolo cresce esponenzialmente. Proprio per questo ci si affida ad un hardware dedicato come la GPU, la quale coordinata dalle istruzioni provenienti dalla CPU, è la responsabile del rendering continuo di frame.

Piccola nota: Capite quindi l'importanza di una GPU dedicata. Pensateci quindi quando fate un pc build e risparmiate sulla GPU. O almeno, non vi lamentate poi che i giochi girano lenti.

Con i frame iniziamo a parlare di animazione. Il frame (o fotogramma) è la singola immagine che viene renderizzata, mentre una sequenza di frame sovrapposti ci darà l’illusione del movimento. Di norma, la fluidità di un’animazione si misura in frame al secondo, o FPS, e quindi più fotogrammi ci sono al secondo, migliore sarà la fluidità percepita dal nostro occhio. Oggi abbiamo uno standard di 60 FPS, ma alcuni mirano anche a 120FPS.

Altra piccola nota: Ci sarebbe anche un discorso di Herz dello schermo che potrebbe far percepire meno frame di quelli che potrebbero essere renderizzati dalla GPU, ma non vogliamo vendervi Schede Grafiche o Monitor, quindi è solo un avvertimento.

Infine, al contrario dei film dove possiamo avvalerci del fatto di non dover creare scenari responsivi agli input dell’utente, progetti come videogiochi o configuratori attingono alla grafica real time, poiché devono aggiornarsi velocemente all’interazione dell’utente e creare l’illusione di movimento renderizzando più fotogrammi al secondo.

Non una cosa da nulla questo 3D.

Ma come inserire oggetti 3D sul browser?

Prima di WebGL, per riuscire ad avere la grafica semi-3D sul browser, il settore era dominato da Adobe Flash (pace all’anima sua).

Oggi esiste un tag di HTML5 appositamente creato per creare grafica avanzata con JavaScript, ovvero il Canvas. Con questo strumento è possibile disegnare semplici geometrie 2D colorate e aggiornare lo scenario più volte al secondo per dare l’illusione di movimento. Il Canvas però ci permette solamente di creare oggetti 2D.

Per trasformarli in 3D dovremmo studiare un bel po' di teoria matematica della geometria 3D per calcolare proiezioni, matrici di rotazione e altre simpatiche formule e i risultati potrebbero essere molto imperfetti. Soprattutto, poi, dovremmo anche scendere a basso livello e ottimizzare tutti questi calcoli aiutandoci con la GPU, qualcosa non da molti.

Se volete provare così, lungi da noi fermarvi. Vi consigliamo di iniziare col libro “3D Math Primer for Graphics and Game Development” di Fletcher Dunn.

Se cercate un’altra soluzione, vi presentiamo ThreeJS.

WebGL e ThreeJS

Il 3D nel browser cambia veramente con l'introduzione di WebGL, una libreria che fornisce delle API per la creazione 3D hardware-accelerata. Presentato nel 2011, WebGL è basato sulle specifiche OpenGL ES e consente ai programmatori di scrivere codice in C++ o JavaScript per interagire con la GPU del computer consentendo alle applicazioni 3D di funzionare in modo fluido anche su hardware meno potente.

Ma scrivere nativamente per WebGL è molto complicato e tedioso, richiede una conoscenza matematica avanzata e anche una profonda conoscenza delle API WebGL, con le quali, per renderizzare un singolo triangolo, sono necessarie almeno 100 righe di codice.

Per questo nascono librerie come ThreeJS e BabylonJS, che semplificano la creazione di grafica 3D nel browser utilizzando WebGL come backend. Queste librerie offrono un'ampia gamma di funzionalità e componenti predefiniti, come texture e materiali, gestire luci, ombre, animazioni e interazioni utente per creare rapidamente e facilmente scene 3D interattive.

Perché ThreeJS

ThreeJS è la libreria WebGL più popolare. È molto stabile, ben documentata e viene sempre aggiornata con nuove funzionalità. La grande community di sviluppatori attiva ha creato (e continua a creare) numerose risorse, tutorial e librerie aggiuntive per estendere le funzionalità di base e semplificare quindi lo sviluppo di progetti 3D complessi.

È altamente configurabile e personalizzabile. Supporta diversi formati di file per modelli 3D, tra cui OBJ, FBX, DAE, 3DS, STL e altri. ThreeJS è anche compatibile con numerosi framework JavaScript, come Angular, React e Vue, e con software di modellazione 3D come Blender. Supporta anche molteplici fonti di input, come il mouse, il touch e i sensori di movimento, per creare esperienze interattive coinvolgenti.

Per consultare la galleria di funzionalità (base e avanzate) basta visitare il sito ufficiale di ThreeJS.

Siamo giunti al termine del primo articolo su ThreeJS.

Cosa ci aspetta nelle prossime puntate?

Nei prossimi articoli vedremo come realizzare questi scenari, in particolare ci concentreremo su:

• Casi d’uso di progetti con Three.js sul Browser

• Come inserire oggetti 3D sul browser con Three.js

• Come personalizzare una scena 3D con luci, ombre e altro