Water Foam - UE4 Materials 101 - Episode 28

[Music] in today's tutorial we're gonna be adding some foam to our water shader foam in water happens where the water collides really quickly with itself or with other objects so there's a lot of different places we could place foam in our particular example we have some really calm water in this area and so adding foam may not be super realistic but we're gonna do it anyway just so you can see how it's done and then you can choose how you would like to add it in your particular water applications the first thing that I want to do is show you the textures that we're going to be using in this shader and I'm including them in the description if you'd like to go ahead and download the original TGA files that I'm using the first texture that I'm going to show you is our foam texture and there's something really interesting happening with this texture that I want to make sure that I help you understand this texture has three channels red green and blue and the red channel looks like this it's just some really sparse foam the green channel looks like this it's kind of like a medium thickness of foam and then the blue channel looks like this which is basically full thick foam and what we have here is basically three different amounts of foam and what this allows us to do is make the foam thick in some areas and thin in other areas by having three different densities of foam and we pack those into a single texture with a red green and blue meaning thin medium and thick foam the reason that we need three different foam masks is that foam is not something that you can evenly blend out I can't just take the full thick mask and make it darker or in other words make it more gray more towards black because foam doesn't work that way it it's dense or or more thin instead of just like ramping up with a gradient so we have to have three different masks one for thin one for medium and one for thick the other texture that I'm going to show you is a gradient and this is the gradient that we're going to use to control which of those masks to show there are three channels in this texture as well there's the red channel this controls where the foam is going to show up when it's thin so over here on the left side you can see that it starts out black but really quickly it ramps up to white and that means that the thin foam layer is going to show up for the majority of the time it only won't show up when we give it a value of zero or black all right our second channel is green and it looks like this and you can see that it's mostly black over here on the left and then it ramps up with kind of a medium velocity and then stays and then our third channel blue you can see that it's black almost the whole way and then ramps up just a bit here at the end and this controls our thick foam so our thin foam is active almost for the entire gradient our medium foam is active for about half of the gradient and then our thick foam is active just at the very top end so we can sample this texture this gradient with a value that controls how much foam to apply and the thin foam will kick in at the beginning the medium foam will kick in in the middle and then our thick foam will only contribute at the end so the value that we use the texture coordinate on the you that we use to sample this gradient will be kind of like our overall control of how much foam we're going to apply okay so these are our two textures I'm going to be using today and I'll just go ahead and turn these channels all back on so you can see what they look like all together and let's jump right into our shader and start adding and start adding what we need to create the phone the first thing that I need is a texture object and then the next thing that we need is a texture sampler and we're going to add our gradient to this texture [Music] all right so how are we going to do the movement of the foam well to do the movement we're gonna use a node that's built into unreal that's called motion 4-way chaos this is a function that comes with the engine so I'm gonna add a function here a material function call and then I'm gonna come over here to the material function and drop down where it says none and I'm gonna type four-way and you can see I get this a result called motion for weight chaos and I want to take a minute to explain what this node does I'm gonna double click it just to open up this function and we can jump in and take a look at the network so you can see here that it has an input for a texture object which we're going to be giving it in a minute and it samples that texture four times and the UVs for each of these texture samples are adjusted with these four panners and what this is doing is its sampling the texture four times where each sample is panning in one of the four different compass directions and so you have four different copies of this texture all panning across each other in different directions and what that does is it creates some motion chaos this is why it's called a motion four-way chaos because it's creating this scrolling pattern that's really hard to pick apart in your mind exactly what it's doing and that's the kind of movement we want for foam because foam in water is really chaotic it's moving in all these different directions and in reality if you take a look at real foam the the movement is much more complex than what we're going to do it does all kinds of undulating and drifting and flowing but to keep things a little bit less expensive we're going to be using this motion 4-way chaos node all right so let's jump back to our shader we've got motion 4-way chaos here and we're gonna plug our foam mask into that and now we need to add a couple of more a couple more controls here for speed we're just gonna give it a constant value of 1 and for our divisor we're gonna give it a constant value of 0.25 divisor is a little bit of a confusing term if we go back here and take a look at our function again what you can see is these four texture samples are all added together and then they're multiplied by this divisor so if we have four samples and we add the results that gives us a maximum value of four if all the samples are white for example if we then multiply by 0.25 it'll give us an average of all of our for texture samples so we're gonna do that we're gonna multiply by 0.25 for the divisor if I were to increase this value it'd give me brighter foam and if I were to decrease this value it would give me a dimmer less less bright phone all right the last thing that we need is UV coordinates and we're gonna use world position for that and then we just need the red and green of the world position so we need to create a component mask now in order to control the size of our foam I'm going to multiply by a constant value and in this case I'm gonna use a constant value of zero point zero seven zero point actually zero point zero zero seven to give me the correct scale for our foam and then I'm going to plug that right into our texture coordinate so I'm projecting this from the top down in world space okay let's take a look at our results so I'm just gonna take the results coming out of our four way chaos and plug it directly into the color of our water just so that we can see temporarily what our results are and this is gonna look a little bit crazy because our color used to be a nice blue water color but now we're replacing it with the color that represents these three channels so yeah you can see this is pretty weird-looking but you can see what our four-way motion Kaos node is doing here it's basically scrolling the foam across itself and the different colors of foam here you can see there's like red and green and blue all mixed together those are the three different layers or thicknesses of foam and we actually need to split those out so let's go ahead and do that now I'm just gonna add in a split components node so that we can expose the red green and blue channels and I'm just going to go ahead and add them together so I'll add the red to the green and then I'll add the result of that to the blue and so now instead of using RGB as color we're using RG and B as individual channels and let's take a look at what kind of a result that gives us all right so now we have a phone that looks a little bit more well it's extremely foamy right now but at least it looks a little bit more like foam because it's it's white instead of using those individual mask channels for color we're using them as masks all right so now that we've got this going we need a way of controlling where the foam is going to appear and part of that is using the gradient so let's go ahead and hook up this mask gradient that I talked about before so I'm going to take the result of the four-way motion chaos and we're going to multiply it with our gradient and so here's the result of the gradient multiplied by four-way motion chaos now you remember each of the channels of the gradient represents the different foams so the red Channel the gradient went was white almost the whole length of the gradient the green channel was white for about half the gradient and then the blue channel was white just at the very edge of the gradient that's how we want to control our phone we want to add the thin foam for most of the the range the medium foam for about half the range and then we just want the really thick foam to kick in right at the top end of the range oh and there's one more thing I need to do I need to add a saturate here since we're adding these channels together there's a possibility that our results will go above one so in order to clamp it between 0 & 1 I'm gonna add that saturate node there all right now with this gradient I've given myself a really nice way to control where the foam is applied if I take a look at water foam is gonna happen wherever the water is slamming up against something or where it's turning on itself or where it's flowing really fast so the the value that I pass in to my gradient here as my UV s is going to determine where that phone gets applied and I'm gonna let you decide how you want to handle that I'm going to show you one method and talk about some others that you could use but mostly I'm going to leave this up to you to decide where you want to put the phone there is one really important thing that I forgot to mention and I'll switch back over to my gradient here and show you what I mean I want my gradient to go from 0 to 1 but I want it to stay if I give it a value higher than 1 I want it to clamp so it's really important to change this x-axis tiling method to clamp and also the y-axis tiling method to clamp that ensures that my gradient doesn't repeat itself that's a pretty important setting to have okay in order to control where the foam goes just for now what I'm going to do is use depth and so down here in my shader I have my depth calculation and here's the value that I use to determine how much depth of fog to apply in addition to using my depth calculation for depth fog I'm also going to use it to control where the foam happens so where the water is shallow or in other words right up against the rocks that's where I'm gonna be applying the phone okay so I'm gonna take this value here where I have this one - and instead of dividing it by a hundred this is like a maximum depth of a meter I'm just gonna divide it by 20 meaning the foam will be to a maximum depth of 20 centimeters so I'm going to add a divide and then I'm gonna add a constant value of 20 and I can increase or decrease this to add more or less foam defendant depending on depth I'm going to saturate that value and add a 1 - node because I'm going from 0 to 1 instead of 1 to 0 here with my texture coordinates all right let's connect this to my UVs for my texture sample and we'll save it and take a look at the result all right so let's back up a little bit you can see that I'm just using the foam as my color right now so my water color has gone away but what I want we can see as a result here is that we're applying the foam just in the areas where the water is shallow or where it's bumping up against the rocks on the surface so that's one way to apply depth this method is pretty cool but like I said you'll probably want to use one or two additional methods to determine where foam is so if you were to paint a masks you could project your mask in world space and that mask could determine where your foam goes so you could add that value here and then you can have a top down mask where you paint it exactly where your foam was going to show up you might also do some math with your Gerstner waves and determine you know where the foam or where the waves have their peaks and put foam in that in those locations as well so like I said we're only using depth to add foam right now but there are lots of different ways that you can add foam and all of them can be added together and combined to create this you value for our gradient whatever methods you choose you can use that for the you value of the foam gradient here and it'll apply foam where where you've told it to all right so let's come down here again and we're gonna add the foam to the color that we already have so this is our nice depth gradient with our blue color values and I'm just gonna add the whiteness of our foam to that for color and we also want to make sure that our foam is opaque and so I'm gonna add I'm gonna add another add note here and come down to our opacity value and we're gonna add our phone to our opacity so that the foam is opaque well you know what actually I want to add our foam before the edge fade so that this depth fade note here is doing an edge fade and so I'm going to take the result of this and add our our foam opacity to that and then multiply our our edge fade so that we still have it if I were to add the foam after this multiply here the foam would run right into the shoreline and get rid of the results this depth fade and we want to make sure we avoid that all right let's save this and take a look at our final result all right so we've got our foam and it's now combined with our really nice blue color and we've also combined it with our opacity so that the foam is opaque on the surface and this is pretty cool looking like I said you can add additional ways if you have steeper waves you could calculate where the peaks of the waves are an add foam there or you could create your own world space projection mask and paint where the foam went lots of different ways of doing foam we're just using depth today let's go back to our shader and do a quick review and then we'll wrap up so we have our foam texture with its three different layers we're passing that into our four way motion chaos sampling that texture four times and scrolling it in all four directions projecting in world space we're using depth to determine the U coordinate for our gradient here and then we're multiplying this gradient with our for texture samples to determine the thickness of the foam whether it's whether it's sparse foam or medium foam or really dense thick foam then we're splitting up our three different layers and adding them together as masks saturating the result and then adding that to our color and to our opacity and that gives us the final results of the foam we're looking for I hope you enjoyed today's tutorial if you did hit the like button and subscribe to my channel we'll have some new tutorials coming up real soon hopefully a week from today have a great day everybody see you next time [Music]

Channel: Ben Cloward

Views: 19,596

Keywords: UE4, Unreal, Unreal Engine, shader, material, material editor, game development, real-time, tutorial, training, Unity, graphics, 3d, GPU, tech art, computer graphics, fundamentals, basics, beginning, learning, foam, water churn, ocean foam, Motion_4WayChaos, edge foam, panner

Id: oI_q5g3580I

Length: 20min 34sec (1234 seconds)

Published: Thu May 28 2020