{"id":10381,"date":"2021-10-12T09:37:11","date_gmt":"2021-10-12T07:37:11","guid":{"rendered":"https:\/\/www.heavym.net\/?p=10381"},"modified":"2026-07-23T12:33:03","modified_gmt":"2026-07-23T10:33:03","slug":"heavym-shaders","status":"publish","type":"post","link":"https:\/\/www.heavym.net\/it\/heavym-shaders\/","title":{"rendered":"Introduzione agli shader HeavyM per creare i propri VFX"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"freccia\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Torna alla home del blog<\/a><\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Introduzione agli shader HeavyM per creare i propri VFX<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Introduzione<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Siete interessati a creare i vostri effetti visivi in HeavyM? In questo articolo presenteremo le entusiasmanti possibilit\u00e0 creative offerte dagli shader. A proposito, cos'\u00e8 uno shader?<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Uno shader \u00e8 un programma per computer che viene eseguito sulla scheda grafica del computer. Consente di manipolare rapidamente i dati visualizzati sullo schermo o sul videoproiettore: i pixel.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00c8 una tecnologia poco conosciuta perch\u00e9 considerata astratta, ma gli shader sono molto presenti nella nostra vita quotidiana. Questi piccoli programmi per computer simulano in modo realistico effetti visivi complessi come la pioggia, la nebbia, il riflesso della luce, il rilievo degli oggetti, ecc. Sono quindi ampiamente utilizzati nei videogiochi, nei film che richiedono effetti speciali, nei set televisivi... e nell'arte digitale, il campo su cui ci concentriamo qui.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Nel Software HeavyM<\/a>, gli shader integrati offrono numerose possibilit\u00e0. \u00c8 inoltre possibile importare i propri shader, aumentando cos\u00ec all\u2019infinito il numero di combinazioni!<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Esempio\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Esempio di videogioco che utilizza gli shader: Minecraft<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Proiezione\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Esempio di utilizzo di uno shader durante una performance di mappatura di proiezione<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Parte 1: Tecnologia degli shader<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Per capire meglio l'idea degli shader, prendiamo come esempio la creazione di un disegno a mano. \u00c8 necessario disegnare uno per uno gli elementi che lo compongono. Si inizia con forme geometriche come cerchi, rettangoli e linee e poi si aggiungono i colori. Si procede passo dopo passo come se si dovesse copiare il disegno manualmente. Con gli shader, il processo \u00e8 molto pi\u00f9 veloce perch\u00e9 tutte queste operazioni vengono eseguite in una sola volta, come un timbro applicato al foglio di carta con un solo gesto. La cosa migliore \u00e8 che questo timbro pu\u00f2 cambiare a seconda delle informazioni fornite, come l'ora, la posizione o i colori degli elementi gi\u00e0 presenti sul foglio.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Perch\u00e9 gli shader sono veloci?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Gli shader sono programmi molto leggeri perch\u00e9, a differenza di software come HeavyM, che contengono diverse centinaia di migliaia di righe di codice, uno shader contiene in genere al massimo solo poche centinaia di righe. La velocit\u00e0 degli shader \u00e8 dovuta principalmente all\u2019architettura dell\u2019hardware che ne consente l\u2019esecuzione: il scheda grafica<\/a>. Per poter utilizzare HeavyM, era sicuramente necessario prestare attenzione a questo aspetto, poich\u00e9 consente di moltiplicare le possibilit\u00e0 offerte dal software.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A differenza della CPU del computer, che elabora i compiti uno dopo l'altro, i calcoli della scheda grafica vengono eseguiti in parallelo. Invece di avere un singolo processore con una potenza di calcolo significativa, la scheda grafica ha una moltitudine di piccoli processori. Ci\u00f2 significa che possono eseguire operazioni simultaneamente. Grazie a questa parallelizzazione, gli shader possono eseguire calcoli grafici complessi in pochi millisecondi.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Il vantaggio degli shader: arte interattiva<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Grazie alla velocit\u00e0 di esecuzione degli shader, \u00e8 possibile creare immagini in tempo reale, cio\u00e8 generate nel momento in cui vengono viste. Il termine tempo reale \u00e8 usato in contrasto con il termine precompresso, che si applica a un file video renderizzato fotogramma per fotogramma. I calcoli di rendering possono richiedere molto tempo e anche diversi giorni! Con gli shader \u00e8 possibile manipolare direttamente le immagini, proprio come in un videogioco. L'arte digitale interattiva si basa su questo principio in tempo reale perch\u00e9 permette di generare immagini che reagiscono alla musica o ai movimenti delle persone. Per vedere due esempi di performance che mescolano musica e immagini, date un'occhiata al lavoro di <\/span>Weirdcore per i concerti di Aphew Twin<\/a><\/strong> o <\/span>Le performance di Nonotak<\/strong>.<\/span><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Tipi di shader<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Gli shader non sono altro che file di testo con una particolare estensione. Vedremo che esistono diversi tipi di shader. Il fattore comune \u00e8 che sono codificati nel linguaggio GLSL: OpenGL Shading Language. Esistono altri tipi di shader a seconda della piattaforma e dell'hardware, ma qui ci concentreremo sugli shader basati su OpenGL. Per utilizzare gli shader in HeavyM, \u00e8 necessaria una scheda grafica che supporti OpenGL 2.0.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Pixel shader o Fragment shader<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Il fragment shader o pixel shader \u00e8 uno shader il cui scopo \u00e8 calcolare il colore di ogni singolo pixel. Prende in input i dati di ciascun pixel dell'immagine (posizione, coordinate della texture, colore) e ne restituisce il colore.<\/span><\/p>

Sono questi gli shader che vi interessa utilizzare con HeavyM. Di solito si tratta di file .FRAG o .FS nel caso del formato ISF. Il formato ISF fornisce uno standard per i frammenti di shader GLSL, in modo che possano essere interpretati pi\u00f9 facilmente dalle applicazioni interattive.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Shader Vertex<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

I Vertex shader vengono utilizzati per trasformare i picchi di input in pixel.\u00a0<\/span><\/p>

Si tratta di un file .VS che a volte accompagna il pixel shader, ha lo stesso nome e si trova nella stessa cartella.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Dove trovare gli shader?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Non \u00e8 necessario conoscere la programmazione per utilizzare gli shader con HeavyM. Oltre alla libreria integrata nel software, esistono piattaforme per trovare nuovi shader senza doverli creare da soli. La comunit\u00e0 di artisti degli shader \u00e8 in crescita e spesso \u00e8 possibile utilizzare liberamente i lavori che condividono.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Per trovare .FS: https:\/\/www.interactiveshaderformat.com\/<\/strong><\/a><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Per trovare .FRAG: http:\/\/glslsandbox.com\/<\/a><\/strong> e https:\/\/www.shadertoy.com\/<\/a><\/strong><\/span><\/p>

Attenzione: i file .FRAG non sono supportati dalla HeavyM. \u00c8 necessario convertirli in .ISF e di seguito viene fornito un metodo per farlo.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Assicuratevi di controllare i diritti di utilizzo nella licenza solitamente specificata all'inizio del codice shader. Se non ci sono indicazioni particolari, il copyright si applica per default e si consiglia vivamente di discutere con l'autore del programma se si desidera farne un uso commerciale.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Sviluppare i propri shader<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Per creare i propri shader, si consiglia di utilizzare direttamente il formato ISF in modo che siano compatibili con il maggior numero di applicazioni. Lo scopo di questo articolo non \u00e8 quello di fornire un apprendimento del codice GLSL, il linguaggio utilizzato dal formato ISF. Per questo suggeriamo di leggere i siti molto completi :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t