8 ms·

Show HN: WebGL simulation of rainy autumn day/evening

393 points by maxraz 6y ago

controlledchaos 6y ago
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!
- maxraz 6y ago
  I wish I had a MAC to test, anyway thank you.
  - eminence32 6y ago
    Happens on Chrome on Windows too, so it's not likely a Safari-specific issue
  - IvoDankolov 6y ago
    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/replaceState https://developer.mozilla.org/en-US/docs/Web/API/History/rep...
windock 6y ago
Really well done, thank you!
madjam002 6y ago
Beautiful, bookmarking this!
jeffschofield 6y ago
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-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
- lbebber 6y ago
  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.
rimliu 6y ago
This reminded me of the different site I liked so much: https://1976design.com/ 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/ https://1976design.com/blog/colophon/
IvoDankolov 6y ago
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.
- lbebber 6y ago
  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!)
anticristi 6y ago
Anyone else felt like wiping the screen of their smartphones? Well done!
weinzierl 6y ago
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 https://www.shadertoy.com/view/MdfBRX [2] Link to first part: https://www.youtube.com/watch?v=eKtsY7hYTPg https://www.youtube.com/watch?v=eKtsY7hYTPg [3] https://news.ycombinator.com/item?id=15564148 https://news.ycombinator.com/item?id=15564148
- technicolorwhat 6y ago
  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.
- lbebber 6y ago
  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/ https://tympanus.net/Development/RainEffect/ [2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
  - weinzierl 6y ago
    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.
- Cactus2018 6y ago
  Part 6 is live coding rain drops on glass in ShaderToy. ShaderToy LiveCoding - The Drive Home - 6. Rain on a Windshield https://www.youtube.com/watch?v=52TMliAWocY https://www.youtube.com/watch?v=52TMliAWocY
rhacker 6y ago
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.
jcun4128 6y ago
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.
eggfriedrice 6y ago
Nice Scotland simulator!
dbrgn 6y ago
That looks / sounds great! Are the sounds based on samples, or procedurally generated?
- acidburnNSA 6y ago
  My question too. This loads really fast and is really smooth. I've been using https://mynoise.net/ 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.
- rnotaro 6y ago
  It seems that it'S samples as seen from the credits at the bottom : https://pluvoir.netlify.app/credits.html https://pluvoir.netlify.app/credits.html
svenfaw 6y ago
Very nicely done. It even works fine in IE11!
bullen 6y ago
Don't miss the audio origin: https://defonic.com https://defonic.com
donalhunt 6y ago
Can't tell the difference between the screen and my window (it's rainy here today!). Nice!
ibdf 6y ago
Looks pretty good, I do see some weird rain drops blinking on the bottom half of the screen (latest version of Chrome).
lbebber 6y ago
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). [1] https://tympanus.net/Development/RainEffect/ https://tympanus.net/Development/RainEffect/ [2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex... [3] http://lbebber.github.io/ http://lbebber.github.io/
- OJFord 6y ago
  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).
  - ebg13 6y ago
    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 https://hipstersound.com/premium.html
    - edeion 6y ago
      What do you mean? Is OP relying on this website? They link to https://defonic.com/.. https://defonic.com/...
  - lbebber 6y ago
    Well it has sound it seems, which might actually be more important depending on what you're looking for.
  - Waterluvian 6y ago
    It’s taking a really impressive tech toy and making it a product. You’d be surprised how much work the second 80% is.
hombre_fatal 6y ago
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).
- lbebber 6y ago
  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.
- mistercow 6y ago
  The same thing happens for me on my 2018 MBP, whether I turn on the discrete GPU or not.
- jmkerr 6y ago
  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.
- spanhandler 6y ago
  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.
DGKSK8LIFE 6y ago
Wow this is super nice. Make sure to use this as a portfolio project!
henearkr 6y ago
Is there any relation with the effect used in pluvior.com?
filleduchaos 6y ago
Safari on macOS isn't playing any sounds, apparently because you're not requesting for some permission?
kristiandupont 6y ago
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 https://www.youtube.com/watch?v=hViwrRGfuHU
- ricklamers 6y ago
  That's so incredibly awesome. All in real-time with everything else going on in the scene. True masterpiece of modern game technology.
talolard 6y ago
I opened this and said wow out loud. Really cool!
murermader 6y ago
The sliders don't work on Google Chrome on Android 10.
- rnotaro 6y ago
  Sliders are for the audio.
