Refraction ShaderGraph tutorial for Unity

[Music] hello hello my name is paulo this is here today we're going to do a tutorial on refraction refraction is basically uh when you're looking at something through a transparent surface you basically see like a distorted version of whatever is behind it so if you're looking like a a cup of wine you'll see through it and the world behind it will be visible but it'll be changed in a way and that's the refraction of the glass so refraction basically means that as the light is passing through a surface it gets kind of deformed and changed to look different to you so in this case for example for the pencil we can see anything that's in water gets refracted so the the light kind of bends and then it looks like it's a little thicker and a little more to the right so this this is the type of thing that we're gonna do making the actual calculations for actual refraction is actually very complicated uh so in video games we actually don't do that generally what we do is fake so the way we fake it is um we use what's called screen based refractions which is basically grabbing whatever is already drawn in the screen behind you and then the formula in some way and showing it but the problem with that is it does have some limitations for example in this little sphere you can see there's these trees here that are not in the scene so if you imagine this is your screen those trees are not rendered so we cannot use screen based refractions to show things like that but we can do examples like the pencil and in most cases if you make it you know with a little bit of blur and you know there's just like a shape in there it looks real enough that it you can sell the effect without it being like completely accurate in terms of like what a lens would do exactly we're going to start from this scene basically what we have here is a bunch of crystals that right now just have a plane a plane material with nothing in it and then behind we'll have this thresher if we do this right later on it will look like the treasure is being seen through a crystal and actually deformed and stuff so the first thing you need to do is to get access to whatever has already been rendered on the opaque path we gotta go into edit project settings and then over here under graphics you'll find your your render pipeline asset you can right click it go to properties and then you'll have here opaque texture and this pick texture basically is whatever was drawn during the opaque pass so turn that on over here it lets you down sample it you can say no dance upload and that basically means that it's gonna keep it one to one or if you want to downsample it means it's gonna scale it down so it's just gonna make it small we're gonna leave it at 2x by linear which is just a little smaller just because it's going to make it easier for us to see when we're using the opaque texture versus when we're just looking at the regular level so this is going to help us a little bit just in the testing but later on you can change it if you want to back in our project we can right click create and then shadow graph urp and then we can do little lit i'm just going to do it lit for now but it doesn't really matter and then over here we're going to call it refraction uh we open our shader here right now it doesn't do anything so let's just change the color to like a red save it and then let's go back here and we have our glass material here which is the one that's being used by that so we can just do properties and over here we can change the shader to shadow graphs and then we have refraction over here and this will become red just like we know that this is the material we're using okay so now we're going to grab the actual color from the scene and for that we just go to scene color and then we can hook this up here if you save right now this will be a mess so obviously it's not working so you got to come back into your graph go into graph settings and over here under universal you can select the surface type to be transparent and the main reason for that is the scene color is reading that opaque texture that we turned on earlier and that'll pick texture only exists after all the opaque has been uh rendered so we gotta be in the transparent path which is done a step after that so after saving now you can see we're transparent and you can see behind it but we're actually not looking exactly behind it what we're seeing here is actually the the depth path so you can see it's a little more pixelated than the rest uh to make it easier to see let's go back to our asset so we can go again project settings and over here right click properties and then um let me make this big so you can see it if i change this to 4x you can see it gets even more pixelated look how many how pixelated it is so actually this is not rendering what's actually behind what's actually grabbing is from that texture that is the final texture from the opaque path so if i go none you can see now it looks super crisp because it's not scaling it anymore so let's leave it at a 2x for now i kind of like 2x because it gives you like a it's smaller so it consumes less memory in your gpu also the the sampling is a little faster because again it's smaller and also it gives you kind of like a little bit of a free blur which if you're gonna be using this a lot for like crystals or water or things like that you know generally you want a little bit of blur so it's not bad to have like a little bit already baked in the fact that the texture is like a little bit uh lower rest so over here you can see it's taking a ub4 and that actually uh what it takes is a default value here is called a screen position so if you take this note here which uh is telling you the the position on the screen and the position screen is literally just like x and y where is on the screen if you hook this up directly here you'll see there's actually no change so basically you end up with the exact same result but if we modify it a little bit so for example we can add to it we grab this and then we hook up over here and then let's add for example create node add time and then let's grab the same time and multiply this this is just for a demo we don't actually need this but i think it'll help with uh explaining a little bit of what's happening so basically as time passes we're gonna do a sine wave which is up and down from minus one to one we're going to multiply by 0.1 because we don't want to move it that much and then instead of passing the c screen position we're going to pass that in here you can see now it's kind of moving in a diagonal up and down so it looks like the glass is kind of looking at different parts of the room in reality all it's doing is like panning that little texture uh but you can already start seeing a little bit of the um the downsides of screen based refraction so this stretch lines basically is because it's sampling the texture once the screen is over essentially this is the bottom of the screen so since we're using the the screen bridge reflection we only have basically from here to here to work with right we have whatever's painted there so if we try to sample inside the screen basically this is what happens uh our screen is finishing here and then we have a whole bunch of things so you gotta be careful how much into the edges you're gonna go when you're trying to use uh any sort of thing like screen versus refraction or screen based reflections either one okay so let's undo that because this part was just for just for fun we're just gonna keep this note here and we'll do some stuff with it soon we're actually gonna do proper uh refraction uh calculations which actually unity already has a way to do but it doesn't have a node so if you look here unfortunately there is no node for refract but there is a function so what you can actually do is use what's called a custom function a custom function allows you to put a shader code directly into a node so that you can access a bit more powerful stuff so we're going to do it here so basically under the type you can go to a file but in this case it's such a short amount of code that i'm just going to change it to a string let's name this function into refract and then down here let's put that and we gotta put our inputs on our output so we're gonna need three things to go in our view vector which is where is the camera looking from our normal which is the normal of the thing we're trying to render so basically each one of the faces would have a different normal and last is the what's called the index of refraction and the index of fraction will basically kind of determine just how strong the the deformations are from the refraction so let's start with that let's go over here uh we're gonna declare this is our this is our vector so vector and then this is gonna be u then another one and this is gonna be a normal and again this is a vector tree and last but not least this is a float and this is index of refraction generally i'll you'll see it is called i or in a lot of places and this will be our result and i'm just going to call it result because why not you know that's a nice name and our result is also going to be a vector 3. and then now here we're going to say result equals refract and then we're going to pass view normal and ior then we go out and and basically now our node kind of works i know it seems weird that it will work but i just you gotta you gotta trust me for that we're gonna have to take a bit of a leap of faith for a little bit so to get the view we're gonna go here and then we can just do literally view view direction is what we need and it's this one and we want it to be in world coordinates now the b direction uh is important to normalize it so you want to normalize it normalize it basically just changing any vector into a vector of unit one and that's important for a lot of operations so you should do it here so we normalize that then we want the normal over here so right click create node we look for normal and this is a normal vector and same story we over here grab this one and we do another normalize um now a lot of the times meshes already come with normalized normals they normalize normals but not always so you know it's safer to to do it and last but not least for our index of reflection we're going to create a little floats over here i'm going to create this one ior the indoor reflection will be a float and then you should change it to a slider i found that a range that works well for me is minus 0.25 to 1. that's a good range you'll see that it flips it in in the max but we'll check that in a moment i'll drop the ir over here uh the default we put right now is zero which at zero will do nothing so maybe let's change it to like a minus point 15 just so that we can see something happening uh once we did that we actually if you look at the inputs that we're putting here the b direction is in world the normal vector is in world but our coordinates for this stuff for the the texture of the opaque those are flat uh coordinates that are on like our screen so we actually need to convert this coordinates into from world space into tangent space so for that we grab this and then we look for transform and transform can actually give you like a lot of variations for example here we want to go from world coordinates to tangent coordinates and the type we already know you can see it here view direction and normal vector is also a direction so we're going to change this type to direction so let me move this a little bit further up here we have our ad here so we can just drag it in and save and let's see how it looks uh so you can see in the preview basically now each one of the faces deforms differently like there you were seeing this little chest um now this here is actually this chest but as you can see it's kind of compressed and that's sort of the effects that you get from the refract and the reason that each phase looks different is because each face has a different normal vector right so this normal vector would be pointing like out into the screen this one would point to the side this will point it to the side and because those are different you end up with different results and it gives you that sort of crystal look and now here we can actually tweak this uh index of reflection this will be how strong the the index is so for example if we go back to zero you see it's flat you know nothing is changing if we start changing it slowly you can see it start going stronger and stronger and stronger and stronger and if we go up you'll start to see that at certain point it kind of starts to flip it you know there was like a little bit of an inversion there and it can go pretty crazy as you can see now this goes pretty insane um i generally like to keep it in kind of low-ish values and i generally prefer the negative values but you know you can experiment with um what works best for your project so this is kind of nice because you're seeing this one here so and this one here this kind of gives you a very nice side to side so as i was saying earlier basically the reason it deforms different between them is because of their normal vectors so if we put something that only has one normal vector such as a plane uh the effect doesn't do that well so let's do that now so as you can see now the plane is kind of splitting the room but it doesn't look particularly special because all across its surface since the normal is the same the deformation that does is exactly the same all across so for that what we can actually use is instead of only using the normal vector we can also use the normal texture so back in our shader we can define over here create node and then we do a sample texture 2d we're going to change it from default into normal and then over here we open and we say texture this is a texture asset and then uh convert to property and we can call this normal and then here we can change the mode into normal map so that we know that it is a normal map and also we're going to want to influence how strong it is so let's also add a little float here let's call it a normal strength and i like changing anything that i make a strength i generally make it a slider and i just go from zero to one and then here we're just gonna grab this bad boy we're gonna multiply it and we're gonna need one more add so let's go add and instead of connecting this here we're actually gonna connect this here and then this one goes here so you can see nothing much has happened because this right now is empty and the normal strength is zero so if we go and select here for example this a lunar texture that's a normal you don't see anything as soon as we start increasing the strength of this you can see now the normal map of this starts deforming and you can get some pretty cool effects now for for this wall obviously you know that was pretty strong but you know up to you how what look you're going for so as you can see you can get very different effects with the normals and again you can go as strong or as soft as you want with them i think that gives a pretty nice effect and this is basically this helps so that flat surfaces don't look exactly the same but this also really helps the crystal so let's go back to that one so you can see now with the effect of the normal you can get some pretty crazy effects it can get kind of noisy when you see it there but you know this looks really nice i think this looks kind of like a kind of almost a little bit like frosted glass so that's about it as you saw it's a pretty cool effect it's not very hard to do and you can use it for all sorts of things you know uh glass like i was saying you know those sorts of crystals you can use it a lot of times for like uh a barrier i've done it for like magical buyers and stuff like that it looks pretty cool and you can make many variations by using things like i showed you with the normal you also don't have to use exactly a normal map you can also use a black and white texture and then just turn that there's a note in shadow graph that you can turn a height map into a normal map so you can use that to derive from there you can use noise you can all sorts of things um so you know try it out play around with it and see what you come up with i hope you enjoyed this tutorial if you liked it don't forget to like and subscribe and all the stuff leave me a comment a little hi tell me how you're doing what are your christmas plans okay maybe don't tell me about that um and if you ever want to see for me i stream on twitch on mondays wednesdays and saturdays i'll be there this was recorded right there i hope to see you there hope you have a great time take care yourselves adios [Music] well thanks for stopping by don't forget to like subscribe and hit the bell to be notified when new videos come out thanks for watching

Channel: PabloMakes

Views: 9,739

Keywords: game, videogame, gamedev, tutorial, unity, shader, urp, shadergraph, graph, hdrp, refraction

Id: tIW2zM6ed8o

Length: 16min 46sec (1006 seconds)

Published: Sat Dec 04 2021