Show HN: WebGL simulation of rainy autumn day/evening

#1

Post by maxraz » Wed, Jul 29, 2020, 12:22 PM UTC

Show HN: WebGL simulation of rainy autumn day/evening
pluvoir.netlify.app

Re: Show HN: WebGL simulation of rainy autumn day/evening

#2

Post by controlledchaos » Wed, Jul 29, 2020, 1:11 PM UTC

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!

Re: Show HN: WebGL simulation of rainy autumn day/evening

#3

Post by maxraz » Wed, Jul 29, 2020, 1:14 PM UTC

controlledchaos wrote: post #2

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.

Re: Show HN: WebGL simulation of rainy autumn day/evening

#4

Post by windock » Wed, Jul 29, 2020, 1:15 PM UTC

Really well done, thank you!

Re: Show HN: WebGL simulation of rainy autumn day/evening

#5

Post by madjam002 » Wed, Jul 29, 2020, 1:16 PM UTC

Beautiful, bookmarking this!

Re: Show HN: WebGL simulation of rainy autumn day/evening

#6

Post by eminence32 » Wed, Jul 29, 2020, 1:17 PM UTC

maxraz wrote: post #3

controlledchaos wrote: post #2

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.

Happens on Chrome on Windows too, so it's not likely a Safari-specific issue

Re: Show HN: WebGL simulation of rainy autumn day/evening

#7

Post by IvoDankolov » Wed, Jul 29, 2020, 1:25 PM UTC

maxraz wrote: post #3

controlledchaos wrote: post #2

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

Re: Show HN: WebGL simulation of rainy autumn day/evening

#8

Post by jeffschofield » Wed, Jul 29, 2020, 1:28 PM UTC

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

Re: Show HN: WebGL simulation of rainy autumn day/evening

#9

Post by rimliu » Wed, Jul 29, 2020, 1:35 PM UTC

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/

Re: Show HN: WebGL simulation of rainy autumn day/evening

#10

Post by IvoDankolov » Wed, Jul 29, 2020, 1:47 PM UTC

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.