You can see the original effect here[1], along with an explanation here[2].
If you like it, you can see a few more effects and experiments on my portfolio here[3], although it's been a couple of years now since I've done anything of the sort (that I can post publicly, that is).
[1] https://tympanus.net/Development/RainEffect/
[2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
This site just combines the visual effect with some sound recordings. See the bottom of https://hipstersound.com/premium.html
I have a somewhat unrelated question. Do you ever see the world moving to rendering content completely on a WebGL canvas, for better control and with the ability to circumvent ad blockers?
However I do see it being used for web apps that prioritise performance--in terms of providing a smooth experience, rather than load times. I think Figma already does that (through emscripten or wasm, I'm not sure); for it to be more widespread, only the tooling has to catch up (e.g. React Native).
Thank you :-)
It seems that not all your projects, that are download-able, are on Github. Why is that?
Not surprising though. This 2017 Macbook Pro's integrated gfx (Intel Iris Plus Graphics 640 1536 MB) seems incapable of rendering any 3D games after 2010 without flickering at some point. It's one reason I'm still playing Morrowind (2002).
In fact I think this is one of the most frustrating things of working with WebGL (or any of those slightly less common browser APIs, really), lots of small weird compatibility issues and instabilities.
I have found that Vivaldi uses the Macs Intel GPU, and Safari is CPU bound. WebGL 2.0 experimental support in Safari doesn't seem to have any effect.
However, if you're already playing Morrowind (or OpenWM) then you don't really need anything else.
The accompanying video tutorial[2] is super interesting too as well as the HN discussion at the time [3].
[1] https://www.shadertoy.com/view/MdfBRX
[2] Link to first part: https://www.youtube.com/watch?v=eKtsY7hYTPg
The one you posted is in many ways nicer though due to it all being a single shader, however it has the downside of the drops not interacting with each other.
[1] https://tympanus.net/Development/RainEffect/
[2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
ShaderToy LiveCoding - The Drive Home - 6. Rain on a Windshield
https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
The page actually uses the exact same effect, so the article provides a decent breakdown of how it works, for those interested.
If you wanted to keep the the ability to link to specific states, but avoid the history issue, you'll need to use the History API — https://developer.mozilla.org/en-US/docs/Web/API/History/rep...
One caveat is the merging of the drops sometimes looks quite unnatural, but I'm not sure there's any simple way to represent that as just a couple of textures and a transformation, as real drops would have attractive forces on a molecular level pulling them towards one another once they're bridged, deforming pretty unevenly.
It should be solvable though, I just couldn't get the values right at the time.
(Also thanks!)
Are the sounds based on samples, or procedurally generated?
I've been using https://mynoise.net/ for years as a paying customer for this kind of thing and am always happy to see other movement in this tech.
