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.

  • FencerDevLogOP
    link
    fedilink
    English
    arrow-up
    1
    ·
    16 hours ago

    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;
    }