Shader for shadows

1

I’m wanting to do something similar to how Google handles the elevation rules in their Material Design stuff. Using the following image, I’d like to be able to apply a drop shadow to my rectangles when I render them, based on their elevation.

whatismaterial_3d_elevation_shadow5.png720×720 10.9 KB

Initially I was thinking of just using a texture, but I’m not sure I can pull off the scaling of the texture right as the elevation changed. Meaning the shadow becoming harder as the rectangle gets closer to the “bottom” and softer as it gets higher.

I would like to do this using a shader, but I’m not sure if that’s the right approach. If it is the correct approach, I don’t really know where to begin with that. I’ve never used a shader before and the MonoGame docs on how to create one and consume one is a little sparse :frowning: I assumed I would apply this shader to a secondary rectangle that was scaled up/down beneath the real rectangle. The only thing I’m just not sure of is handling the changing in the shadow softness as the underlying shadow Rectangle size, gets closer to the bounds of its parent. Do shaders expose properties that I can use to determine how my shader is rendered? Basically letting me tweak the shader at runtime while the rectangle elevation changes. Like I said, I’m not familiar with shaders at all, so any input/advice or help would be massively appreciated.

What do you guys recommend?

2

A shader is the way to go here. I think it’s easiest to go for just a pixelshader that you can pass to spritebatch. Is it just rectangles, or other shapes too? If it’s just rectangles you can take some shortcuts :slightly_smiling:

3

There are different shapes. Rectangles, squares and circles are the three I’m planning on needing to support.

Thanks for your help!

4

Anyone have any tips with this? I’m still struggling to get a shader to do this :confused:

5

do you want the rectangles etc. to overlap and cast shadows on each other or do they all cast a shadow only to background?

6

It is possible for them to overlap and cast shadows on each other. I’m more or less building my UI based off Material Design so the UI elements would potentially have overlapping shadows. They could be different shapes, such as a circle button, rectangle item in a list or a tile containing additional UI conponents.

7

Also, the shadow size/softness is governed by how far up the z-axis the shape is. The further up the axis, the softer the shadow, and larger, becomes. This would be faked as all my controls would not really be moving up and down a z-axis. I would handle it via rendering order and z-order of the shapes, using the shadows to give the impression that the control is elevated.