{"id":28963,"date":"2024-08-27T15:39:03","date_gmt":"2024-08-27T13:39:03","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28963"},"modified":"2024-09-03T12:09:03","modified_gmt":"2024-09-03T10:09:03","slug":"creiamo-un-effetto-onda-durto-in-glsl","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/","title":{"rendered":"Creiamo un effetto &#8220;onda d&#8217;urto&#8221; in GLSL"},"content":{"rendered":"\n<p>Quando in un videogioco si verifica un esplosione, un evento violento o un impatto, un modo graficamente interessante per dare feedback al giocatore e per rendere meglio a schermo ci\u00f2 che \u00e8 avvenuto \u00e8 utilizzando un <strong>effetto onda d&#8217;urto<\/strong>.<\/p>\n\n\n<div class=\"gb-container gb-container-69a85733\">\n\n<p>In questo breve tutorial vedremo come scrivere un <strong>fragment shader<\/strong> in <strong>GLSL <\/strong>per creare un effetto simile.<\/p>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prerequisiti\">Prerequisiti<\/h2>\n\n\n\n<p>Un <strong>fragment shader<\/strong> \u00e8 un programma che la GPU esegue per determinare il colore di ogni pixel sullo schermo. Il nome &#8220;fragment shader&#8221; \u00e8 dovuto al fatto che questo particolare programma lavora su una tipologia di dati nota come &#8220;fragment&#8221;. Si tratta, in parole semplici, di una collezione di informazioni necessarie a generare un singolo pixel.<\/p>\n\n\n\n<p>Di default, il fragment shader prende in input un vettore in 4 dimensioni chiamato <code>gl_FragCoord<\/code>. Le coordinate x e y di questo vettore corrispondono alla posizione sulla finestra del fragment corrente.<\/p>\n\n\n\n<p>Per questo tutorial utilizzer\u00f2 VsCode come ambiente di sviluppo, con l&#8217;estensione GLSLCanvas per visualizzare l&#8217;output dello shader durante la sua realizzazione.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-parte-1-setup\">Parte 1 &#8211; Setup<\/h2>\n\n\n\n<p>Cominciamo scrivendo il codice GLSL necessario per iniziare.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Definiamo la precisione delle variabili float: <code>mediump<\/code> va benissimo per quello che dobbiamo fare<\/li>\n\n\n\n<li>Dichiariamo il <code>sampler2D<\/code>, contenente i dati che compongono la <strong>texture <\/strong>che utilizzeremo per questo tutorial.<\/li>\n\n\n\n<li>Dichiariamo la <strong>risoluzione <\/strong>della finestra su cui lavoreremo<\/li>\n\n\n\n<li>Cominciamo a scrivere la funzione <code>main()<\/code><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">precision mediump float;\nuniform sampler2D u_tex0;\nuniform vec2 u_resolution;\n\n<span class=\"hljs-keyword\">void<\/span> main() {\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>La funzione <code>main()<\/code> sar\u00e0 eseguita per ogni fragment. Inseriremo al suo interno tutto il codice necessario per ottenere l&#8217;effetto desiderato.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-parte-2-disegnamo-un-cerchio\">Parte 2 &#8211; Disegnamo un cerchio<\/h2>\n\n\n\n<p>Ora siamo pronti per scrivere il nostro fragment shader. L&#8217;effetto che vogliamo ottenere \u00e8 quello di un <strong>anello<\/strong> che si estende dal centro della finestra fino alle estremit\u00e0. L&#8217;anello in s\u00e9 non sar\u00e0 visibile, ma sar\u00e0 utilizzato per applicare una distorsione alla nostra texture. Invece di partire subito con la realizzazione dell&#8217;anello, per\u00f2, cominciamo con una forma geometrica pi\u00f9 semplice: un <strong>cerchio<\/strong>.<\/p>\n\n\n\n<p>Un cerchio \u00e8 una figura geometrica tale per cui <strong>tutti i punti al suo interno hanno distanza dal centro inferiore al raggio del cerchio stesso<\/strong>. Teniamo a mente questa definizione durante la scrittura del programma. Tutto il codice che segue \u00e8 da considerarsi all&#8217;interno della funzione <code>main()<\/code><\/p>\n\n\n\n<h4 class=\"gb-headline gb-headline-738047eb gb-headline-text\">Le coordinate<\/h4>\n\n\n\n<p>Cominciamo col definire le coordinate che utilizzeremo nei nostri calcoli. Come abbiamo accennato prima, <code>gl_FragCoord<\/code> contiene le coordinate x e y del fragment corrente in riferimento alla finestra.<br>Con una finestra di dimensioni 500x350px, <code>gl_FragCoord.xy<\/code> assumer\u00e0 valori compresi tra (0,0) e (500,350). Una pratica abituale, quando si realizzano fragment shader, \u00e8 quella di <strong>normalizzare<\/strong> queste coordinate nell&#8217;intervallo 0-1.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Coords-300x300.png\" alt=\"\" class=\"wp-image-29278\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Coords-300x300.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Coords-150x150.png 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Coords-100x100.png 100w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Coords-600x600.png 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Coords.png 621w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n<p>Per fare ci\u00f2 ci basta dividere le coordinate per <code>u_resolution.xy<\/code>, la risoluzione della finestra.<\/p>\n\n\n\n<p>Questo, per\u00f2, comporta uno svantaggio importante da considerare: <strong>un&#8217;unit\u00e0 sull&#8217;asse x non corrisponde a un&#8217;unit\u00e0 sull&#8217;asse y<\/strong>. Se disegnassi il punto (0.2 , 0.2), vedrei che questo, nella finestra di dimensioni 500x350px, \u00e8 pi\u00f9 spostato verso destra che verso l&#8217;alto.<\/p>\n\n\n\n<p>Oltre a mantenere una copia delle coordinate normalizzate, quindi, \u00e8 utile anche descrivere le coordinate considerando questo &#8220;problema&#8221;. La soluzione \u00e8 molto semplice. Invece di dividere <code>gl_FragCoord.xy<\/code> per <code>u_resolution.xy<\/code> (che significa dividere la componente x per la larghezza della finestra, e quella y per l&#8217;altezza della finestra), ci basta <strong>dividere le componenti per una sola delle due dimensioni<\/strong> (<code>u_resolution.x<\/code>, per esempio).<\/p>\n\n\n\n<p>Abbiamo quindi:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">vec2 uv = gl_FragCoord.xy \/ u_resolution.xy;\nvec2 pos = gl_FragCoord.xy \/ u_resolution.x;<\/code><\/span><\/pre>\n\n\n<h4 class=\"gb-headline gb-headline-f355f2ce gb-headline-text\">Il cerchio<\/h4>\n\n\n\n<p>Definiamo ora 3 variabili: un <code>vec2<\/code> per il centro del cerchio, un <code>float<\/code> per il raggio e un <code>float<\/code> per la distanza tra il centro e la coordinata corrente. Il centro \u00e8 espresso nel secondo sistema di coordinate che abbiamo descritto.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">vec2 center = vec2(0.5 ,  u_resolution.y \/ u_resolution.x * 0.5);\nfloat dist = distance(center , pos);\nfloat radius = 0.3;<\/code><\/span><\/pre>\n\n\n<p>E disegnamo il cerchio valutando due casi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se la distanza \u00e8 <strong>minore o uguale al raggio<\/strong>, allora il punto corrente \u00e8 <strong>all&#8217;interno<\/strong> del cerchio e lo coloriamo di bianco.<\/li>\n\n\n\n<li>In caso contrario il punto \u00e8 <strong>fuori <\/strong>dal cerchio e lo coloriamo di nero.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">void main()\n{\n    vec2 uv = gl_FragCoord.xy \/ u_resolution.xy;\n    vec2 pos = gl_FragCoord.xy \/ u_resolution.x;\n\n    vec2 center = vec2(0.5 ,  u_resolution.y \/ u_resolution.x * 0.5);\n    float dist = distance(center , pos);\n    float radius = 0.3;\n    vec4 color;\n\n    if(dist <span class=\"hljs-tag\">&lt; <span class=\"hljs-attr\">radius<\/span>) {\n        <span class=\"hljs-attr\">color<\/span> = <span class=\"hljs-string\">vec4(1.0<\/span> , <span class=\"hljs-attr\">1.0<\/span> , <span class=\"hljs-attr\">1.0<\/span> , <span class=\"hljs-attr\">1.0<\/span>);\n    } <span class=\"hljs-attr\">else<\/span> {\n        <span class=\"hljs-attr\">color<\/span> = <span class=\"hljs-string\">vec4(0.0<\/span> , <span class=\"hljs-attr\">0.0<\/span> , <span class=\"hljs-attr\">0.0<\/span> , <span class=\"hljs-attr\">1.0<\/span>);\n    }\n    \n    <span class=\"hljs-attr\">gl_FragColor<\/span> = <span class=\"hljs-string\">color;<\/span>\n}<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>La logica che abbiamo implementato tramite if \/ else pu\u00f2 essere semplificata utilizzando la funzione float <code>step(float edge , float x)<\/code>, che d\u00e0 in output 1 se edge &lt; x, e 0 in caso contrario.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">float t = step(dist , radius);\ncolor = vec4(vec3(t) , 1.0);<\/code><\/span><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"616\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/BadCircle.png\" alt=\"effetto, GLSL\" class=\"wp-image-29279\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/BadCircle.png 637w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/BadCircle-300x290.png 300w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/figure><\/div>\n\n\n<p>Notiamo un dettaglio importante: i bordi del cerchio sono <strong>seghettati<\/strong>. In effetti, i colori che il cerchio pu\u00f2 assumere sono solo bianco e nero. Serve un modo per rendere il bordo pi\u00f9 &#8220;sfumato&#8221;.<\/p>\n\n\n\n<p>La soluzione \u00e8 usare la funzione float smoothstep(float edge0, float edge1, float x), riassumibile, matematicamente, in questo modo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se x &lt;= edge0, la funzione restituisce 0<\/li>\n\n\n\n<li>Se x \u00e8 compreso tra edge0 e edge1, la funzione restituisce un valore tra 0 e 1 che varia in base a quanto dista x da edge0 e edge1 tramite interpolazione di Hermite.<\/li>\n\n\n\n<li>Se x &gt;= edge1, la funzione restituisce 1<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"727\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Smoothstep.png\" alt=\"\" class=\"wp-image-29282\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Smoothstep.png 787w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Smoothstep-300x277.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Smoothstep-768x709.png 768w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/figure><\/div>\n\n\n<p>Sostituiamo quindi la funzione <code>step<\/code> con questa funzione, utilizzando un parametro <code>blur_factor<\/code> per personalizzare l&#8217;ampiezza della zona sfumata.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">float\u00a0blur_factor\u00a0=\u00a00.01;\nfloat t = 1.0 - smoothstep(radius - blur_factor, radius, dist);<\/code><\/span><\/pre>\n\n\n<p>La sottrazione a 1.0 del valore in output dalla <code>smoothstep<\/code> serve semplicemente a invertire il risultato: in questo modo un valore t &gt; 0 corrisponder\u00e0 a una posizione all&#8217;interno del cerchio.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"612\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/GoodCircle.png\" alt=\"\" class=\"wp-image-29283\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/GoodCircle.png 612w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/GoodCircle-300x300.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/GoodCircle-150x150.png 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/GoodCircle-100x100.png 100w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/GoodCircle-600x600.png 600w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-parte-3-creiamo-l-anello\">Parte 3 &#8211; creiamo l&#8217;anello<\/h2>\n\n\n\n<p>Per creare l&#8217;anello abbiamo due soluzioni: possiamo creare un secondo cerchio pi\u00f9 piccolo e sovrapporlo al primo, oppure, per mantenere il codice pulito e salvare un po&#8217; di performance, possiamo<strong> cambiare i parametri<\/strong> che passiamo alla funzione <code>smoothstep<\/code>.<\/p>\n\n\n\n<p>Siccome dobbiamo creare un anello, introduciamo una variabile <code>disk_thickness<\/code> che ne specifichi la larghezza. Dopodich\u00e9 sostituiamo i parametri della <code>smoothstep <\/code>in questo modo:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">float t = 1.0 - smoothstep(disk_thickness - blur_factor, disk_thickness, abs(radius - dist));<\/code><\/span><\/pre>\n\n\n<p><code>abs(radius - dist)<\/code> indica la distanza tra le coordinate del punto corrente e la circonferenza. Quando questa distanza \u00e8 inferiore allo spessore dell&#8217;anello, il punto in questione \u00e8 da considerarsi all&#8217;interno dell&#8217;anello.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"619\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Ring.png\" alt=\"\" class=\"wp-image-29284\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Ring.png 617w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Ring-300x300.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Ring-150x150.png 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Ring-100x100.png 100w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-parte-4-aggiungiamo-la-distorsione\">Parte 4 &#8211; aggiungiamo la distorsione<\/h2>\n\n\n\n<p>Per creare un effetto distorsione dobbiamo innanzitutto avere una texture di riferimento su cui effettuare la distorsione, in modo da poter valutare graficamente quello che stiamo facendo.<\/p>\n\n\n\n<p>Utilizziamo quindi la funzione <code>vec4 texture2D(sampler2D sampler, vec2 coord)<\/code> per determinare il colore di ogni pixel in base alle coordinate di riferimento. Assegnando l&#8217;output di questa funzione a <code>gl_FragColor<\/code> verr\u00e0 mostrata la nostra immagine.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">gl_FragColor = texture2D(u_tex0 , uv);<\/code><\/span><\/pre>\n\n\n<p>Per ottenere un effetto di distorsione bisogna essenzialmente prelevare il colore del pixel di riferimento a partire da <strong>una coordinata diversa da quella corrente<\/strong>. Utilizzeremo il nostro anello per determinare quando applicare la distorsione e a quale intensit\u00e0.<\/p>\n\n\n\n<p>Cominciamo definendo un <code>float&nbsp;distortion_factor<\/code> e assegnandogli un valore a piacere. Utilizzeremo questa variabile per modulare l&#8217;intensit\u00e0 globale della distorsione.<\/p>\n\n\n\n<p>Siccome la distorsione deve essere radiale (dato che stiamo lavorando con un anello), dobbiamo calcolare per le coordinate correnti il <strong>vettore <\/strong>da sommare a <code>uv<\/code> per ottenere il colore del pixel di riferimento. Questo vettore sar\u00e0 <strong>uscente dal centro dell&#8217;anello<\/strong>, e avr\u00e0 magnitudine pari a <code>t<\/code>, il valore che indica se ci si trova o meno all&#8217;interno dell&#8217;anello. In questo modo per coordinate fuori dall&#8217;anello, e quindi con <code>t == 0<\/code>, la distorsione non verr\u00e0 applicata.<\/p>\n\n\n\n<p>il vettore uscente dal centro dell&#8217;anello \u00e8 <code>pos - center<\/code>, ma la sua magnitudine varia in base alle coordinate correnti. Normalizzando il vettore si risolve il problema e ci si assicura di poter gestire la magnitudine del vettore in maniera indipendente.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"608\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Distorsione.png\" alt=\"effetto GLSL\" class=\"wp-image-29285\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Distorsione.png 608w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Distorsione-300x300.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Distorsione-150x150.png 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Distorsione-100x100.png 100w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Distorsione-600x600.png 600w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/figure><\/div>\n\n\n<p>Il codice relativo, quindi, sar\u00e0 il seguente:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">vec2 distortion_vector = normalize(pos - center) * distortion_factor * t;\nvec2 distorted_uv = uv + distortion_vector;<\/code><\/span><\/pre>\n\n\n<p>A questo punto basta usare distorted_uv come input a texture2D per ottenere la distorsione.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">gl_FragColor = texture2D(u_tex0 , distorted_uv);<\/code><\/span><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"616\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DistorsioneImg.png\" alt=\"\" class=\"wp-image-29286\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DistorsioneImg.png 616w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DistorsioneImg-300x300.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DistorsioneImg-150x150.png 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DistorsioneImg-100x100.png 100w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DistorsioneImg-600x600.png 600w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n\n\n<p>L&#8217;effetto \u00e8 gi\u00e0 ottimo cos\u00ec, ma possiamo valutare di aggiungere un effetto di aberrazione cromatica per un risultato ancora pi\u00f9 interessante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-parte-5-aggiungiamo-l-aberrazione-cromatica\">Parte 5 &#8211; aggiungiamo l&#8217;aberrazione cromatica<\/h2>\n\n\n\n<p>L&#8217;aberrazione cromatica \u00e8 un effetto visivo che si traduce nella <strong>separazione dei canali RGB<\/strong> nell&#8217;immagine finale. Se estraiamo le componenti R, G e B da un&#8217;immagine, creiamo 3 immagini distinte usando solo una singola componente, e le sovrapponiamo in modalit\u00e0 additiva spostando leggermente ciascuna delle 3 immagini, otteniamo l&#8217;effetto in questione.<\/p>\n\n\n\n<p>Per fare ci\u00f2 ci basta estrarre in maniera indipendentemente i canali RGB utilizzando 3 funzioni <code>texture2D<\/code>, a cui passeremo delle varianti di <code>distorted_uv<\/code> ottenute sommando a ciascuna un vettore di offset per prelevare la relativa componente di colore da una posizione leggermente diversa.<\/p>\n\n\n\n<p>Vogliamo per\u00f2 che l&#8217;aberrazione sia presente solo in prossimit\u00e0 dell&#8217;anello. Utilizzeremo ancora una volta <code>t<\/code> come maschera per rimuovere l&#8217;effetto quando non ci si trova dentro l&#8217;anello.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">vec2 r_shift = vec2(0.05 , 0.02) * t;\nvec2 g_shift = vec2(0.03 , 0.04) * t;\nvec2 b_shift = vec2(-0.04 , 0.02) * t;\n\nfloat r = texture2D(u_tex0 , distorted_uv + r_shift).r;\nfloat g = texture2D(u_tex0 , distorted_uv + g_shift).g; \nfloat b = texture2D(u_tex0 , distorted_uv + b_shift).b;\n\ngl_FragColor = vec4(r , g , b , 1.);<\/code><\/span><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-risultato-finale\">Risultato finale<\/h2>\n\n\n\n<p>Ecco, quindi, il risultato finale:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"621\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Finale.png\" alt=\"\" class=\"wp-image-29287\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Finale.png 617w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Finale-298x300.png 298w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Finale-150x150.png 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/Finale-100x100.png 100w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/figure><\/div>\n\n\n<p>Il codice, completo, \u00e8 questo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"GLSL\" data-shcb-language-slug=\"glsl\"><span><code class=\"hljs language-glsl\"><span class=\"hljs-keyword\">precision<\/span> <span class=\"hljs-keyword\">mediump<\/span> <span class=\"hljs-type\">float<\/span>;\n<span class=\"hljs-keyword\">uniform<\/span> <span class=\"hljs-type\">sampler2D<\/span> u_tex0;\n<span class=\"hljs-keyword\">uniform<\/span> <span class=\"hljs-type\">float<\/span> u_time;\n<span class=\"hljs-keyword\">uniform<\/span> <span class=\"hljs-type\">vec2<\/span> u_resolution;\n\n<span class=\"hljs-comment\">\/\/=====================================================<\/span>\n\n<span class=\"hljs-type\">void<\/span> main() \n{\n    <span class=\"hljs-type\">vec2<\/span> uv = <span class=\"hljs-built_in\">gl_FragCoord<\/span>.xy \/ u_resolution.xy; <span class=\"hljs-comment\">\/\/x and y in range 0-1<\/span>\n    <span class=\"hljs-type\">vec2<\/span> pos = <span class=\"hljs-built_in\">gl_FragCoord<\/span>.xy \/ u_resolution.x; <span class=\"hljs-comment\">\/\/x in range 0-1<\/span>\n    <span class=\"hljs-type\">vec2<\/span> center = <span class=\"hljs-type\">vec2<\/span>(<span class=\"hljs-number\">0.5<\/span> ,  u_resolution.y \/ u_resolution.x * <span class=\"hljs-number\">0.5<\/span>);\n    <span class=\"hljs-type\">float<\/span> dist = <span class=\"hljs-built_in\">distance<\/span>(center , pos);\n\n    <span class=\"hljs-comment\">\/\/ring params<\/span>\n    <span class=\"hljs-type\">float<\/span> radius = <span class=\"hljs-built_in\">mod<\/span>(u_time * <span class=\"hljs-number\">0.05<\/span> , <span class=\"hljs-number\">1.<\/span>);\n    <span class=\"hljs-type\">float<\/span> blur_factor = <span class=\"hljs-number\">0.08<\/span>;\n    <span class=\"hljs-type\">float<\/span> disk_thickness = <span class=\"hljs-number\">0.06<\/span>;\n\n    <span class=\"hljs-type\">float<\/span> t = <span class=\"hljs-built_in\">smoothstep<\/span>(disk_thickness, disk_thickness - blur_factor , <span class=\"hljs-built_in\">abs<\/span>(radius - dist));\n\n    <span class=\"hljs-comment\">\/\/distortion params<\/span>\n    <span class=\"hljs-type\">float<\/span> distortion_factor = <span class=\"hljs-number\">0.2<\/span>;\n\n    <span class=\"hljs-comment\">\/\/chromatic aberration params<\/span>\n    <span class=\"hljs-type\">vec2<\/span> r_shift = <span class=\"hljs-type\">vec2<\/span>(<span class=\"hljs-number\">0.05<\/span> , <span class=\"hljs-number\">0.02<\/span>) * t;\n    <span class=\"hljs-type\">vec2<\/span> g_shift = <span class=\"hljs-type\">vec2<\/span>(<span class=\"hljs-number\">0.03<\/span> , <span class=\"hljs-number\">0.04<\/span>) * t;\n    <span class=\"hljs-type\">vec2<\/span> b_shift = <span class=\"hljs-type\">vec2<\/span>(<span class=\"hljs-number\">-0.04<\/span> , <span class=\"hljs-number\">0.02<\/span>) * t;\n\n    <span class=\"hljs-type\">vec2<\/span> distortion_vector = <span class=\"hljs-built_in\">normalize<\/span>(pos - center) * distortion_factor * t;\n    <span class=\"hljs-type\">vec2<\/span> distorted_uv = uv + distortion_vector;\n\n    <span class=\"hljs-type\">float<\/span> r = <span class=\"hljs-built_in\">texture2D<\/span>(u_tex0 , distorted_uv + r_shift).r;\n    <span class=\"hljs-type\">float<\/span> g = <span class=\"hljs-built_in\">texture2D<\/span>(u_tex0 , distorted_uv + g_shift).g; \n    <span class=\"hljs-type\">float<\/span> b = <span class=\"hljs-built_in\">texture2D<\/span>(u_tex0 , distorted_uv + b_shift).b;\n\n    <span class=\"hljs-built_in\">gl_FragColor<\/span> = <span class=\"hljs-type\">vec4<\/span>(r , g , b , <span class=\"hljs-number\">1.<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">GLSL<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">glsl<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>ho utilizzato una variabile che tiene traccia del tempo trascorso dall&#8217;avvio per far variare la lunghezza del raggio. Tramite modulo l&#8217;animazione viene messa in loop.<\/p>\n\n\n\n<p>\ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando in un videogioco si verifica un esplosione, un evento violento o un impatto, un modo graficamente interessante per dare feedback al giocatore e per rendere meglio a schermo ci\u00f2 che \u00e8 avvenuto \u00e8 utilizzando un effetto onda d&#8217;urto. In questo breve tutorial vedremo come scrivere un fragment shader in GLSL per creare un effetto&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\">Read more<\/a><\/p>\n","protected":false},"author":267,"featured_media":29374,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10305],"tags":[12513,12511],"collections":[11708,12402],"class_list":{"0":"post-28963","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-sviluppo-videogiochi","8":"tag-fx","9":"tag-glsl","10":"collections-dalla-community","11":"collections-codemotion-guides-it","12":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creiamo un effetto &quot;onda d&#039;urto&quot; in GLSL - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Un breve tutorial per creare un effetto onda d&#039;urto con distorsione radiale e aberrazione cromatica usando GLSL\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creiamo un effetto &quot;onda d&#039;urto&quot; in GLSL\" \/>\n<meta property=\"og:description\" content=\"Un breve tutorial per creare un effetto onda d&#039;urto con distorsione radiale e aberrazione cromatica usando GLSL\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-27T13:39:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T10:09:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Gabriele Scaggiante\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriele Scaggiante\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\"},\"author\":{\"name\":\"Gabriele Scaggiante\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/93da9439daf0318085b3436d179b447f\"},\"headline\":\"Creiamo un effetto &#8220;onda d&#8217;urto&#8221; in GLSL\",\"datePublished\":\"2024-08-27T13:39:03+00:00\",\"dateModified\":\"2024-09-03T10:09:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\"},\"wordCount\":1265,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp\",\"keywords\":[\"FX\",\"GLSL\"],\"articleSection\":[\"sviluppo videogiochi\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\",\"name\":\"Creiamo un effetto \\\"onda d'urto\\\" in GLSL - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp\",\"datePublished\":\"2024-08-27T13:39:03+00:00\",\"dateModified\":\"2024-09-03T10:09:03+00:00\",\"description\":\"Un breve tutorial per creare un effetto onda d'urto con distorsione radiale e aberrazione cromatica usando GLSL\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp\",\"width\":1792,\"height\":1024,\"caption\":\"shockwave, onda d'urto\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"sviluppo videogiochi\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Creiamo un effetto &#8220;onda d&#8217;urto&#8221; in GLSL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/93da9439daf0318085b3436d179b447f\",\"name\":\"Gabriele Scaggiante\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/ProfileImageSquare-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/ProfileImageSquare-100x100.png\",\"caption\":\"Gabriele Scaggiante\"},\"description\":\"Video game developer by profession and blogger, I create advergames to help brands and companies promote themselves through gaming.\",\"sameAs\":[\"https:\/\/gabrielescaggiante.com\/\",\"https:\/\/www.linkedin.com\/in\/gabriele-scaggiante-100b54254\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/gabriele-scaggiante\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creiamo un effetto \"onda d'urto\" in GLSL - Codemotion Magazine","description":"Un breve tutorial per creare un effetto onda d'urto con distorsione radiale e aberrazione cromatica usando GLSL","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/","og_locale":"en_US","og_type":"article","og_title":"Creiamo un effetto \"onda d'urto\" in GLSL","og_description":"Un breve tutorial per creare un effetto onda d'urto con distorsione radiale e aberrazione cromatica usando GLSL","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-08-27T13:39:03+00:00","article_modified_time":"2024-09-03T10:09:03+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp","type":"image\/webp"}],"author":"Gabriele Scaggiante","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Gabriele Scaggiante","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/"},"author":{"name":"Gabriele Scaggiante","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/93da9439daf0318085b3436d179b447f"},"headline":"Creiamo un effetto &#8220;onda d&#8217;urto&#8221; in GLSL","datePublished":"2024-08-27T13:39:03+00:00","dateModified":"2024-09-03T10:09:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/"},"wordCount":1265,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp","keywords":["FX","GLSL"],"articleSection":["sviluppo videogiochi"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/","name":"Creiamo un effetto \"onda d'urto\" in GLSL - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp","datePublished":"2024-08-27T13:39:03+00:00","dateModified":"2024-09-03T10:09:03+00:00","description":"Un breve tutorial per creare un effetto onda d'urto con distorsione radiale e aberrazione cromatica usando GLSL","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp","width":1792,"height":1024,"caption":"shockwave, onda d'urto"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/creiamo-un-effetto-onda-durto-in-glsl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"sviluppo videogiochi","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-videogiochi\/"},{"@type":"ListItem","position":4,"name":"Creiamo un effetto &#8220;onda d&#8217;urto&#8221; in GLSL"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/93da9439daf0318085b3436d179b447f","name":"Gabriele Scaggiante","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/ProfileImageSquare-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/07\/ProfileImageSquare-100x100.png","caption":"Gabriele Scaggiante"},"description":"Video game developer by profession and blogger, I create advergames to help brands and companies promote themselves through gaming.","sameAs":["https:\/\/gabrielescaggiante.com\/","https:\/\/www.linkedin.com\/in\/gabriele-scaggiante-100b54254\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/gabriele-scaggiante\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--600x600.webp","author_info":{"display_name":"Gabriele Scaggiante","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/gabriele-scaggiante\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful-.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/08\/DALL\u00b7E-2024-08-27-15.35.42-A-widescreen-image-of-a-massive-explosion-or-shockwave-in-a-video-game-setting.-The-explosion-is-bright-and-intense-with-fiery-debris-and-a-powerful--600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Gabriele Scaggiante","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/gabriele-scaggiante\/"},"uagb_comment_info":0,"uagb_excerpt":"Quando in un videogioco si verifica un esplosione, un evento violento o un impatto, un modo graficamente interessante per dare feedback al giocatore e per rendere meglio a schermo ci\u00f2 che \u00e8 avvenuto \u00e8 utilizzando un effetto onda d&#8217;urto. In questo breve tutorial vedremo come scrivere un fragment shader in GLSL per creare un effetto&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/267"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=28963"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28963\/revisions"}],"predecessor-version":[{"id":29376,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28963\/revisions\/29376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/29374"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=28963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28963"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}