Verre liquide : des gouttes qui réfractent la photo sous la souris

Comment c'est fait

Les gouttes sont des métaballes : une union lisse d'ellipses, étirées dans le sens de leur vitesse, dont le shader connaît la pente exacte en chaque point. Cette pente sert de normale pour dévier la photo.

La réfraction est calculée trois fois, une par couleur, avec un indice légèrement différent : c'est la dispersion qui fait apparaître la frange irisée sur les bords. Un terme de Fresnel ajoute les reflets indigo et menthe de la charte.

1. Les trois gouttes suivent le curseur avec trois raideurs différentes, se séparent en mouvement et se rassemblent au repos.
2. Un clic les fait éclater en gouttelettes qui reviennent se fondre.
3. Au téléphone, deux gouttes et trois tirages de réfraction au lieu de six ; le doigt les guide, puis elles dérivent seules.
4. Mouvement réduit : une image fixe. Sans WebGL : la photo seule.