Videocorso Shader GLSL CGFA

Disegna con la scheda video: vertex e fragment shader, da Shadertoy al WebGL nelle tue pagine e nei tuoi giochi

Partenza: Da zero
13 ore con gli esercizi
10 lezioni in 3 livelli
2 lezioni gratis

Inizia la prima lezione Sblocca il corso

A chi serve

Appassionati di grafica e videogiochi, sviluppatori web e studenti che vogliono creare effetti visivi, sfondi animati e materiali per giochi 2D e 3D

Cosa serve per iniziare

Un computer con un browser moderno (Chrome, Edge, Firefox o Safari) e una scheda video qualsiasi
Matematica delle scuole medie: somme, moltiplicazioni, un po' di coordinate
Per la parte WebGL, conoscere le basi di HTML e JavaScript aiuta, ma ogni passo è spiegato

Cosa installare

ShadertoySito gratuito (shadertoy.com) dove scrivi uno shader e lo vedi subito in azione nel browser. Per usarlo basta aprire "New shader"; l'iscrizione serve solo per salvare

Un browser con WebGL 2Quasi tutti i browser attuali lo hanno già. Per verificarlo apri una pagina di prova WebGL qualsiasi: se vedi il disegno, sei a posto

Visual Studio CodeEditor gratuito da code.visualstudio.com; l'estensione "Shader languages support" colora il codice GLSL. Per le pagine di prova basta un file .html aperto nel browser

Game engine (facoltativo)Godot, Unity e Three.js usano shader molto simili a quelli del corso: i concetti sono gli stessi, cambia solo il contorno

A cosa ti serve

Programmatore grafico e Technical Artist nei videogiochi
Effetti visivi per siti web (sfondi animati, transizioni, immagini interattive)
Visualizzazione di dati e mappe in tempo reale
Arte generativa, installazioni e visual per eventi
Base per il rendering, la realtà virtuale e il calcolo sulla GPU

Programma del corso

10 lezioni in 3 livelli. Ogni lezione: video, spiegazione, codice da copiare o provare, esercizio con soluzione e quiz.

Base

Pensare come una scheda video: colori, coordinate, forme e movimento

1Cos'è uno shader e il primo coloreCapire che cosa sono vertex e fragment shader e far comparire il primo colore su Shadertoy.Gratis25 min 2Coordinate, vettori e funzioni matematicheUsare i vettori, le coordinate normalizzate e le funzioni mix, clamp, step e smoothstep per creare sfumature.Gratis30 min 3Disegnare forme: cerchi, rettangoli e bordi morbidiDisegnare cerchi e rettangoli con le funzioni di distanza e combinarli con colori e bordi sfumati.30 min 4Il tempo: animazioni, ripetizioni e rotazioniAnimare gli shader con iTime, ripetere i disegni con fract e ruotarli con le matrici.30 min

Intermedio

WebGL, vertex shader, trasformazioni, texture e illuminazione

1Shader nelle tue pagine con WebGLPortare uno shader fuori da Shadertoy e farlo girare in una pagina web con WebGL 2, passando tempo e risoluzione dall'esterno.40 min 2Il vertex shader: posizioni, matrici e textureCapire il percorso dei dati dal vertice al pixel (in, out, uniform), le matrici di trasformazione e l'uso delle texture.40 min 3Luce e ombre: normali, diffusa e speculareCalcolare l'illuminazione di una superficie con le normali, la luce diffusa e il riflesso speculare.40 min

Avanzato

Rumore, raymarching, effetti e shader per i giochi

1Rumore procedurale: hash, value noise e fbmCreare numeri casuali ripetibili, il rumore liscio e il frattale di rumore per nuvole, terreno e fuoco.40 min 2Raymarching: scene 3D con le sole formuleDisegnare una scena 3D completa dentro un solo fragment shader con le funzioni di distanza (SDF) e il raymarching.45 min 3Prestazioni, debug e shader nei giochiScrivere shader veloci, trovare gli errori e portare le idee nei motori di gioco e nelle librerie web.35 min

Progetto finale: Il tramonto sul golfo: uno shader animato per la tua pagina

Crea uno sfondo animato per un sito: cielo sfumato, sole che tramonta sul mare, Vesuvio in silhouette, nuvole con il rumore fbm e onde che brillano. Lo provi su Shadertoy e poi lo porti nella pagina WebGL del corso, con la possibilità di fermare l'animazione.

I passi

Su Shadertoy crea il cielo: una sfumatura con mix tra arancione e blu notte, in base a uv.y.
Disegna il sole con un cerchio smoothstep che scende lentamente con iTime.
Aggiungi il mare nella parte bassa, con una sfumatura più scura.
Disegna la sagoma del Vesuvio con una funzione (per esempio un triangolo smussato con abs e smoothstep).
Inserisci le nuvole con la funzione fbm, spostate lentamente.
Aggiungi i riflessi sul mare con un seno che dipende da uv.x e dal tempo.
Porta lo shader nella pagina WebGL: main, gl_FragCoord, uTempo e uRisoluzione.
Aggiungi un pulsante "Ferma animazione" che smette di chiamare requestAnimationFrame, e rispetta chi ha attivato "riduci movimento" con la regola prefers-reduced-motion.

Esame e attestato

Alla fine del corso fai l'esame: 15 domande, serve il 75% di risposte giuste. Superato l'esame ottieni l'attestato stampabile con nome, ore, punteggio e un codice di controllo che chiunque può verificare.

Vai all'esame

Glossario di Shader GLSL

Shader: Un piccolo programma eseguito dalla scheda video su molti punti o pixel insieme.
GLSL: Il linguaggio con cui si scrivono gli shader per OpenGL e WebGL.
Vertex shader: Lo shader che decide dove va ogni vertice di una forma sullo schermo.
Fragment shader: Lo shader che decide il colore di ogni pixel.
Uniform: Un valore uguale per tutti i pixel, passato dall'esterno, come il tempo.
Varying: Un valore passato dal vertex al fragment shader e interpolato tra i vertici.
Texture: Un'immagine che lo shader può leggere per ricavarne i colori.
Normale: Un vettore che indica verso dove "guarda" una superficie, usato per la luce.
Matrice: Una tabella di numeri che sposta, ruota o ingrandisce i punti.
Rumore: Casualità continua usata per creare nuvole, terreni e texture procedurali.
SDF: Funzione di distanza con segno: dice quanto un punto è lontano da una forma.
Raymarching: Tecnica che fa avanzare un raggio per ogni pixel fino a toccare una forma descritta da formule.

Le prime 2 lezioni sono gratis

Per il corso completo, scuole e aziende: chiedi le condizioni.

Inizia ora Richiedi maggiori informazioni