Liquid Shader Breakdown | Unity URP + Built-in

if you're looking for a kind of convincing liquid container that doesn't require much setup this is the effect for you I made the first tutorial for the Shader over four and a half years ago but I made a few improvements to the original recently so I figured it's worth making a video today the effect is done with a Shader and a c-sharp script and it creates the illusion of a volume and wobbles when you move or rotate it you can find the urp Shader graph file built in Shader code file and the c-sharp script Linked In the description the script will feed these three values to the Shader one for the fill position and two for the movement on the x and z axis so let's go over how this Shader works for clarity I've just added a gradient texture to the base color so you can see both sides of the mesh and first up we're going to use the fill position to create a cutoff point for the alpha moving the liquid level up and down should move the alpha clipping value but we don't want it to stay local when we rotate the container so we have to use World space positions here so here we take the world position and subtract the object's position so we have a world space coordinate but it still moves with the liquid container and then we subtract the fill position from script and the Y value of this will be used as the alpha the more the container will move the more rotation will apply we can preset a 90 degree rotation and add it in based on the velocity so we rotate the world space fill position using rotate about axis nodes once for the x-axis and once for the z-axis these values are then multiplied by the floats that come from the c-sharp script the rotations are added together and then added to the world space field position that's the vertex part done to prevent some no spaghetti I've added a new block to the vertex input for this value so we can reuse it later as a custom interpolator we can set up the texture to move with the fill level use the Y value of the custom interpolator scuv for a gradient texture to give the illusion of a volume add a solid color to the back faces so it looks like there is a flat top even when you look from above using an is front face node and a branch we can see which faces are front or back and give them a different color to have some secondary movement when the liquid moves a lot add a sine wave to the fill position let's say you have a square container the x value of fill position is the frequency for one side and the set value of fill position is the frequency for the other side the intensity then comes from how much it moves so build sine wave using the fill position custom interpolator x and z values added together add some time for a moving wave and base the intensity on the wobble X and wobble set values from scripts added together add a little highlight line by finding the overlap between two step cutoff points the Pink Arrow going up is the alpha cutoff we made the blue arrow going down is an inverted version with slightly bigger values with these two values you can find the overlap where the Highlight will appear so here we have a cutoff Point going down presented as a smooth step it's a smooth step so we can have a fading gradient line if we want by increasing this smoothness value multiplied by the alpha cut off going up to find the overlap and then multiply it with a color for tinting finally add in a nice glowing Rim light effect by using the fresnel node and multiplying with a color in the C sharp script we calculate the velocity and angular velocity of the transform and use that to control the rotation in the Shader the velocities get added to a float for both the x and z axes and this floats decrease over time and get multiplied with a sine wave then we send this value to the Shader and this will be underscore Mobile X and underscore wobble sets we saw in the Shader graph and the fill position is also set by The Script it is based on the center of the mesh bounds in World space and then we subtract the transform position and the fill amount slider that we set in the inspector and this will be the effector 3 fill amount that we used in the Shader you could use a scene color node to make the liquid look transparent and then add in the world space normals for a bit of distortion but this doesn't always look good from all angles so I didn't actually add it into the graph but if you want to try it here's what the node setup looks like and that's how the fake liquid effect works to set it up you just need to go to the link in the description take the Shader graph and the script or to share the code for built-in and make a material for your liquid then add the liquid script and adjust it it's set to execute in edit mode so it should work right away and there are some example settings in the linked post and if you want more tutorials like this check out my GitHub page that has links to all of my tutorials about all sorts of Game Dev topics finally a huge thank you to my supporters on patreon who make these tutorials possible thanks for watching have fun and see you in the next one

Channel: MinionsArt

Views: 21,034

Keywords:

Id: DKSpgFuKeb4

Length: 5min 57sec (357 seconds)

Published: Thu Dec 22 2022