Creating Water

This week I tried to make a stylized water that looks decent, and matches the character's cartoony style. 

I think, overall, it looks alright! for being the hacky mess that it is...
So how is it done?
Basically there are three layers, a surface layer (which still needs some work) a "Deep" layer, and a decal for the Caustics on the ocean floor.

Let's start top down. The top layer is the water's surface and there's not much to it really, but it's still probably the most important of the three.

This layer is just a plane with a material on it. Its main component is  just two colors blended on a  depth fade. So the further away from something the material is  the bluer the tint becomes. 

 The depth fade is pretty common for water material tutorials  and if you have beaches, you should probably fade out the opacity on the edges as well. 
I opted not to and instead make the edges even MORE noticeable with a white border.

This white edge is probably why you've read this far as it's a pretty sought after  look for cell-shaded and stylized games.
It's pretty easy to do, and is just the second two boxes in the image above. It took me FOREVER to figure out, but alas it's as simple as a "Distance to Nearest Surface" node. My scalar parameter "FoamSpread" determines how wide the foam edge will be from another surface.

The result is fantastic, and it works dynamically, creating foam around the boats as they travel through the water!

The next step is a deep water coloration, because even in the image above, you can see my skybox where there is no sand below, so it needed to be fixed. 

My solution was to add another plane 100 units below and add a depth fade similar to the previous material.

The only difference here is that there  is a depth fade added to the opacity as well, so that at a certain depth, the ocean becomes 100% opaque. 

The two effects  end up looking good together and the illusion that the water fades into the depths seems to work. If you're doing this yourself, you might as well put the two effects in the same material. I might too in the future. 

The only reason why I did it in 2 layers was because I have a separate Nav-Mesh under the surface of the water that the boats can "walk" on while overlapping the water's surface.

The last part to make the water look like water are the caustics. What does that mean? I didn't know either but now I do. It's the light refractions on the bottom of the sea or a pool that have a  moving pattern. 

This managed to be the most complex graph of all my materials but probably because I followed a tutorial that was pretty in-depth. I know you can't read the nodes in that image so feel free to follow Dean Ashford's Tutorial here to get the same result that I did.

The material is added to a  Deferred Decal volume instead of a plane, covering the entire underwater architecture. This also renders dynamically which is fantastic for adding anything under the water that will move, as it will still cast this effect on it.

Putting all three effects together results in a decent looking water! 

Colors may be a bit strong, and it's not perfect, but it's good enough for a first pass. 

Now to figure out how to make things sink slowly...