Drawing shadows in themes

[dhardy]

I was thinking some more about how to implement shadows (see #237):

Drawing offset, coloured frames for each widget is not too difficult. The problem is, where? Widgets are not supposed to draw in their outer margin area. Usually there's nothing else drawn there, but if the widget is but inside a container then that container is allowed to draw there.

Alternatively we could allocate extra area within the widgets proper, but then the shadow is a clickable part of the button.

The other possibility is to do a post-processing step: (1) add a depth buffer and possibly some type of mask, (2) draw shadows based on the depth and some light-direction. This allows some flexibility: soft shadows in all directions, user-configuration. It's also extra work, may be less portable and may have some other issues that need fixing.

[hummingly]

Clickable shadows would indeed break the illusion. I do web dev mostly, so I expect box shadows to draw outside the boundary. It has the benefit of preserving the space.

While it will add more work, it will be necessary for implementing many designs, especially if someone wants to implement a platform specific one.

Now that I think of, popovers usually have a big drop shadow and then sometimes even in combination with background blur.

Oh, and most of all those acryl materials use the compositor too to get those see through blurred backgrounds.

One way or another, you can't really get away from a post-processing step.

[hummingly]

The changes look nice. I actually had the shaded theme in mind when I made the mockup and had therefore a lot of many inner shadows. Do you plan to keep the shaded theme?

[dhardy]

I wrote some custom shaders for the shaded theme to get those bevelled edges, so I'm not planning no just throwing it away! Possibly it would look good with shadows too (e.g. on the slider handle and buttons), though there may be some minor issues with draw order.

Your mock art used flat shading (other than the drop shadows) and simple line borders, hence it seemed closer to the old FlatTheme, which also needed some work anyway IMO.

Do you have further suggestions?

[hummingly]

Yeah, the inner shadows were so thin that they ended up looking like borders. I will update the design to use borders directly. Shaded themes do not really work well with thin and small widgets as it seems. I wonder how a glow effect with shaded buttons would look. There is not so much going on in this design direction, so I would need to experiment a bit.

[dhardy]

Ah. I did notice the inner shadow, then forgot about it... there's not much room before obscuring contents in e.g. a text box. It might be possible I guess, especially with high DPI.

The menus of the ShadedTheme look like they have a black border — actually, that's just a side-effect of the current shadow technique. Looks okay though I think.

I wanted to draw nice soft shadows directly from a height-map but couldn't find any way of doing that, except perhaps using a small number of height "layers", each of which is handled as a drop-shadow. The only other option I found was shadows in a 2D game: it would look better for KAS considering we have a top-down orthographic view but the technique can't reasonably be extended to draw soft shadows.