Benvenuto in questo capitolo sugli Effetti Visivi (VFX) in Three.js e React Three Fiber. In questo capitolo, imparerai a creare effetti visivi sbalorditivi che daranno vita alle tue scene 3D.

Il mio obiettivo è aiutarti a iniziare con i VFX e ispirarti a creare i tuoi effetti. Ho trascorso innumerevoli ore a confrontare diverse risorse, sperimentando, cercando l'approccio giusto affinché tu possa imparare in poche ore ciò che ti avrebbe richiesto settimane o mesi.

Anteprima del progetto TSL GPGPU che costruiremo insieme.

L'arte dei VFX

VFX sta per Effetti Visivi. È l'arte di creare effetti per migliorare l'esperienza visiva di un film, un videogioco, o per noi, delle nostre esperienze web 3D.

I VFX possono essere utilizzati per creare effetti realistici, come esplosioni, fuoco, acqua, fumo, o effetti fantastici, come incantesimi magici, teletrasporti e molto altro.

Nel nostro contesto, anche se non stai creando un gioco, i VFX possono essere utilizzati per aggiungere quel tocco in più ai tuoi progetti. Possono essere usati per creare un'esperienza più immersiva, per rendere le tue scene più coinvolgenti, o per offrire un aspetto più rifinito. In definitiva, costruendo progetti più professionali e visivamente accattivanti.

Supponiamo che il tuo progetto abbia una funzionalità di drag & drop. Puoi aggiungere un effetto particellare quando l'utente rilascia un oggetto, o quando l'oggetto viene trascinato. Questo renderà l'interazione più coinvolgente e divertente.

Entrando nel mondo dei VFX, preparati a vedere videogiochi e film sotto una luce diversa. Comincerai a notare gli effetti che vengono utilizzati per creare ciò che vedi sullo schermo.

Composizione tra diversi tipi di effetti

Un effetto è composto da uno o più elementi. Questi elementi possono essere particelle, shader, texture, mesh, scie e altro ancora. Combinando questi elementi, puoi creare effetti complessi e belli.

Impareremo a creare ciascuno di questi elementi con Three.js e React Three Fiber nelle lezioni seguenti. Ma prima, diamo un'occhiata a ciascuno di essi.

Particelle

Le particelle sono piccoli elementi emessi da una sorgente. Possono essere utilizzate per creare effetti come fuoco, vento, pioggia, neve, incantesimi magici e molto altro.

Giocando con il numero di particelle e le loro proprietà, come dimensioni, texture, colore, velocità e durata, è possibile creare un numero infinito di effetti.

Possono essere sprite (immagini 2D che sono sempre rivolte verso la telecamera) o oggetti 3D.

Anteprima della lezione sui fuochi d'artificio.

Mesh/Geometrie

Sebbene spesso pensiamo alle particelle come punti o sprite, è importante menzionare che anche i mesh possono essere utilizzati per creare effetti. Per esempio, rocce che emergono dal terreno o un portale che si apre.

Giocando con la geometria, il materiale e gli shaders, è possibile creare effetti unici che si distinguono.

Nel gioco del mago che costruiremo insieme, vediamo come le schegge di ghiaccio dal terreno si aggiungano all'effetto complessivo.

Scie

Le scie sono un tipo di effetto che crea una linea dietro un oggetto. Possono essere utilizzate per creare effetti come una cometa, un raggio laser, o vento.

Danno l'impressione di movimento e possono essere utilizzate per creare una sensazione di velocità o direzione.

Per crearle possiamo utilizzare particelle o mesh (come linee o tubi). Impareremo entrambi i metodi nelle lezioni successive.

Giocheremo con le scie per creare un effetto cometa e altro ancora.

Shaders/Texture

Abbiamo già parlato degli shaders nel capitolo dedicato. Nel contesto dei VFX, gli shaders possono essere applicati su particelle, mesh o sull'intera scena per farli muovere, cambiare colore, distorcere e altro ancora. L'unico limite è la tua immaginazione.

