Show HN: WebGL simulation of rainy autumn day/evening
pluvoir.netlify.appHi, 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).
[1] https://tympanus.net/Development/RainEffect/
[2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
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).
The sliders are for sound, not visual parameters.
This site just combines the visual effect with some sound recordings. See the bottom of https://hipstersound.com/premium.html
Well it has sound it seems, which might actually be more important depending on what you're looking for.
It’s taking a really impressive tech toy and making it a product. You’d be surprised how much work the second 80% is.
This website itself seems more like a tech toy than a product though?
That story map is beautiful!
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).
I agree, that map is amazing. I particularly like the way you can see exactly where the photos were taken.
Also thanks, I'm particularly proud of that map hahah
I ported this effect to Android in a live wallpaper called Rainpaper[1].
I had been looking for this for years when I had an Android phone!
I am totally blown away by this - I just had WebGL pegged as 'draw shapes on canvas, sometimes with colour'.
Thank you :-)
You should check https://www.shadertoy.com/, you will be amazed :)
Cool work, very nice!
It seems that not all your projects, that are download-able, are on Github. Why is that?
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.
That's really cool! Thanks for sharing it!
yo i love everything on codrops especially these. thank you for sharing with the world :)
Brilliant
I wish this was what I was doing!
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.
Same here, Vivaldi is flickering and smooth. Safari works correctly at a noticeably lower frame rate.
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.
My 2014's Intel graphics handles games newer than that without graphical artifacts... Unity games in particular are usually fine.
However, if you're already playing Morrowind (or OpenWM) then you don't really need anything else.
The same thing happens for me on my 2018 MBP, whether I turn on the discrete GPU or not.
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].
[1] https://www.shadertoy.com/view/MdfBRX
[2] Link to first part: https://www.youtube.com/watch?v=eKtsY7hYTPg
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.
[1] https://tympanus.net/Development/RainEffect/
[2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
I remember that I have seen that before, but I don't remember when. Seems to be from 2015 while "The Drive Home" is from 2017.
Part 6 is live coding rain drops on glass in ShaderToy.
ShaderToy LiveCoding - The Drive Home - 6. Rain on a Windshield
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.
For those that feel inspired, there's a good article by Lucas Bebber that breaks down how this kind of rain effect can be made in WebGL here:
https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
Hey, I'm the author--thanks for posting this here.
The page actually uses the exact same effect, so the article provides a decent breakdown of how it works, for those interested.
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!
I wish I had a MAC to test, anyway thank you.
It's due to the day/night buttons being anchor tags as opposed to any Safari-specific issue.
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...
Happens on Chrome on Windows too, so it's not likely a Safari-specific issue
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.
There was an attempt of making the drops merge more naturally, but it was affecting the refraction effect, which I deemed was more important.
It should be solvable though, I just couldn't get the values right at the time.
(Also thanks!)
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/
Nice Scotland simulator!
I love these, nicely done! For reference, I consider DriveClub state of the art when it comes to rain simulation: https://www.youtube.com/watch?v=hViwrRGfuHU
That's so incredibly awesome. All in real-time with everything else going on in the scene. True masterpiece of modern game technology.
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.
Looks pretty good, I do see some weird rain drops blinking on the bottom half of the screen (latest version of Chrome).
Can't tell the difference between the screen and my window (it's rainy here today!). Nice!
That looks / sounds great!
Are the sounds based on samples, or procedurally generated?
My question too. This loads really fast and is really smooth.
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.
It seems that it'S samples as seen from the credits at the bottom : https://pluvoir.netlify.app/credits.html
Anyone else felt like wiping the screen of their smartphones? Well done!
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.
neat! I particularly love the visual appeal of night mode - reminds me of "Night" scenes in old movies where you still could see shadows and sunlit surfaces because of daylight filming: https://en.wikipedia.org/wiki/Day_for_night
Safari on macOS isn't playing any sounds, apparently because you're not requesting for some permission?
Wow this is super nice. Make sure to use this as a portfolio project!
The sliders don't work on Google Chrome on Android 10.
Sliders are for the audio.
I opened this and said wow out loud. Really cool!
Very nicely done. It even works fine in IE11!
Beautiful, bookmarking this!
Really well done, thank you!
Looks very realistic!