Glass Shader - Advanced Materials - Episode 16

today we're going to create a glass Shader in unreal and unity let's go all right so here we are in unity we're going to create our glass Shader in unity first today and then we'll switch over to Unreal and create one there as well so uh to create a glass Shader um we need to imitate a couple of properties of real glass we need to imitate uh transparency refraction and reflection so let's go ahead and create a new Shader graph Shader here I'm going to pick create which Shader graph hdrp lit Shader graph and we're just going to call this glass and I'll open up our glass Shader and let's go ahead and get started so before we get too far into making this Shader I'm just going to open up the Shader itself down here I'm going to grab the material and assign it to our plane here so that we can watch our progress in the scene as we create our Shader so let's go ahead and pull this up we're just going to create our Shader in this little window here and watch what watch what's happening in our scene here as we build it so the first thing that we need to do is pick surface options here and here we've got surface type opaque and obviously obviously we know that glass is transparent so we're going to set this to transparent and then we're going to scroll down here and there's this setting called transparent depth pre-pass now this is something that you're going to want to turn on if you notice that there are sorting issues with your glass or in other words if things that are supposed to be behind are showing up as front you could turn on transparent depth pre-pass to help solve that all right then I'm going to scroll down just a little bit more and we're going to set our refraction model from none to planar the first type of glass that we're going to focus on today is uh just a a flat plane here which is what we've got on this one and then I'll show you what it takes to create a glass Shader on a sphere as well but we're just going to focus on the plane to begin with all right so then we've got the master stack of our Shader and it's kind of easy to create a glass Shader in unity because you can just make changes to the master stack now obviously if you want some parts of the the plane to be glass and some parts to be some other kind of material you're going to want to add texture maps and that sort of thing here but we're not going to do that today we're just going to make this whole plane into glass so uh the first thing that we're going to do is set our base color to white and we'll just leave it at White for now and then let's take a look at this Alpha value so Alpha starts out with a value of 1 which means it's completely opaque but if we set it to zero we can control the transparency of our Shader so let's go ahead and save that and see what happens here on our model all right so right away you can see that now I've got this kind of frosted glass look so I've set my Alpha to zero which means it's completely transparent and what I'm seeing through the the back of the Shader is a scene that's frosted and you might be asking well why is it all blurry like that and the answer is this smoothness value right here so I've got my smoothness defaulting to 0.5 and that means the surface of my glass on a microscopic level is rough and that roughness is blurring uh what's happening in the background so here in unity it's really easy to get this uh sort of blurry looking frosted glass look simply by adjusting the smoothness uh now if I were using a regular pane of glass like this you know most glasses not completely transfer uh frosted like this and so I what I need to do is increase this smoothness so if we make the glass A little bit smoother yeah now you can see that through the glass uh the scene is a bit sharper all right the next uh setting that we're going to look at is this index of refraction value here and that controls how much refraction is being applied to my glass or in other words how much the light is being bent when it hits the surface right now my index of refraction is one and what that means is the light just travels straight through it without getting bent at all I happen to know the index of refraction value for glass is 1.5 so let's go ahead and set that and now the the light is being bent as it passes through the glass you can especially see it here on the edge the The Edge doesn't really line up right here with what's behind it and that's because there's some refraction going on you can also see it if I rotate my plane of glass around can you see how it's kind of warping the scene behind it that's because uh refraction is bending the light as it passes through and it's making you know it's making what we see behind it get Warped by that refraction effect so that's pretty cool all right the next thing that we need to do is uh get a little bit of reflection going on on our glass here and you can see some reflection maybe on the glancing angles right now I'm just not seeing much reflection at all on this glass and in unity what I can do to get reflection on my glass is use this metallic setting so when I set metallic to one and now what I'm getting on the glass is a hundred percent reflection it's reflecting completely and I'm not actually getting any refraction at all so you can see I can't see this uh this sphere here through the back of my glass because when I set metallic to one I get a hundred percent Reflections on my plane but no refraction and so I can kind of use the value of this metallic input to strike a nice balance between reflection and refraction so if I want my plane to be mostly reflective I can set the metallic to to a high value but if I want it to be mostly transparent I can set my plane or to the metallic value to something a little bit lower let's just set this to something like 0.65 all right and now you can see I'm getting reflection and refraction this this line here is uh showing where it's reflecting the scene behind it but I also see uh the scene in front of it as well so I've got a nice balance here between reflection and refraction and I did that using this metallic value okay let's see what else we can do if I want to change the The Tint of the glass you know some glasses is ha has you know sort of a slight green tint here I can use this value called transmittance color I'm just going to turn it uh just turn it down just a little bit and we'll save that and see what happens here okay now you can see that my glass has kind of a dark tint to it um you know if you wanted to have some dark tinted car windows or something you could turn the transmittance color down what I really want to do is give it just a slight green tin so I'm going to turn this up and maybe put my Hue somewhere like right here so I've got just a little bit of a green tint to it and I'll save yeah there we go so now you can see that the glass is tinting uh what's behind it just ever so slightly green uh like real glass might do okay and there's one last effect that I want to do so I'm going to scoot my master stack over here if I want to make my glass uh just kind of slightly textured I can add a sampler 2D node here and I'm going to set this sampler 2D to um to normal so I'm going to be sampling a normal map and then I'm going to grab the concrete rough normal map and apply that and I think that the result of this is going to be just a little bit too rough and so I'll grab a normal strength node and I'm going to turn this strength of the normal map down to like 0.1 just so it's giving me just some really subtle normals and I'll plug that in and save it so what I had before before I plugged in the normal was really good for you know nice smooth glass but now I've given my glass kind of a rough surface and if I zoom in here you can see what that normal map is doing it kind of breaks up the refract reflection and refraction and makes the surface of the glass just a little bit bumpy all right that's cool so what I've got right here is really nice for a flat glass plane but what if I want to apply the glass effect to a sphere let's go ahead and try that so I'm going to come back down here to my glass material I have a sphere over here and I'll apply the glass material to it and now you can see I've got this material applied to the sphere let's just go ahead and disconnect the normal map so it's a little bit easier to see what's going on so just delete the normal map there and save the glass again okay as I'm moving around you can see through the sphere and it's doing a little bit of refraction but what it really looks like is that the sphere is super thin and the inside is hollow so it's not really refracting like a lens wood like thick glass wood and so in order to achieve that what I need to do is come over here to my graph inspector again and scroll down and instead of picking the refraction model planar I need to set this refraction model to sphere so now when I save it we're going to see is something really interesting with the refraction effect okay so I'll look at these I look at these little spheres here behind behind my object and what you can see is that they're upside down what's happening here is that my sphere is acting as a lens because it's a really thick piece of glass the light is getting bent once as it goes in and then again as it comes out and it's actually flipping the scene upside down and this is a pretty cool looking effect you know obviously it's not working correctly for my flat plane anymore but if I do have a thicker object that's not hollow inside I'm going to want to use this reflect refraction model set to sphere so that I can get correct looking refractions for glass that's thicker and not flat like the plane all right so that is how you make a glass Shader in unity you can get some good looking results uh for thick Looking Glass on non-flat objects and if I set this back to planer you can get some pretty cool looking effects on flat glass as well with refraction such and I really like this effect here where I can turn smoothness down uh to something like let's say 0.3 and it's really easy with that smoothness control to get uh just really beautiful looking frosted glass all right so there you go a nice frosted glass in the unity engine let's switch over to Unreal and we'll take a look at glass there as well all right here we are in unreal and we'll go ahead and create a new material here I'm just going to scroll down here to the bottom right click and pick material and we'll call this material glass and I'll double click it we'll open up and start working so I'm going to put this material just right over here on this side of the screen and we'll zoom in here so it's a little bit easier to see and I also need to so here's the plane that I'm working on in my scene here I also need to apply my glass material to that so I'm just going to drag it and drop it into the scene and you can see that it just shows up as the default checkerboard because we haven't actually started working on it yet so the first thing that we need to do is come over here to the blend mode and it says opaque and we're going to pick translucent now if you want to create a cheap version of the glass you could also create or set it to additive or modulate and that would make some really cheap glass but there are some features that are missing from those like refraction for example so in our case we're going to set it to be translucent now this version is going to be just a little bit more expensive but we actually will get the look that we're we're going for so I need to come down here also and set my lighting mode to surface translucency volume and now I'm ready to get started so I'm just going to kind of move this over and now the first thing that I want to do is hold down one and click to give myself a value here and I'm going to plug this into opacity so now if I save this you'll see that that opacity value of 0 is going to give me a nice transparent surface to work with uh so there's my transparent surface now maybe Zero's a little bit too transparent because it's like completely see-through and so maybe I'm going to set this to something more like 0.35 uh just to give myself uh just slightly less transparency so that we can actually see the glass all right so now there's just like a little bit of tint to it that the glass is doing [Music] uh the next thing that we need is just a little bit of reflection so I'm going to hold down one again and click and that's given us this value here that I can plug into specular now generally generally the value of specular goes between zero and one but I'm going to set it to 10 in this case there's not a lot that it's doing above one but it will push it especially on the edges so that there's a little bit more reflection okay the next thing that I want to do is control the refraction and that's done right here with this input so I can input my index of refraction here so again I'm going to hold down one and click and I want to give it an index refraction of 1.5 which is the the ior of glass so I'll go ahead and plug this in and hit save and the index of refraction or the refraction input here Works a little bit differently in unreal you can see that there's like this huge amount of warp so this sphere here is actually showing up here as getting refracted so this this refraction value like I said Works quite a bit differently and unreal than it does in unity it's a little bit harder to control so in order to kind of get a handle on it what I'm going to do here is add a fresnel node and we're going to use this fresnel node to blend between a refraction value of 1 and a reflection a fraction value of 1.5 so let me just add uh linear interpolate so there's my lerp now plug my fresnel into the alpha of my lerp then I'm going to give myself a value of one here we'll plug the 1 into the a of the lerp and for our 1.5 refraction we'll plug that into B so now what I'm doing is based on the angle of uh this lerp value um it's going to blend between uh a refraction value of one kind of when I'm looking straight at the glass and a value of 1.5 when the glass is kind of on edge right now there's just like too much refraction going on so I'm gonna set my uh fresnel exponent to like a value of 10 and then my base reflection I'll set that to zero and we'll save this all right now you can see that the uh refraction is toned down quite a bit so I'm not getting a whole lot of refraction when I'm looking straight through the glass but then on the edge that's where I'm going to get some refraction so actually I'm going to turn this exponent down to maybe five instead just to give me a little bit more all right so as we rotate around you can see it's refracting there it's not refracting here now it's refracting there so you get more refraction on the edge and not as much when you're looking straight through it that's a kind of a cool effect I like that I like what that's doing so we're going to go ahead and keep that oh one thing that I forgot to do we need to set our roughness I'm going to plug our roughness value in here we'll just set it to zero and see what we get I think this is going to give us a little bit more of the reflections that we've been missing yeah I can see some refresh reflection there now as we move it around you can kind of see this silhouette Edge that's moving that's the reflection and we're getting reflection on that now that our roughness is a little bit lower if I set it to maybe 0.05 maybe our reflection will be slightly blurry yeah there we go all right so I'm getting reflection and then as I kind of go edge on I'm getting some refraction cool so that is how you create glass in unreal now in unity we used the smoothness value to to get uh frosted glass but in unreal I have roughness and if I turn the roughness up like let's say 0.8 just like real eye roughness uh this will blur out my Reflections but it's not going to give me um it's not going to give me the frosted glass of having blurry transparent or you know blurring what's behind it it's a little bit harder to get this effect in unreal it is possible and so let me show you how to do that here um what I'm going to do is add a new node in here called uh let's see scene there it is spiral blur scene texture and what this node does is it samples the screen so it renders a screen and then samples that but it samples it a whole bunch of times in different locations and averages them together so it's basically blurring the scene behind it so hold down one again and give myself another constant and this value is distance so this is going to control how much blur I'm getting and just for now I'm going to set this to 0.1 and then I can control the quality with distance steps and Radial steps so by default my distance steps is set to 16. which means it's making 16 samples and my radial steps are set to eight before we get too far into these quality settings let's go ahead I want I just want to show you what it looks like by default so I'm going to plug this result output here into my emissive color and I'm going to plug the scene color clamp to zero into my opacity and we'll go ahead and save this and I'll move it out of the way and now you can see that I'm getting the frosted glass of looks the frosted glass look it looks kind of like I'm looking at my scene through a shower door or something it's a pretty nice effect but the thing that I'm seeing here is that it looks just a little bit blocky or chunky I'm not sure if you can see that uh through the YouTube compression but the quality is just like not as nice as it could be and that's because there's kind of a low number of samples that are happening here in order to create that blur there's a little bit of ghosting happening uh and I can see like a little bit of grid lines going on so in order to fix that what I can do is I can turn up the number of samples that I'm doing of the scene texture here and so let's say we set this to and this is going to be crazy expensive so you probably don't want to do this but I'm going to set this to 64 and I'm going to turn up the radial steps to something like 32. you'll want to play around with it yourself to get the right balance here between quality and performance but when I've got these set really high now you can see those those artifacts go away and I've got a really nice smooth result here with a whole bunch of samples happening now one thing you may have noticed is that when the glass hits the edge of the screen like this I get some kind of odd things going on down here at the bottom and this happens in the editor view but it does not happen in a built uh project that you're that you're actually doing that you run uh kind of like Standalone so this is an artifact that looks kind of gross in the editor but that goes away uh once you build your game all right so you can get nice smooth uh blurry uh frosted glass results using this node here called spiral blur scene texture and again you plug the result into emissive and the scene color clamp to zero into opacity then you can control how blurry it is using the distance and you can control the quality of the blur here using the distance steps and the radial steps defaulting again to 16 and 8. if I want to blur it just like a little bit I can turn this down to maybe 0.02 and we'll save this and take a look again now you can see that it's just doing like a really subtle blur I could turn it down even less let's do like 0.005 yeah there we go so uh the lower this value is the more subtle uh effect you're going to get on that frosted glass the other thing that I want to do is go ahead and turn my roughness back down to zero so that we're getting some nice reflections and there you go I've got some pretty nice looking glass in unreal let's go ahead and save this or let's go ahead and apply this same effect to our sphere here and you can see now I've got the glass on the sphere it doesn't do the same thing that it did in unity where it's refracting and flipping it uh inside out I'm not really sure of a good way of doing uh thick glass in unreal where it simulates the the object acting as a lens and inverting the scene I'm not really sure that actually works but it looks pretty decent uh the way that it is just like this all right so there we have glass in unreal and we also took a look at glass and unity I hope you enjoyed today's tutorial let me know down in the comments if you have some questions or you have some things that you do for glass that you'd like to share I'd love to learn from you all as well so be sure to comment and come back next week for another cool tutorial on creating shaders and unreal immunity have a great week everybody [Music] thank you

Channel: Ben Cloward

Views: 15,332

Keywords: UE4, UE5, Unreal, Unreal Engine, Unity, shader, material, material editor, game development, real-time, tutorial, training, graphics, 3d, GPU, tech art, computer graphics, fundamentals, shader graph, transparent, translucent, refraction, reflection, IOR, index of refraction, thickness, transmitance

Id: wKbt6KkZkxs

Length: 25min 42sec (1542 seconds)

Published: Thu Feb 23 2023