Ripple Wave Vertex Shader Graph - Easy Unity Tutorial

[Music] [Laughter] [Music] [Laughter] [Laughter] [Music] hello everyone in today's video we will show you how to create ripple effect using shader graph in unity engine this is ramus altaba from binary lunar and let's get started okay today's tutorial won't be detailed one and i won't go step by step creating the shader graph i already created it for you guys and i'll just explain what the nodes mean and how i created them but before we start i want to mention that i've created high density basic shapes shapes like plane and the sphere they have more polygons than the normal uh or the default unity sphere on the plane so the more you have vertices the more the moose the wave animation will be maybe in the later lessons i'll show you techniques how to create tessellations to make even lower polygon shapes high polygon ones to get uh waves on them so let's open the shader file and i'll explain how i did it for easy understanding i divided the shader into you can say one two three four five six seven eight nine eight sections or groups we start by setting the ripple origin where we want the ripple or the wave starts the origin point on the shape on the surface of the shape then we can control the ripple density how many lines of waves we want within a certain amount of space then we can control the frequency how fast are the ripples generated then we can control the amplitude of the ripple which means we can control the length of the wave for example we can say if we are doing a ripple on a pool surface how much each vertices will jump up from the normal position then i added a fade out effect which means the ripples will fade out as they are as they go far from the origin position and finally i just added an extra which do a gradient color spot to show the area effect of the ripple so let's start discussing group by group the origin point or the ripple origin simply we get the position of vertices in the object space then we subtract it from the point we want it to be the ripple origin the ripple origin of course is a vector3 parameter we suppre subtract it from the position of the vertices on the object space then we measure what is the length between the point of origin and any vertices on the surface after that we create a parameter which is a float called ripple density to control uh how many ripples within a certain amount of space we have how dense are the ripples and then we multiply that with 6.28 you might ask what is that value it's uh the p value and we get perfect waves when we multi we get the multiplies of the p so 1p 2p 2p is used to calculate uh the circle so based on my researches this value is the best to get perfect waves so we will multiply 6.28 which represent p with a ripple density ripple density is a vector 1 or a float and i set to have minimum and maximum values between 0 and 10 and the default value to 3.5 then we multiply the length with the ripple density based on how far from the origin additionally we can control the frequency of the ripple how fast the ripples generated so we create a float another float set the default to the 3.5 and min 0 max 10 we multiply with an inversed p minus 6.28 and the frequency happening over time so we multiply time node with the frequency we want to control how fast the waves are generated then we add the density and the frequency together using an add node and we use the sine node to control the wave and to control how high is the wave or the ripple is we multi simply multiply with the amplitude value which is a float i set it to 0.1 of course all the values will be exposed in the editor so you can adjust them real time and finally not finally still some points some more points i created fade out effect to make the waves fade as they go far from the origin point so we need two values the edge blend do we want the edges of the shape to move or not and the effect radius how far from the origin points are the ripples before they fade out so we multiply the edge blend with the effect radius both of them are floats the effect radius i set the default value to 1 the minimum 0.1 the maximum 20 hedge of land is 0.5 and we set the minimum to 0.01 which means the minimum value or the minimum vertices near the center of the game object and the max value 0.9 representing the max vertices far from the origin or at the edges of the game object then we use a smooth step node and set h1 to be the effect radius and h2 the edge blend which means the maximum value can be the max of the effect radius and the minimum one is the nearest to the center and we use as input the lens how far is each point from the center because we will do the fade as the position gets further from the origin then simply we multiply the results of the fade out with the ripple amplitude then we need to get the normal vector to get the normal direction of the wave because if we didn't do that the waves will be sharp without any normal bend of the shape i can show you that now real time if you want if i don't use the normal vector by directly going here let's save check how harsh are the waves they are sharp not smooth waves so to fix this we just added the normal vector of the object and multiply it with the previous results then we add everything to the original position of the vertices that will create the wave and we link the results finally to the position on the vertex of the shader after that i just added an extra step it's just a gradient color spot which will guide you where is uh the origin point located so simply we we get the lens from the ripple origin and we do a lerp from zero to the current length of the vertices so the gradient color will go from zero representing the origin and give the highest value of the color at the center then it fades out as we go further from the origin point so we can determine where is the edge of the gradient by creating a new flow and set its default value to 1 for now then we can clamp the values between 0 and 1 using clamp node and set the minimum to 0 maximum to 1 or simply we can replace that by saturate saturate node so i can create a saturate node saturate node is the same as clamp node and but but it is automatically clamped up values between zero and one so it's exactly the same then simply we multiply the results with the color with the gradient color that we want it's just a simple color multiply it with results then here i added sample texture 2d if you you want to add a texture to your shape or geometry or model and created main texture property just add texture 2d so you can add texture to the object and finally add the gradient color spot to the texture then link them to the base color on the fragment save and you will get these awesome results so as you can see here we can control everything from the inspector we can add the texture but i think i don't have one right now let's just use this one for example so we can have a texture if you want but let me remove it so we can see the color you can change the color to whatever you want here is yellowish reddish also we can control where is the origin of the ripples on the surface of the game object using the xyz values which are vector3 that we created during creation of the shader so you can control the edge of the gradient how far from the center this gradient will be shown the amplitude controls the length of the wave how far from the surface its vertices each vertices can reach the frequency how fast the waves are let me click play so we can see this real time here is the amplitude on the plane here we can control the frequency to increase the speed we can make it very slow like something sorry 0.5 it feels like slow motion of water drop we can control also the ripple density how dense or near each wave from the next one the effect radius how far each ripple can go from the center so here we have a low value they are already reaching here before reaching the end of the game object we can increase and because as you can see all vertices getting the wave we can also do the edge blend which makes the wave blends nicely at the edges of the plane here so then i created a second material to control everything on this sphere and we can control the same parameters here nothing different i just made a different material so i can't change the color if i want or add a texture i think you can implement this nicely using code in your video games maybe especially if you want to create when a bullet hits the surface of the water that would be nice actually it can have a lot of implementations and it's up to your crib and that's it for today's video if you found this video beneficial don't forget to hit like subscribe and the notification bell so you don't miss the next one i'm deeply thankful for our supporters on patreon for keeping supporting us despite the fact that i didn't post much content recently but i'll promise i'll do more regularly from now on thanks for watching and till next time see you soon [Laughter] you

Channel: Binary Lunar

Views: 22,222

Keywords: binary lunar, unity 2021 tutorial, game development, unity beginner tutorial 2021, easy step by step tutorial, ripple shader unity, ripple pool shader, ripple wave shader graph, Ripple Wave Vertex Shader Graph, Easy Unity Tutorial, bullet hitting water, what happens when a bullet hits water

Id: QsLkb1aOkb8

Length: 12min 50sec (770 seconds)

Published: Sun Jul 18 2021