Potion Liquid Wobble Shader Graph - Easy Unity Tutorial

hello everyone in today's video we'll show you how to create a wobbling effect for a liquid inside a bottle or a potion using shader graph this topic has been covered previously by other content creators but they all did it using a coded shader hlsl but in today's video we'll show you how to create it using the shader graph this is ramus altaba from binary lunar and let's get started okay let's start by going to the unity hub i installed uh the latest stable unity 2020.3 i think there is a better version already released but i'll use that for now so let's create a new unity 2020.3 project and let's make it universal render pipeline template let's name it let's name it potion lick ocean liquid [Music] shader okay so let's start by creating a capsule which will represent our potion in this example we will create two capsules one for the glass and one for the liquid so let's right click 3d object and select capsule let's name it glass position it well in the scene and we simply can create a new material for that and name it glass and for that material we can it will automatically choose universal render pipeline lit and we need it to be transparent and also let's reduce the the transparency and we forgot to apply the material to the glass itself so now we can see it's transparent and we want it to be like a realistic glass so we need to add some metallic so this is a glass to do the liquid we simply duplicate the glass and make it as a child and rename to liquid let's reduce the scale to 0.95 on all accesses and now let's create a new material and as you can see we can see the liquid through the glass now now it's time to create the liquid shader graph so right click create shader and we can make it only teddy graph let's apply the shader to the material which is already applied to the liquid game object the capsule double click to open it now the first thing to do is to control the feeling of the potion of this capsule so to do that we need to create a position node because we want to compare the vertices position to a specific position in the world so let's create position node and we need to deduct that from the game object position itself so game object object we subtract the object position from the world position subtract okay now to to access the y axis we need to split the result of subtracting because the field will be only on the y axis so we split this subtraction to get the y-axis we use a split node then we use a step node to differentiate or to specify the fill how much the capsule is filled so again we use the green channel which represents the y-axis here and to control the field of the game object we create new float let's name it fill with that we can control how much the capsule or our portion is filled and that will be connected to the alpha because we don't want to show the places where the alpha is zero represented by the black portion while we want to show the white portion so let's add to the fragment alpha and we need to add an alpha clip threshold so the alpha works fine set the surface to transparent now now it works okay and save let's try to control now the fill meter see now it's working but the problem here now as you can see we can see this the front surface but not the back ones so let's go back to the shader and enable two sides now we can see the two sides of the field the next step is to control the color of the front surface and the back surface and to do so we need the following nodes we will need a branch which represents the if statement so create branch node and there is also a built-in boolean to check if the surface is front or back so right click create node is front surface and link it to the predicate if we are on the front surface we want to show the liquid color if not we will show the surface color which represent the back side color so let's create two colors now the first color is liquid color and if we are not on the front surface we will create another color and let's name it surface if you want to make it as a health potion choose a liquid color for something red and surface color to a lighter grade of the red one then we need to link it to the color base at the fragment let's save and see if that worked seems so as you can see the front has been rendered with a dark red the back has been rendered with a light red to make the color look more beautiful we can add a frenzel effect so let's clean things and group them those are related to the fill so let's group the those as fill group and for the color here we can add a frenzel effect for a snail sorry we can control the fresnel power we can control the fresnel color so let's add another color property for this nail color we multiply that with the fresnel effect in our case maybe it's good to choose uh something orangish maybe then we link those to the color base we can group everything here as color group and as you can see now we can control the fresnel color which maybe give an effect of the liquid intensity uh adds at the edges of the capsule or the potion now let's go to the fun part we want to rotate the liquid and to do so to do the wobble effect we will need to rotate along two axises along the x-axis and the z-axis around the y-axis and to do so we need to create position node but for the game object itself then there is a node called rotate around access so the first one we need to rotate on the x-axis then we need to create two parameters which there is a code of found which do the wobble effect so we need here two floats one is cool called wobble x and the other one oval z then we multiply the wobble x with the rotation on the x-axis we do the same for the z-axis so create a new rotate about axis this time we want to rotate around the z-axis so let's make the z1 and the rest accesses zero zero and of course we want to rotate using degrees and make it 90 degrees for both the z and x-axis again we multiply the rotation around axis with the wobble z parameter here then we add both rotations together so let's group those and name them wobble effect and that would wobble effect should be added here after subtracting the object position from the world position and before splitting the y-axis and i think that's it to test that let's save go back to the scene see here is the x here is the z actually seems i flipped them so we can correct that immediately by multiplying this here and this here let's save go back to the scene now the x rotating rotating around the x correctly z rotating around the z correctly and there is uh a code to simulate the wooble effect yeah so the wobble effect has been created by minion arts i found their code on the link i provided down in the description so let's copy that script and paste it in our project so simply what it does over time it takes the movement on any axis then it is it over time so for example if we move to the right the slider of the wubble x will increase to one then it will try to reduce that value to zero by wobbling over time till it reaches back zero so we downloaded the wubble script which provided by minions art thanks to them and if we open the script individual studio to check what parameters we need to pass and then apply those exactly to the shader graph because it's case sensitive as you can see here we need wobble x and wobel z we already created them but we should set here the references correctly the same as here so let's go back to the shader and for the wobble x make sure you set the reference to underscore wooble x see and you should do the same for the z-axis click on the wobble z and sets the reference google z save now we need to apply the script to the liquid just drag and drop hit play and let's see if it worked seems it's working perfectly now because i can see some wobbling here it is we can move around and it will feel like a realistic liquid inside the potion see how nice we can rotate also on any axis and check how it feels and look something wrong here so as you can see i made a mistake here because i made the uh [Music] surface as transparent that makes us rendering both back and front sides at the same time causing this undesirable results to solve that we just need to turn back the surface to opaque and that will solve this issue and of course enable the alpha clip increase the feeling click play and now we got the effect perfectly i should have moved the glass sorry and that's it for today's video thanks for watching and if you found this useful don't forget to hit like subscribe and the notification bell so you don't miss the next video of course we are deeply thankful to our 45 supporters on patreon for encouraging us to keep publishing quality content till next video see you soon you

Channel: Binary Lunar

Views: 43,381

Keywords: binary lunar, liquid shader unity, liquid wobble shader graph, unity liquid shader, unity liquid shader graph, wobble effect shader, liquid wobble, unity 2021 tutorial, game development, unity beginner tutorial 2021, easy step by step tutorial, potion shader, unity potion shader, unity health potion

Id: eIZgPAZx56s

Length: 15min 20sec (920 seconds)

Published: Tue Apr 20 2021