Toggling the options seems to add records to the browser history, which means it takes a bunch of taps on the back button in safari to get out of the app. Otherwise, really cool!
This reminded me of the different site I liked so much: https://1976design.com/. On the top there is header which used to reflect the real weather conditions outside. It is no longer functional, but you can read some about it in the colophon: https://1976design.com/blog/colophon/
Lovely effect! Particularly enjoyed how it seems to 'fake' refraction by sampling higher or lower from the background based on the drop shape. The trails squishing back into raindrops to simulate surface tension is also a pretty nice touch, though perhaps a bit over-exaggerated.
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.
Not sure if it is the original but the source where I first saw this rain effect was on ShaderToy - The Drive Home by Martijn Steinrucken aka BigWings[1]
The accompanying video tutorial[2] is super interesting too as well as the HN discussion at the time [3].
Hahha i was like. This is the "drive home"
Martijn is an exceptional explainer I like his channel a lot. A great resource if you want to start programming shaders.
It has already been posted by jeffschofield, but the original is here[1], along with a brief article breaking down the effect[2].
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.
Man that's crazy, trying to figure out how you make something look like glass/water. Also moving your mouse around on desktop gives it added feel of depth/realism the pane of glass.
Hi, I'm the author of the rain effect (not of the website itself though).
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).
Is the submission actually adding anything of substance to your work then? It seems basically the same but with a background image, and parameterisation sliders (that I can't get to work anyway).
There's no good reason, to my shame. But now that you mention, I think I'll get around to it and do it this week. Might be a good opportunity to round down a few rough edges here and there as well.
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?
Hmmm I'm not sure if it could be properly used to circumvent ad blocking, after all the ads will still probably come from a separate request which one could block.
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).
The drops flicker in OSX Chrome 84 for me. Works in other browsers.
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).
It _is_ really weird, that didn't use to happen either. Started happening after some update of either Chrome or macOS, I'm not certain which.
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.
Pretty cool!. Only one glitchy part, the bottom of the screen seems to have a few drops that appear and disappear at random, that's the only thing that took me out of the realism.
64 comments
[ 2.9 ms ] story [ 126 ms ] threadIf 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...
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.
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!)
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
[3] https://news.ycombinator.com/item?id=15564148
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://www.youtube.com/watch?v=52TMliAWocY
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.
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...
[3] http://lbebber.github.io/
This site just combines the visual effect with some sound recordings. See the bottom of https://hipstersound.com/premium.html
It seems that not all your projects, that are download-able, are on Github. Why is that?
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).
[1] https://rainpaper.com
Thank you :-)
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.