GODOT TUTORIAL: Shockwave shader for noobs

hello everyone it's snowy here and welcome to this Godot tutorial where I will explain you how to make a shockwave shader that looks like this there are hundreds of examples and tutorials that you can find on the web but I think they are not very beginner friendly and lack visual explanations the goal of this tutorial is to give you an insight so you can later create your very own shaders of course you could just go on share the toy and grab some shockwave shader and slap it into Godot but that's not the goal here so without further ado let's get right into it today we will use a fragment shader which is basically code that runs for every pixel in a given area and it returns a new color for each of those pixels to do anything remotely interesting we need to know where is the current pixel that information is given by the UV coordinates or in short UV the UV is a vector whose x and y coordinates range from 0 to 1 no matter of the dimensions or a resolution of the screen for example the UV of the central pixel is 0.5 0.5 it has also a cool visual representation where we set the red and green channels of the pixels to the UV when we are at 0 1 the color is green when we are at 1 0 the color is red and at the top right at 1 1 it's yellow because green + red is yellow the UV can be used to draw almost any kind of shape and sample a texture according to the coordinates it's kind of like every pixel is saying hey I'm here I want the corresponding fragment from the texture but nothing restrains the fragment to be at some position but requests to sample a different one this way you can offset the texture or distort it so in ghetto you select the canvas item you want to apply the shader to and under material you create a new shader material and here you create a new shader in the shader we need to tell guru what type of shader this is so we type shader type and this is a canvas item so canvas item and semicolon at the end to tell the compiler this is the end of the expression next we want to create the fragment function so that will be the code that will be executed for every pixel in the canvas item so void fragment parenthesis and finally curly bracket for the sake of having a visual representation let's set the color to the UV or respectively the red and green channels to the UV so we type color equals vector for the first two channels red and green will be set to the UV the blue channel will be equal to zero and the Alpha will be one so it's fully opaque and as you can see it looks the same as on the animation with the exception that here the y-axis is flipped so as I showed you you can use the UV to map a texture to the canvas items so let's comment this line out with two slashes so again color equals texture so this is a function that loads a sampler 2d or a texture and it returns a color we want to use the current texture of the canvas item so we write in all caps texture and we want to map it according to the UV and as you can see it just displays the original texture without any modification now let's say I want to offset it what we can do is to pass a different coordinate to the texture function so what we can do is for example UV minus vector zero point five and zero and as you can see it offsets the texture by a half to the right okay let's comment that out and uncomment the line we have above to get back to this colorful UV representation now let's create the distortion for the shockwave we want to displace two pixels away from a point on a vector field it would look something like this first of all we need to define a new uniform variable for the center point we declare it here at the top uniform back to center and as you can see it shows up in the unit vector in the fragment function we define a new vector that we call this and we set it to the UV minus the center this gives us the vector going from the center to the current UV coordinate then we normalize the whole thing so we only keep the direction now we can use this to displace the UV on the line below which change the UV to UV minus desc currently the center point is here but we want it to be in the center of the image so in the inspector we set it to zero point five zero point five and as you can see the UV now appears distorted away from the center we will now declare a new uniform that is a float and we will call it force this will be used to modulate the strength of the distortion here we can multiply the displacement vector by the force currently the force is equal to zero so there is no distortion whatsoever but as soon as we modify this value you can see how it affects the you now let's uncomment the line that samples the texture and replace the offset vector by the disp vector you can see that now the image is distorted you can change the center of the distortion as well as modulate its force okay so now we want to save the shader so we can use it elsewhere under material right-click the shader and hit save I will save it as shockwave dot shader here I have a simple 2d scene with some sprites in it and I have a canvas layer in it now I want to add a color rectangle in the canvas layer and I will use the layout option to make it fullscreen in the color rectangle we go under the canvas item section and under material we create a new shader material and here we load the shader we'll previously say we want to apply the distortion to the screen so instead of texture and UV we will use screen texture and screen UV in the editor this takes the current 2d view so it may look a bit weird when we start playing with the parameters but in game it will look fine because the color rectangle will cover the entire screen by the way we can now remove this line because this was used only to show the UV as a demonstration for the tutorial what bothers me right now is that the distortion is stretch and not circular that is because the width and height are not the same we can fix that by dividing or multiplying one of the UV coordinates by the aspect ratio let me demonstrate by a simple animation first of all we get our aspect ratio here at s2 then we want to scale the x-axis of the UV according to that ratio but we want to scale it from the middle in order to do that we first offset the x-axis then we can scale it here with divided by 2 and next we can offset it back so back in the shader we want to calculate the ratio in the fragment function so we create a new float that we call ratio and we set it to screen pixel size dot X divided by screen pixel size dot Y next we define a new vector that we call scaled UV for our scale DV and we set it to screen UV - back to 0.5 0 so we offset it then we divide the whole thing by the ratio but only on the x-axis so we do back to ratio and 1 on the y-axis and finally we offset it back so we add a vector 0.5 and 0 now here in the displacement we change screener V by the scale the UV and as you can see now the distortion is circular and looking kinda nice so now we want to limit the distortion to a doughnut shape in order to do that we need to calculate a mask circle whose values will arrange from 0 to 1 and appear black and white to do that we will use the length of the UV vector and we want the circle to be drawn from our center point so when we are at our center coordinate we want to run up it to 0 here I want the center point of the circle to be at 0.5 0.5 so I need to remap that to be 0 so I just subtract 0.5 0.5 okay so in the fragment function under the scaled UV declare a new float that we call mask and we set it to the length of the scaled UV minus the center now let's display how it looks here at the end we set the color RGB channels to our mask so we need to pass it as a vector E so as you can see we have a circular gradient that goes from black to white basically it displays the length that goes from 0 to infinity but here we want to have a solid border so here we want every value under a certain edge to be black and over that value we want it to be white to do that we will use the step function where we define our edge value for example 0 three and as you can see now it climbs the values and we have a circle with a harsh border to control the radius of this circle we can define a new uniform that will be a float and let's call it size instead of the arbitrary value here we replace it by size and now we can control the size of the circle from the inspector I don't like those harsh borders so instead of the step function we can use this smooth step function that takes two edges so it will interpolate between black and white so we define our first edge and the second that we offset by some small value so that will be our feather and as you can see we now have a federate circle I like the end of the feather to be the actual size so we just need to do the opposite for the edges here we go but we want this to be a white circle on a black background so let's invert the value so we just add one - the whole smooth step and now it's inverted now instead of displaying this we can comment it out and apply the mask to the displacement so we just multiplied the thing by the mask and now as you can see the distortion is only applied in this circle area let's uncomment the line now to finish the download shape we want another circle that is black inside the white one okay let's put this first expression between parentheses so we can multiply it by the other smaller circle so we take this move step and we put it here and we want it to be smaller so we change the edges and we have the doughnut shape we wanted now if we comment out this line you can see that the distortion is only applied in this donut area okay let's uncomment that and add another uniform that will be a float and let's call it thickness here in the second smooth step that is our black circle we modify the outer edge to be sighs - thickness and the inner edge - sighs - thickness minus 0.1 and now from the inspector we can change the thickness finally let's comment that out again and now we can also change the thickness of the distortion so this is it we have made a shock wave using shaders and now we can use an animation player to animate the shock wave one last thing maybe you have noticed and the example I showed you at the beginning there is some chromatic aberration in the shock wave so that is your homework try to do it yourself if you have no idea or you'll really get stuck ask me down in the comments and I'll try to reply as fast as I can anyways if you enjoyed the tutorial and you want to see more things like this consider subscribing and without further ado see you next time