williesleg 6y ago
It works about as well as digg.
awiesenhofer 6y ago
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 https://en.wikipedia.org/wiki/Day_for_night
Akcium 6y ago
Looks very realistic!

393 points by maxraz 6y ago

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!

maxraz 6y ago
I wish I had a MAC to test, anyway thank you.
- eminence32 6y ago
  Happens on Chrome on Windows too, so it's not likely a Safari-specific issue
- IvoDankolov 6y ago
  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/replaceState https://developer.mozilla.org/en-US/docs/Web/API/History/rep...

windock 6y ago

Really well done, thank you!

madjam002 6y ago

Beautiful, bookmarking this!

jeffschofield 6y ago

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-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...

lbebber 6y ago
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.

rimliu 6y ago

This reminded me of the different site I liked so much: https://1976design.com/ 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/ https://1976design.com/blog/colophon/

IvoDankolov 6y ago

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.

lbebber 6y ago
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!)

anticristi 6y ago

Anyone else felt like wiping the screen of their smartphones? Well done!

weinzierl 6y ago

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 https://www.shadertoy.com/view/MdfBRX [2] Link to first part: https://www.youtube.com/watch?v=eKtsY7hYTPg https://www.youtube.com/watch?v=eKtsY7hYTPg [3] https://news.ycombinator.com/item?id=15564148 https://news.ycombinator.com/item?id=15564148

technicolorwhat 6y ago
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.
lbebber 6y ago
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/ https://tympanus.net/Development/RainEffect/ [2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
- weinzierl 6y ago
  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.
Cactus2018 6y ago
Part 6 is live coding rain drops on glass in ShaderToy. ShaderToy LiveCoding - The Drive Home - 6. Rain on a Windshield https://www.youtube.com/watch?v=52TMliAWocY https://www.youtube.com/watch?v=52TMliAWocY

rhacker 6y ago

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.

jcun4128 6y ago

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.

eggfriedrice 6y ago

Nice Scotland simulator!

dbrgn 6y ago

That looks / sounds great! Are the sounds based on samples, or procedurally generated?

acidburnNSA 6y ago
My question too. This loads really fast and is really smooth. I've been using https://mynoise.net/ 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.
rnotaro 6y ago
It seems that it'S samples as seen from the credits at the bottom : https://pluvoir.netlify.app/credits.html https://pluvoir.netlify.app/credits.html

svenfaw 6y ago

Very nicely done. It even works fine in IE11!

bullen 6y ago

Don't miss the audio origin: https://defonic.com https://defonic.com

donalhunt 6y ago

Can't tell the difference between the screen and my window (it's rainy here today!). Nice!

ibdf 6y ago

Looks pretty good, I do see some weird rain drops blinking on the bottom half of the screen (latest version of Chrome).

lbebber 6y ago

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). [1] https://tympanus.net/Development/RainEffect/ https://tympanus.net/Development/RainEffect/ [2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex... [3] http://lbebber.github.io/ http://lbebber.github.io/

OJFord 6y ago
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).
- ebg13 6y ago
  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 https://hipstersound.com/premium.html
  - edeion 6y ago
    What do you mean? Is OP relying on this website? They link to https://defonic.com/.. https://defonic.com/...
- lbebber 6y ago
  Well it has sound it seems, which might actually be more important depending on what you're looking for.
- Waterluvian 6y ago
  It’s taking a really impressive tech toy and making it a product. You’d be surprised how much work the second 80% is.

hombre_fatal 6y ago

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).

lbebber 6y ago
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.
mistercow 6y ago
The same thing happens for me on my 2018 MBP, whether I turn on the discrete GPU or not.
jmkerr 6y ago
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.
spanhandler 6y ago
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.

DGKSK8LIFE 6y ago

Wow this is super nice. Make sure to use this as a portfolio project!

henearkr 6y ago

Is there any relation with the effect used in pluvior.com?

filleduchaos 6y ago

Safari on macOS isn't playing any sounds, apparently because you're not requesting for some permission?

kristiandupont 6y ago

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 https://www.youtube.com/watch?v=hViwrRGfuHU

ricklamers 6y ago
That's so incredibly awesome. All in real-time with everything else going on in the scene. True masterpiece of modern game technology.

talolard 6y ago

I opened this and said wow out loud. Really cool!

murermader 6y ago

The sliders don't work on Google Chrome on Android 10.

rnotaro 6y ago
Sliders are for the audio.

williesleg 6y ago

It works about as well as digg.

awiesenhofer 6y ago

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 https://en.wikipedia.org/wiki/Day_for_night

Akcium 6y ago

Looks very realistic!