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

Pubblicato il 30 Ottobre 2026 · Aggiornato il 30 Ottobre 2026 · Autore: CityGraph Napoli (Claudia D'Urso, titolare)

Guarda la presentazione del videocorso Shader GLSL

Apri le prime 2 lezioni gratis · Scarica il video in MP4

Perché imparare Shader GLSL

Gli shader sono i piccoli programmi che girano sulla scheda video e disegnano luci, acqua, fuoco e sfondi animati di videogiochi e siti. Saperli scrivere è il mestiere del programmatore grafico e del technical artist, e serve anche a chi crea arte generativa o visual per eventi. Il corso parte dal primo colore su Shadertoy e arriva a scene 3D fatte di sole formule e al WebGL nelle tue pagine.

A chi è rivolto

Il corso è pensato per: appassionati di grafica e videogiochi, sviluppatori web e studenti che vogliono creare effetti visivi, sfondi animati e materiali per giochi 2D e 3D. Partenza: Da zero.

• 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

Il programma: 10 lezioni in 3 livelli

Circa 13 ore di studio con gli esercizi, in lezioni da 25 a 45 minuti. Le prime 2 sono gratis.

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

• Cos'è uno shader e il primo colore (25 min, gratis): Capire che cosa sono vertex e fragment shader e far comparire il primo colore su Shadertoy.
• Coordinate, vettori e funzioni matematiche (30 min, gratis): Usare i vettori, le coordinate normalizzate e le funzioni mix, clamp, step e smoothstep per creare sfumature.
• Disegnare forme: cerchi, rettangoli e bordi morbidi (30 min): Disegnare cerchi e rettangoli con le funzioni di distanza e combinarli con colori e bordi sfumati.
• Il tempo: animazioni, ripetizioni e rotazioni (30 min): Animare gli shader con iTime, ripetere i disegni con fract e ruotarli con le matrici.

Intermedio: WebGL, vertex shader, trasformazioni, texture e illuminazione

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

Avanzato: Rumore, raymarching, effetti e shader per i giochi

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

Il 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.

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

Cosa ti serve

• Shadertoy: Sito 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 2: Quasi 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 Code: Editor 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 dopo il corso

• 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

Come si studia

• Video breve per ogni lezione, con i sottotitoli e il testo del video da leggere.
• Spiegazione scritta con esempi italiani (prezzi in euro, negozi, città) e codice da copiare con un tocco.
• Esercizio con la soluzione, appunti personali e quiz di tre domande per segnare la lezione come fatta.
• Esame finale di 15 domande (si supera con il 75%) e attestato stampabile con codice di controllo verificabile.
• App installabile su PC, tablet e telefono: niente account, i progressi restano sul dispositivo e si salvano con il backup.

Per privati, scuole e aziende

• Singolo corso: per chi vuole imparare un linguaggio, con tutte le lezioni, il progetto finale, l'esame e l'attestato.
• Tutti i corsi: l'accesso a tutto il catalogo CGFA Academy, per passare da un linguaggio all'altro quando vuoi.
• Aziende: formazione dei dipendenti su programmazione, dati, automazione e scrittura, con gli attestati nel registro.
• Scuole e centri di formazione: licenza per sede, per le classi e i laboratori, con la verifica dei codici degli attestati.
• White label: l'Academy con il nome, i colori e il dominio di chi la offre, per enti di formazione, agenzie e consulenti.

Le condizioni si concordano in base alle persone da formare: scrivici con Richiedi maggiori informazioni o su WhatsApp.

L'attestato è un attestato di frequenza con codice di controllo, non un titolo di studio né una certificazione pubblica. I programmi indicati nel corso sono gratuiti o già presenti nel computer, salvo dove è scritto diversamente.