Channel: Nolkaloid

Views: 19,621

Keywords: godot, game dev, shader, shockwave, begginer, noob, in depth, engine, game, glsl, 2d, 3d

Id: SCHdglr35pk

Length: 15min 47sec (947 seconds)

Published: Thu Jun 04 2020

Reddit Comments

[u/krystofklestil]

I followed your tutorial and really liked it, it inspired me to put it in my game as I thought the VFX would nicely align with the core mechanic adding a bit of a whoomp! to it all. Thanks!

​

link the the reddit post showing the outcome.

[u/fabulousmaximus]

This is a really great tutorial. Easy to follow along and clear what is happening. Thanks for posting it.

[u/mharm11]

Thanks for the great tutorial. I'm really struggling to get the center to match the position of my player and am wondering if you might be willing to help. Right now I have a "Shockwave" scene that is created in/at my Player scene when a certain Input is pressed. It contains an Area2D who's collision expands and "destroys" things, and that part works fine. I added a canvas layer-->color rect-->shockwave.shader (like in your tutorial) to this scene (as a child of my Area2d root) and animated the parameters along with my Area2D collision shape. It deploys fine, but never in the correct place. I have a script in my Shockwave scene that just has a _ready(): func that plays the animation. In that I have tried the code below (and a few similar things), but it never works and I'm stuck. Any help very much appreciated:

func _ready():

`var position = self.position`

`$ShockwaveEffect/ColorRect.get_material().set_shader_param("center", position)`

`$`[`AnimationPlayer.play`](https://AnimationPlayer.play)`("Deploy")`