Godot 4: Rainy window shader (tutorial)
Godot 4: Rainy window shader (tutorial)
Hi everyone! I think that a simulation of a raindrop trickling down a window is a very nice effect, and if there are more of them, they can be both highly useful and visually striking in games. So, let’s explore how this shader works from a programming perspective.
I watched it, very interesting effect, but one of the problems I have when trying to implement an effect is understanding how to manipulate the color, in your case the magic was happening in the drop_layer function. How did you know that doing that calculation (I.e. the uv offset into the base texture) would look like a drip?
Thanks! The offset of UV coordinates works like refraction, localized to the corresponding cell of the defined grid. Without using a noise texture, such light refraction would be circular, similar to the magnifying glass effect. However, this approach creates slightly irregular shapes, which better simulate droplets on a window pane. If you reduce the drop_layer function to its absolute minimum, you should see the mentioned grid before the shaping and movement of the droplets.
Like this:
vec2 drop_layer(vec2 uv, float time) { vec2 grid = vec2(grid_x, grid_y); vec2 drop_uv = fract(uv * grid); drop_uv = 2.0 * drop_uv - 1.0; vec2 drop_size = drop_uv / grid; return drop_size; }