Building an Interactive Rain-on-Glass Effect with Three.js and WebGL

Building an Interactive Rain-on-Glass Effect with Three.js and WebGL

I've been experimenting with Three.js and WebGL while working on my personal portfolio.

One of those experiments turned into Rain on Glass. An interactive effect where water droplets fall onto a virtual glass surface, slide down, leave trails and respond to mouse movement.

Instead of simply animating circles with CSS, I wanted to explore how to make the water feel like part of the surface.

How it works

The effect combines a few different technologies:

JavaScript handles user interactions and the movement of the droplets.
Three.js manages the rendering setup.
WebGL2 and GLSL shaders handle the appearance of the water, including lighting, surface distortion and refraction.

Each droplet has its own position, velocity and movement state. After hitting the glass, it gradually starts sliding down, leaving a temporary trail behind.

The shaders help give the droplets their shape and depth without needing actual 3D water models.

The challenging part

Getting the water to look convincing was more difficult than making it move.

My first splash effects looked like perfectly round, glowing circles. They didn't match the more realistic appearance of the droplets at all.

I experimented with more irregular shapes, subtle highlights and surface distortion to make the different parts of the effect feel more consistent.

It's still an approximation rather than a full fluid simulation, but that's also part of what makes experimenting with shaders interesting.

Try it yourself

The experiment is available on CodePen:

(https://codepen.io/editor/JeffreyBezosz/pen/01a165a4-0636-7d20-aba1-7e677475df60)

Click or tap to create droplets and move your mouse around to interact with them.

What's next?

I'm still exploring how far I can take these kinds of interactions without sacrificing performance or usability.

As a Digital Experience Design student, I enjoy working between visual design and development, and this was a fun way to experiment with both.

You can also check out my other projects on my personal portfolio (https://jefvereecke.be/).