The Ultimate Water Caustics Shader

hey everybody welcome to another video I just wanted to show you something really cool I've been working on and hopefully you can use it in your projects uh so essentially what we have here is a water caustic Shader but what makes it really special is that it uses volumetric Textures in order to um seamlessly blend around objects and also it enables it to react to the sunlight Direction so you can see here as I change the time of day depending on the angle of the Sun the caustics react accordingly and they also only show up on surfaces that are angled in such a way that they could be hit by the Sun it also makes it so that uh you effectively get basically no visible tiling here you can see if we get down below caustics are reacting to the surface normals of the objects and showing at the top but not on the bottom side and that again changes with the angle of the Sun so you can see as the sun moves so does the angle that the caustics will be displayed on so first thing is probably to answer the question as to why volumetric textures so if we go over here got a couple of different setups on the left is a standard flip book and what you'll notice is that doesn't matter what angle the animation is playing from you get the same look on all sides you know you might get this through triplanar mapping or something along that line where the effect looks the same from all directions which isn't very convincing here on the right you have another really common way of handling caustics which is to rather than using a flip book just pan some UVS maybe do some distortions with normal Maps but again not very convincing and has all the same problems uh just a different way of achieving an animation here in the middle is the volumetric texture and the advantage here is that you can essentially get an animation just like with a flip book by panning through the Z dimension of your texture and it will seamlessly blend on all sides so let's go back over here and well actually let's take a look at this so this is the same setup with a single layer water material I will heavily simplified version just one thing I wanted to mention um about single layer water so single layer water materials don't have the ability to sample World normals directly you can derive the normals we might talk more about that later but you do get a faceted look so you can see here is it is the normal Blends the caustics out on the other underside of the sphere it's not a smooth transition so if you are using this with a single layer of water material I would suggest maybe using a decal so here on the right hand side I've got a decal with a just kind of a uvw grid on it but you can see that it is able to pick up the pixel normals so you know one way you could rather than applying the the caustic effect to the water material like I have over here with the um translucent Shader with a single layer water material you might want to do that in a decal or in a post-processing or something ultimately this effect can be achieved in decals post-processing and on the surface Shader so it's really flexible and you can do whatever is appropriate for your project here so in this example here this is on the surface Shader the consideration there is that with that as you pass into the you know through the surface you will not see the effect because it's actually on the surface itself so you might need to um you know add a post process or decal for when you're under water or you know it would be appropriate for Content where you're viewing it from above and not actually going into the water whereas when you're using the decal method if I go into this single layer water here you can see that the the decal is still there so um a couple of other notes surface Shader when you're looking at Reflections such as in Lumen here that's isn't going to be picked up because it is on the reflection whereas if you have a decal so say for example I move a decal in here you can see that as long as a screen Trace can be made the decal will be picked up by Reflections so if that's important to you you can get reflections of your caustics but doesn't seem like that's particularly necessary but it is screen space so if um as I move the decal off the screen you can see that it disappears from the reflection so it's not without its flaws but it's one way of handling things so how does this actually work and it's fairly simple but you can make it pretty complicated so here for example is a volume material for caustics and you can see it's kind of this wispy Smoky look right and so each slice of this is essentially what's being projected against the ground of the texture or the walls or whatever but when you're looking at a ground surface for example when the sun's at a high angle you're primarily looking at a slice from this direction and then when you're looking at the walls you're primarily looking at slices in this direction so let me hop over here so here's a post process material and you can see that essentially what we've got here is an absolute World position node and that is going into our texture sample just divided it here for the purpose of scaling it and that is being pumped out into the emissive and essentially what this is doing is it's just saying all right well here's the world position sample the texture and then display it all right so it's really really simple at its core and that's the same basic concept that we are doing in all of the versions but where things get complicated is when you want to start adding special effects like for example having it change based off of the angle of the Sun so if we go over to the actual material so here's the one that is on display here there's quite a lot going on but when you are sampling a translucent material or a single layer water material this is going to be key so I'm just going to go ahead and hop over to a new material and we'll talk a little bit about this so this is not necessary for a post process volume but you will need it for transparent surfaces so essentially what this is going to do is create World positions behind the surface of the water and the way it's going to do that is by essentially looking at the depth and multiplying it by the world position it's a fairly well known technique there's actually a pre-built node that does this but it's really pretty simple so you can see that when we take the output of this we essentially get a world space UV so we can just take that and just like in a post process volume that I showed you earlier we can take World position and use it to sample a volume texture so we this looks probably we're back in that divide you really do need something to scale this by most of the time but it depends obviously on how you're stuff is authored so so here we can see we've got a texture going on and so I'm just going to go ahead and throw this material on oops on my uh mesh here like this see alrighty we've got something going on right so we have the basic idea working here along the sides we've got our volume stretching how long it's vertical axis and on the surfaces from above we are seeing it projected from the top and you can um you can scale this in three dimensions so you can divide let's convert this to a parameter for example and say maybe if we want 100 100 and maybe only say for example 50 in Z and now we've scaled that right so we can you can actually control that so let's go with um 30. and then let's also go ahead and tone down the strength of this as it's kind of overwhelming all right so we're off to a good start um so you can see that it's projecting down on top of the surface which is cool so the next thing that we can do is talk about uh I would say the the sun angle right so in this here what we're doing is we've got our atmosphere sunlight vector and we've got our scene texture World normal and we are taking the dot product we take a look at this see here that as I remove the sun around we get the dot product and we can use that as a mask so let's um use that to lurp between our final output here and nothing so let me do that Let's see we have our caustics out being canceled out by the Shadows not perfect in the sense that if for example I put this on on this side right and realistically you would get shadowing part here and depending on how deep the water is but obviously it doesn't actually have access to the shadow information but we can at least block out walls that would not realistically have as much caustics on it from receiving and you can control this effect right so you might not want it to be this strong you can let the light bleed over the um over the slope a little bit more and get some caustics kind of running down the back side but I think this is good for our purpose here all right so we are just taking a scene texture and then we go we grab the world normal this is again where you're going to have a hard time with a single layer water because single air water does not have access to the world normal but it does have access to a sampler let's see called World normal behind water um but again just like I mentioned earlier this is going to give you this faceted look it's not going to be a smooth normal so you might not want to handle it in that specific way but it it works okay especially again if you are looking at the water primarily from above and because of that you aren't really you aren't really going to see the back side of objects where that masking is happening all that much but you know just something to think about so the next thing we should probably do is maybe um scale or not scale but rather pan this in the Z Dimension like I mentioned so we can simply go in throw in an ADD we're going to make low three scrab time just now do that we go ahead and apply that What's Happening Here is you can see in the Z Dimension it's scrolling um and that's causing it to be animated on our our water floor but on the um the side we get this kind of weird looking uh effect there because it's not moving at all right um so what you probably want to do is also pan our X and Y slightly and let's maybe do it by a lower amount than our Z we don't want to correct that be even less and now we essentially have things looking a lot like what we want but as you can see in this current form there it is a decent amount of tiling part of that's because of the um the scale that I've got here if I were to add that up we would see less tiling um that's not so bad right now what I did here in this version is I also modulated that Z position by a noise texture so that as it pans across here it's not the same Z position across the whole span which added even more variation to it so that's one option that you can do and that's just again A texture sample that's going into the Z panning here or the C the Z offset and you know you just control how strong you want that to be and so on and let's see another really big piece of the Shader again is getting it to rotate to face the angle of the Sun so if we go ahead and erase this and talk about it for a minute what we have here is a rotate about axis node which is going to take a world position which we have right here right and so you take that world position and you rotate it around a pivot point which spear Sun actor so what we have going on here is the atmosphere of sun Vector is going to be pointing in let's see if I can it's um it's off in the corner all right well any case uh we'll use this as an example right so we have the atmosphere Sun vector and if it's pointing straight up right if it's pointing in that direction and if we just rotate it around our atmosphere vector we would spin our caustics around in a circle which isn't really what we want to do right we want to rotate it along the angle that's perpendicular to the sunlight vector so what we're going to do in order to get that is we'll take our sunlight vector and I've just found it in a lot of places that's it's backwards so I'm multiplying it by 1 1 negative one to flip the vector around and then we're going to take the cross product of the um the upward facing normal and what this is going to do is it's going to give us a vector that is perpendicular both to the upward facing normal and our sunlight vector and that will give us because the because the only vectors that are perpendicular to the upward facing normal are in this case planar to the ground when we take our perpendicular when we go to find a vector that's perpendicular to our sunlight Vector it must also be planar to the ground which will get us rotating around the um the horizontal perpendicular Vector of the the sunlight right so we take that as a cross product in order to find that we'll normalize it for good measure and put it into the rotation axis for the rotation angle if I just um Maybe just go ahead and add this in and then we'll add a scalar here for the rotation angle you'll see is fit as I move the scalar we are rotating all right so as I go to 0.5 it's now perpendicular or excuse me it's now rotated all the way around at 0.25 so 0.25 it is perpendicular so now the the ground is receiving the the side edge and the walls are getting the face right so uh basically I guess what I'm getting at is 0.25 is our 180 degree rotation point so what that tells us we need to do is when we are finding our angle we're finding the angle between the sunlight vector and again our our blue Vector our upward facing normal we get the dot product and if 0.25 is going to be our 180 degrees we're going to add one to remap that into 0 to 1 space instead of excuse me um we're going to add one to the the normal so it's not going to be in any negative space and then we're going to divide that by 4 and map that into our rotation angle and so what that'll give us now is as our sun gets to the 180 degree angle we are going to get that 0.25 output that we saw and this will allow us to get the rotation so you can really see what's going on here without all the extra effects so this is probably the coolest thing in the Shader that I think really sets it apart you know once you combine this with the normal masking um you know based off of the pixel normals to get that that fall off here on the edge this is the majority of the work done so the next thing that we can talk about is oh and also just pivot Points zero on that next thing we can talk about is the um let's do this stuff here Sun angle and the water line right so as it currently stands um this caustics effect is going right up to the edge of our water and in fact if we get down below see it's actually even projecting It Up Above So if this was um if we had a something above the water like this you know they shouldn't be getting a projection but it does that's because this is just projecting it everywhere in the world in fact if you can look out over here you can see it's being projected everywhere when you're dealing with with water this isn't an issue because you're only ever going to expect to see the caustics down through the areas that it's projecting onto so you're not going to get this kind of a fish tank situation in most practical applications so um oh and uh just other another side note here this particular caustics texture is um is in the engine content if you activate the water plug-in so you can make your own there's a caustics generator that you can use to create them but there's actually a pretty good one if you activate that plug-in the this one here is in the base engine without the plug-in but it is not tiling it looks okay for testing purposes so if you don't want to activate the plugin and you just want something to test this with then you can find the existing volume texture flip book and any any tiling flip book or any flip book caustic can be converted into a volume texture you just create a new volume texture by uh going here and then say volume texture and then you select the texture asset and choose the um you know the tile sizes and so flip books are going to have the exact same composition essentially as a volume texture so they're uh you know you can use those already authored assets to convert them into uh usable caust sticks so going back to this here we are masking caustics at low Sun angles so what this is doing is it's just saying you know again from that same dot product it's going to take subtraction from it so as the sun gets you know kind of to these extreme angles the effect doesn't really look that good anymore right because realistically if the sun was on the horizon it's not going to be able to refract much of that walk that light down into the water and definitely not at these angles so we can essentially use that to lurp out our perspective right so if we just grab this again going to grab that dot product and the sun angle fade parameter here I have I have just um controls how much uh that subtracts right so that's the value that I found works pretty well as you can see here it gets rid of it and as I change that parameter it will control how much sun is getting through at that angle and as I change the angle here it will darken it so you can see that happening so what I typically would do here is find kind of a the point where I would expect it to start fading out and then find a level that more or less gets rid of it at that point so I know that as it gets at a lower angle than that it's going to be gone and I found that 1.3 negative 1.3 works well for this so we can see that going on there so next here is the water line as I mentioned so essentially what we need to do is go back to our World position so again this is our world position so we're going to grab that and we're going to mask the the Z component or B and then from there we are going to Let's save here so we can see it you can see what's happening here is we have a control of this point which is just subtracting from the mask of our world position so you know ads um at whatever value you want that to fade in you can do that and then uh the division here control the range of the effect and there's a lot of different ways that you can control this uh so something that works for you in fact this doesn't seem to be working like I intended right now but that's okay in any case what we're going to do is use this as yet another lerp foreign if we go ahead and apply this you can see that we are not getting any uh emission above the water line anymore control that fade so you can customize those controls to your liking but that's the basic idea is just to um you know get a bit of a fade from the top of the water and you can play with that to find levels that you like the next thing here is this is just the normal map to make the water animation so that's nothing special just taking two um two normals and panning them in opposite directions here's some refraction we'll talk more about that later um then you know we have the opacity values the watercolor so you know with uh with standard translucent materials you're gonna generally you know choose a a base color that you like and set an opacity and again this is a this is a translucent material here so and and we probably need to increase the strength of our fact here so we can still see it but now let's keep it a level ladder for the purpose of this so um that pretty much covers all the basics of the effect right you want to have some masks to control where it shows up where it doesn't so it's not projecting everywhere I can have it fall off by depth um oh it's a sign up for single layer water if you are working on single air water instead of seam depth we'll need seam depth without water which does the same thing but um it will allow you to get the depth behind the surface like we see here on the single air water version so a minor difference but yeah so that's pretty much all the important stuff um and going back to refraction one important thing to note here is if we go ahead and just throw this on and this is just a um C diff one thing I wanted to bring up is that whenever you're using refraction with anything that is hempling scene UVS the scene UVS are not distorted so you can see here that the refraction is actually not distorting the depth sample so we we have this this silhouette that doesn't line up in the higher your index of refraction is the you know the worst this misalignment is going to be if you keep your refraction at same values and use it responsibly here you can see that it doesn't really even it's not really visible I don't think anybody would even notice if there's enough demand I can make a video that covers how to uh how to build in refraction to manually refract your scene UVS so that this will get seamless in response to refraction or just any time you need to sample depth you can refract it and get it to match what the engine is doing with its native refraction it's not it's not particularly easy or cheap but if there's enough demand for it then I could set something up like that so yeah I think that just about covers it outside of that you would uh to set up your water material like normal right so uh set up your normal Maps your your color if you're using single layer water if we bring up single layered water set up your scattering and absorption um you know you can see this it's all fundamentally the same thing here you can see see depth with water so there's two ways you can handle it again there's the normal behind water node here that is going to give you pretty good results that's what this is using right here and you can also take your DDX and your and so if I pull this up you can see it's quite a bit going on here but nothing crazy it's just um taking multiple samples and uh comparing them but another option we can do is take our DDX and ddy of our world position take our cross product and normalize it and that will get us normals as well but they are not going to be quite as high quality but we can still the effect does work so that's a cheap easy way to get normals behind your single layer water if you need to uh yeah I think that's really all there is to it um if you have any comments anything that you want to add um any uh meet criticisms again let me know if you want to see more about how to compensate for refraction I just throw it down in the comments and hopefully you find this useful thanks so much for watching

Channel: Alex

Views: 3,357

Keywords: unreal engine, caustics, water, shader, material, tech art, UE5

Id: H3wj09E7ejg

Length: 36min 9sec (2169 seconds)

Published: Sun Dec 04 2022