Combinando shaders con texture, è possibile creare effetti ancora più complessi. Le texture possono essere utilizzate per aggiungere dettagli ai tuoi effetti, come rumore, pattern o immagini.

SFX

SFX sta per Effetti Sonori, e anche se non è direttamente correlato ai VFX, è una parte importante dell'esperienza. Aggiungendo effetti sonori ai tuoi VFX e sincronizzandoli con gli effetti visivi, puoi creare un'esperienza più immersiva e coesa.

Non impareremo a creare effetti sonori in questo corso, ma apprenderemo una tecnica interessante per riprodurre suoni spazializzati nello spazio 3D.

CPU vs GPU

Quando si creano VFX, specialmente in un ambiente limitato come il web, è importante essere attenti alle prestazioni dei tuoi effetti.

Quando crei VFX, vuoi spostare il più possibile il lavoro sulla GPU. Questo significa che dovresti utilizzare shaders, texture e altre tecniche accelerate dalla GPU per creare i tuoi effetti.

Per effetti semplici, come alcune particelle, puoi usare il CPU. Tuttavia, per effetti complessi, come migliaia di particelle, vorrai utilizzare la GPU.

Impareremo entrambe le tecniche CPU e GPU in questo corso, ma ci concentreremo il più possibile sulle tecniche GPU. Questo garantirà che i tuoi effetti girino senza problemi sulla maggior parte dei dispositivi.

Creeremo un semplice motore VFX GPU che ci permetterà di creare effetti complessi con facilità. Scopriremo anche WebGPU con TSL con un delizioso progetto GPGPU.

Approfondire

I VFX sono un campo vasto e ci sono molte tecniche ed effetti che non copriremo in questo corso. Tuttavia, imparando le basi, sarai in grado di creare una vasta gamma di effetti.

Risorse

Anche se l'ecosistema di Three.js è povero di VFX, ci sono molte risorse disponibili per lo sviluppo di giochi, che possono essere applicate a Three.js. Unity, Unreal e Godot sono ottimi motori per approfondire i VFX.

Come sempre, il confronto tra diverse risorse è un ottimo modo per imparare. Ecco alcune risorse per iniziare:

• Il canale YouTube di Gabriel Aguiar ha ottimi tutorial sui VFX in Unity e ora in Godot. Raccomando anche il suo corso su Udemy chiamato Visual Effects for Games in Unity - Beginner To Intermediate.

• Il canale YouTube di Brackeys offre ottimi tutorial sui VFX in Unity (e ora in Godot dopo una lunga pausa).

• Il canale YouTube di Coreb Games è simile ai precedenti ma utilizza Unreal Engine.

• Il canale YouTube di VFX Apprentice o il sito web contengono molti video sui VFX e i suoi principi.

Prova a replicare gli effetti che vedi in questi tutorial in Three.js e React Three Fiber. Imparerai molto facendo così.

ArtStation o Pinterest sono anche ottimi posti per trovare ispirazione.

Librerie

Purtroppo, Three.js non ha un motore VFX integrato come Unity o Unreal. Tuttavia, ci sono alcune librerie che possono aiutarti a creare VFX in Three.js:

• Quarks VFX la libreria VFX più avanzata per Three.js. Si basa sull'implementazione di Unity Shuriken permettendo di importare i VFX di Unity in Three.js. È una libreria a pagamento, ma può farti risparmiare molto tempo a seconda del tuo progetto e delle tue necessità.
• VFX Composer Suite di Hendrik Mans è una grande libreria per creare VFX in Three.js. È gratuita e open-source, ma è meno mantenuta rispetto a Quarks VFX.
• Wawa VFX la libreria che abbiamo costruito insieme in questo corso. È un semplice motore VFX che ti permette di creare effetti complessi con facilità. È gratuita e open-source. Ho in programma di convertirla a TSL in futuro. Sentiti libero di contribuire.

Conclusione

Spero che tu sia tanto entusiasta quanto me di immergerti nel mondo dei VFX. Non vedo l'ora di vedere cosa creerai con le conoscenze che acquisirai in questo capitolo.