Shore detection for water surfaces

So I haven’t had time to do that yet but it occurs to me many of you guys probably dont know about this photoshop trick to convert masks into distance fields. This has some big limitations like the spread radius is not very big, so you will want to downsize your texture if the gradient is not reaching far enough, but it works.

So here are the steps.

  1. Bring in an image of your heightfield into photoshop. Here is a snip from the kite terrain I used to demonstrate:

  2. Use Levels tool to make it black and white at the water level. It will be helpful to take a 2nd screenshot with matching camera angle with some object placed right at the waterline so you can make sure you get the right spot.


(ie, the white needs to be any terrain above the water… you could even make your landscape shader do this for you automatically pretty easily by doing “if Z > water, 1, else 0”)

  1. Use the Select->color range tool to select all the whites:

  2. Make a new layer and fill in the selection with white. Then fill in the original background layer with black. No image for this step.

  3. Add a layer style to the new top layer. The settings are very important. This is one of the most hidden, powerful tricks in photoshop that nobody seems to know about.


It needs to be: Stroke: Position=Outside, Fill Type=Gradient, Style=Shape Burst. Then make sure toset the size appropriately.

Also if this was more of a true distance field like for a font, you would want to choose Position=Center so that the distance field goes inside too and is at 0.5 on the border. Since we don’t care about waves going on top of the beach we don’t need to waste the limited range in that area.

You should then get something like this which is much more usable as a wave map from shore, but note it isn’t perfect as it treats even tiny pebbles poking up through the water as islands. So you may choose to mask some parts of it separately.

You could then blur this texture a bit to remove some of the sharp corners and then convert it into a normal map using the nvidia filters and end up with a decent vector map for the waves.

You would want to make sure to fade out the contribution of this vector map before it reaches flatness or in areas that have intersections going two ways. This would work much better with an island than a valley like I did here but hopefully you get the idea.

For this valley I probably should have used a bit of a thinner width for the gradient since you can’t really have the waves going out further than half the width of the ‘lake’ which seems to be what I created above. Still hope its useful.

I would probably fix the small outcroppings dominating the image by removing them from the first pass before adding the stroke filter, and then moving them to another layer with a much darker white value and set it to ‘ligten’ or something so it would have its contribution pushed beneath the island gradients. Then you may have to still mask the areas where the direction sharply goes opposite directions.

Just tried to do that last part but for the life of me I can no longer find out how to “Apply layer style” and “rasterize layer” is greyed out (wtf)… hmmmm I used to do both of those things all the time.

(edit: found how to bake image style. for some reason they decided to needlessly rename that to be layer style-> create later. why must they do this, that name doesn’t even make sense :P)