La tua immagine
Ogni pixel arriva con un colore e una posizione.
Guida agli shader · non serve programmare
Trasforma un’idea in luce in movimento.
Non devi conoscere GLSL per creare uno shader. Impara cosa descrivere, come guidare l’AI una scelta alla volta e come reagire quando il codice si confonde.
Tempo di lettura · 8 minuti
01ShaderUn piccolo programma per i pixel
02GLSLIl linguaggio letto dalla scheda grafica
03InputImmagine, posizione, dimensione e tempo
04OutputUna nuova immagine ridisegnata dal vivo
Partiamo dall’inizio
Cos’è uno shader GLSL?
Immagina di dare a ogni pixel dello schermo la stessa piccola istruzione: “guarda l’immagine originale, controlla dove ti trovi, controlla il tempo e scegli un colore”. La scheda grafica ripete questa istruzione per migliaia di pixel insieme, molte volte al secondo. Quell’istruzione è uno shader.
GLSL è semplicemente il linguaggio usato per scriverlo. Mapshroom collega per te immagine, tempo, controlli e schermo, così puoi concentrarti sull’idea visiva.
Lo shader
Muove, mescola, maschera, colora e reagisce al tempo.
Luce in movimento
Il risultato viene ridisegnato dal vivo sul soggetto.
uvDove mi trovo?
La posizione di un pixel: sinistra, destra, alto o basso.
timeIn quale momento?
Un orologio che rende possibili onde, pulsazioni e movimento.
resolutionQuanto è grande lo schermo?
Larghezza e altezza, usate per mantenere le forme proporzionate.
uniformCosa posso controllare?
Un valore con nome che Mapshroom trasforma in slider o controllo colore.
La formula del prompting
Descrivi l’immagine,
non il programma.
Un prompt utile sembra una direzione artistica. Descrivi cosa deve restare, cosa deve cambiare, come si muove e cosa vuoi regolare dopo. Lascia che Mapshroom gestisca la struttura GLSL.
Proteggi il punto di partenza
Dichiara cosa deve restare visibile. Così l’AI non sostituirà la tua immagine con un pattern a pieno schermo senza relazione.
“Mantieni riconoscibile il soggetto originale e conserva la trasparenza.”Scegli un solo effetto visivo
Inizia con una trasformazione chiara: contorni, increspature, pixel, bagliore, deformazione, scie o bande di colore.
“Aggiungi contorni morbidi intorno ai bordi più luminosi.”Descrivi il movimento con un verbo
Usa parole come fluttuare, pulsare, ruotare, scorrere, espandere o seguire. Aggiungi direzione e velocità.
“Fai salire lentamente le linee, come aria calda.”Scegli colore e atmosfera
Dai all’AI una palette piccola e un’atmosfera. Due colori sono spesso più facili da controllare di “rendilo colorato”.
“Usa linee verde menta con un bagliore corallo leggero.”Chiedi i controlli
I controlli ti permettono di dirigere il risultato dopo la generazione, senza riscrivere lo shader.
“Aggiungi slider per velocità, spessore, bagliore e colore.”SOGGETTO + EFFETTO + MOVIMENTO + COLORE + CONTROLLI
Un buon primo prompt
Mantieni riconoscibile il soggetto originale e conserva la sua trasparenza.
Aggiungi contorni morbidi intorno ai bordi più luminosi.
Fai salire lentamente le linee, come aria calda.
Usa verde menta per le linee e un bagliore corallo leggero.
Aggiungi controlli per velocità, spessore delle linee, bagliore e colore.
Mantieni lo shader fluido e leggero.Perché funziona: ogni frase prende una sola decisione. Se il risultato è quasi giusto, modifica soltanto la frase che non funziona.
Dentro Mapshroom
Dalla frase allo shader, passo dopo passo.
Quando interroga l’AI, Mapshroom include lo shader corrente e il formato di codice richiesto. Il tuo compito è descrivere l’aspetto e valutare il risultato.
- 01Carica un’immagine
Scegli il soggetto a cui vuoi far reagire l’effetto.
- 02Apri Shader
Parti da un preset o dallo shader attuale nel pannello del codice.
- 03Scrivi ciò che vuoi
Usa la formula in cinque parti e premi Genera.
- 04Valuta una cosa alla volta
Controlla nell’ordine soggetto, effetto, movimento, colore e controlli.
- 05Perfeziona con richieste successive
Chiedi una modifica precisa mantenendo invariato tutto il resto.
- 06Salva la versione buona
Conserva una versione funzionante prima di un mix o di un esperimento importante.
RICHIESTA VAGA
→“Rendilo più bello e più veloce.”
RICHIESTA DIRIGIBILE
“Mantieni composizione e colori. Raddoppia soltanto la velocità del movimento verso l’alto. Non cambiare la trasparenza.”
Mescolare shader
Sì, puoi incollare altro codice.
Il GLSL di un altro shader può diventare materiale per uno nuovo. Incollalo nell’editor di Mapshroom o nella conversazione con l’AI, poi indica quale parte vuoi mantenere: movimento, colori, maschera, texture o forma.
Non mettere semplicemente due shader completi uno dopo l’altro. Potrebbero definire gli stessi nomi o usare strutture diverse. Chiedi all’AI di integrarli e restituire un unico shader completo.
- Scegli quale shader sarà la base.
- Indica la caratteristica precisa da prendere dall’altro.
- Spiega dove o quando i due effetti devono fondersi.
- Chiedi di conservare i controlli utili e rinominare i conflitti.
Prompt per mescolare due shader
Usa il mio shader attuale come base.
Integra lo shader incollato come secondo effetto: non mettere due shader completi uno dopo l’altro.
Mantieni i colori e la trasparenza dello shader di base.
Usa il nuovo shader soltanto per aggiungere il suo movimento a increspature.
Fondi le increspature nelle aree luminose dell’immagine, rinomina gli uniform in conflitto e restituisci un unico shader Mapshroom completo.
SHADER INCOLLATO:
[incolla qui l’altro codice GLSL]Quando la generazione non funziona
Un errore è un’informazione,
non un vicolo cieco.
L’AI scrive codice per previsione, quindi possono comparire una parentesi mancante, una funzione non supportata o un nome in conflitto. Mapshroom conserva l’ultimo rendering valido, riprova una volta il GLSL generato e mostra Correggi errore quando il compilatore ha ancora bisogno di aiuto.
Non riscrivere il messaggio del compilatore con parole tue.
L’AI deve vedere cosa ha prodotto l’errore.
WebGL 2 con GLSL ES 3.00, un unico shader Mapshroom completo.
Conserva l’aspetto invece di riprogettarlo.
Prompt di correzione per qualsiasi chat LLM
Correggi questo shader con la modifica più piccola possibile.
Mantieni l’aspetto attuale, i colori, i controlli e la trasparenza.
Deve usare GLSL ES 3.00 per WebGL 2, texture() e una sola funzione processColor(sampler2D tex, vec2 uv, float time, vec2 resolution).
Non aggiungere void main() o gl_FragColor.
Restituisci un unico shader sostitutivo completo.
ERRORE DEL COMPILATORE:
[incolla qui l’errore esatto]
GLSL ROTTO:
[incolla qui lo shader completo]Riformula l’output
“Campiona la texture originale, conserva il suo alpha e mantieni visibile il soggetto prima di aggiungere l’effetto.”
Semplifica il lavoro
“Mantieni un solo effetto, rimuovi i loop costosi e rendi il movimento fluido e leggero.”
Descrivi ciò che osservi
“Il bagliore copre tutta l’immagine. Limitalo ai bordi luminosi e lascia invariate le aree scure.”
Ripeti il contratto
“Restituisci un unico corpo shader WebGL 2 / GLSL ES 3.00 con processColor(), texture(), senza #version e senza main().”
Un flusso, qualsiasi AI
Usalo nell’app o in qualsiasi chat LLM.
Il percorso più breve
Scegli un’opzione AI nel pannello Shader e premi Genera. Mapshroom aggiunge automaticamente il GLSL attuale, la struttura richiesta e il contratto tecnico.
Il passaggio guidato
Scegli una delle due chat in Mapshroom. L’app prepara la richiesta completa, apre la chat e ti permette di incollare la risposta shader dentro Mapshroom.
La stessa conversazione
Incolla lo shader attuale, la richiesta visiva e le regole shader di Mapshroom. Chiedi un unico blocco di codice GLSL completo, poi incollalo in Mapshroom.
SAI GIÀ ABBASTANZA PER INIZIARE