Questa serie di post sarà un esperimento di “live blogging”; infatti, in questo momento io non so programmare gli shader: userò questa serie per annotare i miei progressi, come un diario del mio processo di apprendimento. Buona lettura.
Per chi non sapesse cos’è uno Shader, è un passaggio della pipeline grafic- scusate, è fondamentalmente un programma che prende un fotogramma ed esegue delle trasformazioni per applicare degli effetti all’immagine. Si usa soprattutto nei videogiochi per fare le ombreggiature (non per nulla si chiama “shader”) ma può fare molto di più; se usato con esperienza può dettare la personalità del gioco. Pensate ad esempio a videogiochi come XIII, The Long Dark o Return of the Obra Dinn:
Gli Shader sono anche molto usati nella Demoscene, una sub-cultura in cui programmatori estremamente bravi fanno a gara a chi riesce a realizzare le animazioni (le “Demo”) più incredibili occupando meno spazio possibile (inteso come kilobyte). Le più note sono le Demo 4k, chiamate così perché il limite è di soli 4 kilobyte. Per farcela, si ricorre ad ogni genere di trucco per non incorporare gli oggetti già finiti, ma spiegare al computer come ricrearseli in memoria partendo da una serie di istruzioni: ad esempio, le canzoni di sottofondo sono composte senza ricorrere a pesanti campioni pre-registrati, ma ogni sample è creato sul momento, definendo la sua forma d’onda, e poi modulato di tono secondo le note di un Midi, che è come uno spartito: in questo modo si possono fare canzoni migliaia di volte più piccole di un mp3. È un po’ il principio per cui un foglietto di carta, con su scritta una ricetta per una torta, occupa molto meno spazio della torta finita… Per quanto riguarda la grafica, la parola d’ordine è “generazione procedurale”. Ad esempio, abituati come siamo a videogame che occupano decine di gigabyte (= miliardi di byte), credereste mai che tutto quello che c’è in questo video ne occupa solo 4096?
“Generazione procedurale” (o meglio “modeling procedurale”) vuol dire che le montagne qui sopra non sono state semplicemente “fatte in 3D”; sono state create in base a una formula matematica, che contiene al suo interno le “regole” per creare delle montagne, come ad esempio che dev’esserci una superficie frastagliata, ma non ci devono essere picchi troppo appuntiti o fratture troppo brusche, o buchi in mezzo. La formula naturalmente detta anche come dev’essere colorata la montagna per farla sembrare tale. Spiegare al computer come creare superfici che sembrino delle montagne, tramite una formula matematica, occupa naturalmente un millesimo dello spazio che occuperebbero delle montagne scolpite in 3D “a mano” da un artista 3D.
Con il modeling procedurale si possono fare cose come questa:
Per cominciare a lavorare sugli shader ho quindi rivolto la mia attenzione all’autore di questi due capolavori, ovvero Inigo Quilez, in arte IQ, nonché co-fondatore del sito Shadertoy, dove si possono creare shader direttamente online con il linguaggio GLSL; sito dal quale chiaramente inizierà la mia avventura.
- Ho creato un account su Shadertoy: https://www.shadertoy.com/new
- Ho cominciato leggendomi le tre parti di questo tutorial introduttivo: https://gamedevelopment.tutsplus.com/it/tutorials/a-beginners-guide-to-coding-graphics-shaders–cms-23313, che dà un’ottima spiegazione di come funzionino gli shader a livello matematico.
- Ho visto quest’altro video di Inigo Quilez, che spiega molto bene i principi dietro la creazione di forme tramite le funzioni di distanza con segno (Signed Distance Functions, SDF): https://www.youtube.com/watch?v=0ifChJ0nJfM
Sono andato alla pagina Signed Distance Functions su Wikipedia: https://en.wikipedia.org/wiki/Signed_distance_function - Ho visto questo video di Sebastian Lague che parla di Ray Marching, SDF e shader su Unity: https://www.youtube.com/watch?v=Cp5WWtMoeKg
- Ho trovato sul sito di Inigo Quilez con l’indice delle primitive (gli oggetti base per creare le varie forme, da usare come “blocchi” per creare qualunque cosa, come la ragazza nel video sopra): https://iquilezles.org/www/articles/distfunctions/distfunctions.htm
- Ho visto come appaiono quelle primitive in ShaderToy: https://www.shadertoy.com/view/Xds3zN
E come primo giorno può bastare…
PS. Immagine di copertina di Inigo Quilez (come tutto il resto)… tratta da https://www.shadertoy.com/view/ld3Gz2