Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: WebGL simulation of rainy autumn day/evening

pluvoir.netlify.app

Post reply on HN
Print view View original

11–20 of 65 posts

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

#12

Post by 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

[2] Link to first part: https://www.youtube.com/watch?v=eKtsY7hYTPg

[3] https://news.ycombinator.com/item?id=15564148

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

#13

Post by technicolorwhat »

weinzierl wrote: post #12

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 [3] https://news.ycombinator.com/item?id=15564148

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.

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

#16

Post by lbebber »

jeffschofield wrote: post #8

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.

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

#18

Post by lbebber »

IvoDankolov wrote: post #10

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…

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

Post reply on HN