snackodev
patreon
Dev Tutorial: Wet sandy shores
🕑 Added 2019-07-13 18:13:13 +0000 UTCHere's a super easy material in Unreal you can use for sandy shores! The concept of it can be broken down easily, since it's just math, so there's a bunch of different ways you can implement this for different purposes.
There are fancier variations of this shader for sure, but keeping in line with Snacko's art, most of our shaders are quite simple and easy to recreate.
1. Overview
This is it! No spaghetti code here, just three chunks of nodes. I'm using world aligned texture for the sand, but you don't have to. This will work with plain colours or any regular texture.
The gist of it is creating a black and white mask that swings up and down. This is stuck on a "world aligned" position, which means the position of where the black and white divide is is static, like this:
2. World Align Mask
First step is to create the black and white mask like above.
Use an Absolute World Position node to create a coordinate of the axis (XYZ). These axis are represented in the material editor (and other parts) as red, green, and blue.
- X = Red = forward and backward
- Y = Green = left and right
- Z = Blue = up and down
We're masking blue to isolate the Z axis - we only want to use the up and down direction. The "Add (, 76)" node beside it is a magic number...as in there's no correct number. Start with any figure you want, and tweak it until the height looks correct. The higher the number, the lower the black part goes. If you want the black to go above the "center" line, use a negative value.
3. Making the mask move
In some instances, having a static mask there would be fine. For example, a pond wouldn't have enough moving water to justify having the soil around it go through an animated wet-dry cycle. So, how do we get it to ebb up and down slightly to make it seem like an ocean shore?
With just a regular Sine wave and Time node plugged in, this is what it does:
It goes between a 0 and 1 value with a slight curve at each point, so it has a bit of a lilt. When we combine this with the world aligned mask we created, we can now manipulate that black and white divide value with the Sine wave to make it go up and down, like this:
But it looks a little unnatural, doesn't it? It's going up and down very small amounts, and it's very fast. We have to manipulate the Sine wave a little bit to get it at a speed and intensity that makes sense for our application.
The "Multiply(0.45)" before the sine wave is to make the time slow down, so it stretches out the wave. The "Multiply(5.5)" after the sine wave is to make the wave go up and down more. Combining both of these, you have a slower larger fluctuation.
Essentially, make the time bigger to make it faster, and multiply or divide the sine wave result to change the intensity. Of course, you can use divide as well, but multiply is easier for my brain to wrap around. Here's a cheat sheet:
- Multiplying the time before the wave by 0.X numbers give you slower waves
- Multiplying the time before the wave by numbers above 1 give you faster waves
- Multiplying the sine wave by 0.X numbers give you smaller waves
- Multiplying the sine wave by numbers above 1 give you larger waves.
Now, add the sine wave portion to the world aligned mask portion. Viola! You're moving the line!
4. Finishing it up
Once you get the movement feeling right, now it looks a bit harsh, doesn't it? Depending on your art style, you might want the line as-is, or you might want to blur it out more.
By dividing the sum of the sine wave and world align, you can control how harsh that line is. The larger the number, the more blurred out it'll be.
Note that I start out with an 8.3 value, and bring it up to a 17.8 to show how the line creates a larger gradient as the value goes up.
Remember how I mentioned this is all a mask? The result of your division of the wave and world align will now go into the alpha input of a lerp node. All this does is mask one thing (A) to white, and another thing (B) to black. You can chain a bunch of these together to make some crazy results! But for now, we only have two things we want to combine: dry (A) and wet (B) sand. The easy way for me to remember is B = black, thus the thing that's plugged into B will show up where the black is.
You can combine or delegate different textures to this lerp, but I chose to just multiply the original texture with a colour to make it slightly more saturated and darker.
Here, in this example, to clearly show how the lerp works, I chose a gross colour to make it easier to see:
Ta-da! You're all done except to tweak the colour to your liking. This can be applied in so many different ways, so just play with every single node and see what happens. That's usually the easiest way to learn what does what.
