Water Shader (want to make a toon style)

So, I want to make a water shader for a toon style overworld map. Problem is I cant seem to find any tutorials that break down how to create a water shader from scratch and what the different options are for doing so. I saw one for Winwaker for UDK, but it honestly was hard to follow. Anybody got anything?

Look here: Contributors

While this is kinda what I meant (I wasnt clear enough i guess) i want to use the unreal shader node system. I am not a coder by trade so the inhouse editor would be the most ideal answer :stuck_out_tongue:

This ended up helping alot, however it isnt as TOON as I would like. I am tweaking it now to see if I can get that look. Thanks anyway gents

Honestly it’s too vague of a question. Stylized water is done so many different ways for so many different situations. Is this for a lake, river, or ocean? What’s the art style? Do you need or want reflections? Do you have any reference images from other games or concept art? Are there going to be waves? Is there going to be gameplay from the water? Does the water need to flow in a particular direction? Are you making a beach where waves are going to be hitting the shore? Do you want to see under the water? How dynamic does the solution need to be?

I’ve made 2 completely different stylized water shaders for UDK (including a Wind Waker look), and could do the same for UE4.

Well, i mostly want the wind waker look. My only issue now is that I do not know how to get the shorlines to have the whitecaps. What I really would like to do is the following:

  • Setup a transparent system that shows the depth of the water. Deeper it is the less transparent it is (i have this in now, kinda…)
  • Setup whitecaps that spawn throughout the waves (like in wind waker)
  • Setup whitecaps near the shorlines (if it can detech when it is touching the terrain that would be ideal)
  • Setup a color option so i can make different colors of water.

Right now I have what the guy put in place and it doesnt look half bad.

Here is a picture of the current method:

Here is a picture of the issue with refraction (dont really need refraction, but i didnt know how to set it up without following his tutorial)

So, i got a few things I am trying to do. I can show you more detailed with a picture if that will help?

A lot of the water effects from Windwaker are geometry and/or billboards, so it’s really hard to copy without doing it the same way. For dynamic shore detection, that’s complicated because you would need a flow map if you want waves to go towards the shore. There’s some people that have been using distance fields to create dynamic flowmaps in UE4, but that is an expensive solution. You can also try to use vertex painting to control the direction, but that requires vertex painting by hand. Those distance field solutions also allow for having white caps that wrap around an object, just search the forums for distance field flow maps.

Setting up a color option is pretty easy, all you need is a color paramater and a material instance Instanced Materials | Unreal Engine Documentation

Well, i dont need waves as much as I just want the whitecaps that touch the shoreline. This one guy had an entire texture (landscape) that did it based off of height. I thought about doing that… but it was just so complex and had minimal info I couldnt replicate it. I also dont need dynamic shore detection because the shoreline wont change, I just need a method for getting the whitecaps to touch the shoreline. What I have right now is actually not bad, I am going to remove the normal map for the waves and make it all smooth, I just need to figure out the other ****. Maybe even get my ideas a bit more fleshed out so people like you could help me :stuck_out_tongue: Thanks again for the quick responses.

Is a great example of the type of water I would like.

Is that image from Bear’s can’t drift? If so that’s UE4, and you should try emailing/PMing the creator of the game, he’s done some break downs on the Polycount forums.

I just might, didnt want to bother him but it seems I just might have to. Thanks again for all the help.

Please update if you figure out a automatic solution that works.

I found a couple solutions here but they require some work every time you change the map. Like baking out a map for the ocean/water plane to use as a mask.

edit: Theres also this. Haven’t tried that yet but the author stopped responding and the comment following says it does not work so I can’t say how well it works.

edit 2: I’d be very interested in hearing if others have any luck. I just tried playing with this with no luck, but distant fields are something I’m not very familiar with. Simply enabling them in the project settings-> rendering does not seem to be enough for me at least.

edit 3: after playing some more with the distant field method, it seems like it should work. I’ve gotten some black splotches to appear around objects, it’s a step in the right direction and something I should be able to use for masking, hopefully someone more clever than me can figure it out faster. Otherwise I’ll just post here if I ever manage to get it working :slight_smile:

This does seem possible with distance fields and “DistanceToNearestSurface” node.

I’ve managed to use the output from that node to mask in a different normal map depending on if it’s in the “foam” area or not… however there are some things to work out.

Screenshot of the material - only applied to my water plane.

However theres a large fade-out area (marked with a blue bracket in the above screenshot) that I’d like to cut down, although it’s not that noticeable once I use actual textures instead of black/white

Blueprint for the material

I circled most of the important nodes, the others don’t really matter, I’m just using them for testing/getting more control for material instances.

I guess the lerp in the 3. circle can be skipped completely etc. The normal map I’m using is also just as a test… please ignore that :rolleyes:

I’ve got no idea how to mask it out like in that “Bears don’t drift” screenshot where it seems to apply some kind of a texture along the contour of the shore through this method though. I’ve got some ideas if you’ve got a mesh surrounding the objects (similar to the stylized UE demo in the launcher) but dynamically? no idea.

Hopefully someone could give me a tip with that.

In the learning tabs Stylized project by epic,it looks like they use a spline around the shoreline with a foam like texture on it. That is probably the way to go.

I know this is an old post but I wanted to reply anyway as I’m working on something similar.

Here’s some improvements from my last post here. A completely dynamic solution for foam around objects using flowmaps based on distance fields.

I plan on releasing it for free when I have time to finish it. Hopefully people can improve it further.

just sharing what I found

^ from: Redirecting...


from: me, and Antonio.

that looks quite good!

can I ask how it looks in the distance? i.e. in a magnitude of 100’s of meters or few kilometers

Hm, I’ll do a test tomorrow with longer meshes.

I tried it with a 1000 unit box and unfortunately the effect didn’t show up. Might be either some distance field resolution problem or one of the dozens of settings/variables I have in the material might need some tweaking. However using 10x 100 unit boxes in a row looked like this The effect can come out further from objects etc with changing some variables. They’re mostly at default in the screenshot though.

ok then it’s the same behavior I’ve been getting.
the Global Distance Field has a limited range and also varying resolution (the more distance, the less resolution it gets). after you exceed the max range it just turns black.
as such, distance fields aren’t a reliable method if you want long view distances (or if you use a long top-down camera like in an RTS)