
Show HN: WebGL simulation of rainy autumn day/evening - maxraz
https://pluvoir.netlify.app/index.html
======
lbebber
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-
ex...](https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/)

[3] [http://lbebber.github.io/](http://lbebber.github.io/)

~~~
OJFord
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
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)

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

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

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

~~~
weinzierl
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.

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

~~~
lbebber
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.

------
controlledchaos
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
I wish I had a MAC to test, anyway thank you.

~~~
IvoDankolov
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...](https://developer.mozilla.org/en-
US/docs/Web/API/History/replaceState)

------
IvoDankolov
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
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!)

------
rimliu
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/)

------
eggfriedrice
Nice Scotland simulator!

------
kristiandupont
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
That's so incredibly awesome. All in real-time with everything else going on
in the scene. True masterpiece of modern game technology.

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

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

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

------
dbrgn
That looks / sounds great!

Are the sounds based on samples, or procedurally generated?

~~~
acidburnNSA
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.

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

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

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

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

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

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

~~~
rnotaro
Sliders are for the audio.

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

------
svenfaw
Very nicely done. It even works fine in IE11!

------
madjam002
Beautiful, bookmarking this!

------
windock
Really well done, thank you!

------
Akcium
Looks very realistic!

