jeantimex/raindrop

Raindrop is a small graphics demo that shows realistic raindrops sliding down a glass window in a web browser. It is a reimplementation of a well-known shader called Heartfelt by Martijn Steinrucken, rewritten to run on WebGPU, the newer browser standard for talking to graphics hardware. The effect is computed entirely on the GPU as math, with no actual particles or 3D objects involved. The README walks through how the illusion is built. The screen is divided into a grid, with each cell holding exactly one drop placed at a random spot inside it, and column shifts break up the visible grid pattern. To make the drops behave like real water on glass, the code uses a sawtooth function: each drop sticks in place while surface tension holds it, then slides quickly down once gravity wins, then sticks again. Two layers of drops at different scales add a sense of depth, and tiny static condensation droplets fade in and out in the background. The light-bending look comes from treating each drop as a tiny lens. The shader calculates the slope of each drop by sampling its shape at nearby points, then uses that slope to offset where the background image is read from, which creates the refraction. Background blur is handled by mipmaps, the built-in mini versions of textures the GPU keeps at smaller resolutions, so trails behind drops look softly out of focus while the drops themselves stay sharp. Users can click and drag, or touch on mobile, to wipe the glass clean. A compute shader paints along your drag path into a 512 by 512 wipe mask, and another shader slowly fades that mask back to dirty so rain returns. There is a parameter panel for tuning rain amount, drop speed, refraction, rim light, blur range, lightning flashes, and brush size for the wiper.