Three.js – Una libreria per un WebGL semplificato

WebGL è una nuova tecnologia, incorporata nei browser (o almeno in buona parte dei browser), che permette di creare e disegnare immagini e animazioni 3D su una pagina web, senza bisogno di utilizzare plugin o programmi esterni, come il Flash, ma basandosi soltanto sul buon vecchio JavaScript. Questo per dirla in modo molto semplice, sorvolando sulla storia e tutto il resto. Per visualizzare una grafica prodotta con WebGL, o per utilizzare un videogioco basato su WebGL, è sufficiente avere un browser che supporti questa tecnologia: in pratica, più o meno tutti i browser, a parte Internet Explorer, almeno per il momento. per utilizzare WebGL in modo attivo, ossia per programmare grafiche o videogiochi in 3D, gli strumenti necessari sono sempre un browser che lo supporti, una discreta conoscenza del JavaScript e una buona conoscenza di algebra lineare, se siete così pazzi o determinati, da voler programmare a mano le matrici. Se non siete così pazzi o così determinati, non preoccupatevi: praticamente nessuno lo fa, se non in fase di apprendimento. Di solito, la parte più algebricamente hardcore è affidata a librerie JavaScript, che si occupano per noi dei calcoli più complicati, lasciandoci il piacere e il privilegio di lavorare sul risultato dei calcoli. La più usata di queste librerie è Three.js, di cui parlerò oggi. Se ricordate la versione 3D di Pong, presentata come uno degli ultimi esperimenti su Chrome, la parte grafica è stata realizzata proprio con la libreria Three.js, come accennavo nel relativo articolo: questo per dare un esempio concreto del suo utilizzo. Niente di strano: si possono scrivere a mano le matrici e ci si può occupare personalmente di tutti i calcoli necessari, ma questo va bene solo in fase di apprendimento, quando è necessario capire i meccanismi della grafica 3D. Quando però si passa dall'apprendimento alla produzione, librerie ausiliarie come Three.js sono fondamentali, per ridurre il lavoro e il tempo da spendere sul progetto. In linea generale, usare Three.js per lavorare col WebGL è come usare jQuery per lavorare col JavaScript: entrambe le librerie costituiscono un modo per interagire a un livello più alto di astrazione con la materia grezza che si trova sotto di esse. Esattamente come jQuery, poi, Three.js non è l’unica libreria esistente, per lavorare col WebGL, ma solo una delle più diffuse e più usate. Le caratteristiche di Three.js, dunque. Prima e principale caratteristica, comune anche alle altre librerie della stessa famiglia, è di occuparsi per conto nostro della matematica necessaria: significa che ci risparmieremo parecchie linee di codice, ad alto tasso di errori e basso tasso di divertimento (soprattutto se non amiamo la matematica). Sempre per conto nostro, Three.js si occupa anche della fase di rendering per ogni oggetto presente in scena: noi dovremo soltanto indicarle cosa fare e la libreria saprà come farlo, senza bisogno di nostre istruzioni. Inoltre, al puro WebGL unisce anche altri elementi, che spesso lo accompagnano ma che non sono parte diretta di quella tecnologia: ad esempio, il supporto per il mouse, così da poter interagire direttamente con la scena, spostando e trascinando oggetti e così via. Infine, ma non meno importante, Three.js permette facilmente di introdurre una soluzione alternativa, anche per quei browser che non supportano il WebGL: se non è presente il supporto per il 3D, possiamo sostituirlo col normale canvas 2D. Come è ovvio, il risultato estetico non sarà identico, ma la grafica o il videogioco funzioneranno ugualmente. Three.js, poi, è orientata verso una programmazione a oggetti, il che può essere sia un vantaggio, sia uno svantaggio, a seconda dei punti di vista e delle abitudini di lavoro col JavaScript: se decidete di usare questa libreria, preparatevi a dover ricorrere spesso a new, per creare nuovi oggetti, che possono essere figure geometriche, luci, videocamere, la scena che contiene tutta la grafica e così via. Così ha deciso il suo autore. Una caratteristica curiosa di Three.js, poi, è la presenza di un grande numero di esempi, abbinata a una documentazione alquanto scarna, sul piano dei manuali: quando scaricate la libreria, non aspettatevi niente di più elaborato di un basilare “Hello World”, incluso nel pacchetto. È possibile però trovare altrove guide e tutorial, principalmente in inglese, e anche accenni o capitoli dedicati a questa libreria, nei testi generali sul WebGL. Chi preferisce imparare smanettando col codice, però, avrà appunto oltre cento esempi con cui divertirsi, vivisezionandoli e sperimentando varie modifiche, per capire con la pratica il loro funzionamento. Tra parentesi, molti di questi esempi richiedono la presenza di un server, per funzionare: se ne avete uno installato sul vostro computer, apriteli da lì e ne guadagneranno anche le prestazioni. I passaggi fondamentali, per creare e popolare una scena, non sono poi molto diversi da quelli che avevamo già visto, parlando di Blender: siamo sempre nel campo della grafica 3D, dopotutto, e a cambiare sono solo il linguaggio e il tipo di ambiente. Per un qualsiasi tipo di progetto con Three.js, avremo bisogno di inserire un renderer, una camera e una scena, al cui interno potremo poi sistemare oggetti (o mesh, per sembrare più professionali), luci e quant'altro. In altri termini, gli oggetti fondamentali che dovremo creare con new, nella funzione iniziale, sono: THREE.Renderer - un oggetto che si occupa di disegnare la scena sullo schermo. THREE.Scene - il contenitore di tutto ciò che apparirà sullo schermo. THREE.Camera - la videocamera virtuale, attraverso cui vedremo la scena. A questi tre oggetti, indispensabili, potremo poi aggiungerne altri, per avere anche qualcosa da vedere sullo schermo. Questi oggetti supplementari sono THREE.Light - una sorgente di luce, di un colore a nostra scelta, indispensabile se vogliamo che sia resa la illusione di tridimensionalità degli oggetti (senza luce, appariranno bidimensionali). THREE.Object3D - la classe base degli oggetti raffigurabili: alcuni tipi sono già definiti e pronti all'uso, altri li possiamo creare noi. La tipologia base di oggetti, come già abbiamo visto con Blender, è Mesh e a ogni mesh dovremo assegnare due altri oggetti, nel momento della creazione: THREE.Geometry, che contiene la forma dell’oggetto (cubo, sfera, prisma eccetera) e THREE.Material, che contiene informazioni sulle qualità dell’oggetto, come il colore. In un qualsiasi progetto con Three.js, dunque, la funzione iniziale creerà un renderer, una scena, una camera, aggiungerà alla scena i vari oggetti presenti e la camera, infine passerà la mano al loop, che continuerà a ridisegnare lo schermo,a  intervalli regolari. Un esempio di come fare tutto questo lo troviamo già nel pacchetto della libreria, sotto forma di breve tutorial nella cartella "docs"; per il resto, potremo divertirci a squartare la caterva di esempi disponibili.