Back In the Woods (Part 6): Shading

Last posting I tackled adding some texture to individual tree icons.  Now I'll look at shading:

In this example, the sun is to the left, so the trees are shaded on the right, by making that side of the tree darker and (in this case) adding a thicker black line on that side for some trees.

This map has a different style of shading:

In this case, the shading is provided by hatching, much as I did for mountains.

The easiest way for me to add shading is to add it in the same way I did to simple buildings when creating city icons, using a gradient.  In this case, I'll use a radial gradient that is light in the center and dark at the edge, but I'll offset it upwards and to the right so that it looks like the sun is coming from that direction:

A couple of things to notice.  First, I'm applying this gradient individually to each of the clumps that make up the tree, so trees with two or three clumps start to show that structure.  It doesn't look very good on the large tree, but at map scale it is a nice effect.  Secondly, you'll notice that the gradient gets dark about halfway across the clump and then stays the same shade the rest of the way.  Why is that?  By default, the SVG radial gradient has the same radius as the size of the object it is applied to.  (How that size is calculated is something of a mystery!)  Since I've shifted the center of the gradient up and to the left, I need to stretch out the radius so it can still reach the far edge of the clump.

How does this combine with the tree textures?  Here it is with the bump texture:

The bumps in the shadow areas get a little bit lost because they're close in value to the shadow but overall it's fine.  And here it is with noise texture:

Suddenly much darker, although I think it looks good at map scale, and very similar to the shading on the “Forest of Reveries" example at the top of this post. 

Of course, I can adjust the noise filter and colors to make this lighter if that's what I want.

I'm not planning at this time to implement the hatch line shading as in the second example above.  I don't think my tree icons are big enough to show the hatching, and there are some challenges in figuring out the area to hatch.

Some maps have a second kind of tree shading, as in this map, The Midlands by M. Plasse over at the Cartographer's Guild:

These trees have a small amount of shading underneath the tree to represent a cast shadow. 

Here's another example from Vellrath by Tommaso Di Giovanni:

In this case, the shadows are drawn quite stretched out, as if the sun is low on the horizon.

In general, for a round tree the shadow is an ellipse cast opposite the direction of the sun.  Since the sun is up high and to the right on Dragons Abound maps, that means the shadow will be below and to the left of the tree.  So to start, I'll create an ellipse with the right end near the trunk:

Here I'm allowing a range of starting points for the ellipse as well as the length of the ellipse.  During map generation, I'll pick one set of values and use them consistently for all the trees.  You can also see that I'm using a pretty crude approximation for an ellipse, but at map scale this isn't visible.

The next step is to fill the ellipse.  To start with, I'll just use a grey color.

It isn't obvious in this illustration, but this is actually partially-transparent black.  By using a translucent shadow, the ground color will show through.  Next I want to add a small amount of blur to the shadow.

Let's try it on a map:

To make the shadows visible on the map, I had to make them almost completely opaque.  As a result, not much of the land color shows through.  So it might be better to use a dark version of the land color for the shadow instead.

Maybe a small improvement?  Hard to say.

And that's about it for shading for now.