Making rain simulation as real as possible • Hacker News Board

Re: Making rain simulation as real as possible

#41

Post by _coveredInBees » Sun, Nov 11, 2018, 8:34 PM UTC

SubiculumCode wrote: post #28

pier25 wrote: post #25

Looks great. I was confused at first because I thought the sliders were parameters of the simulation and I wasn't hearing anything.

I came thinking that it was a visual rain simulator. Then I saw a very nice visual display, but the sliders didn't do anything. Then I realized that it is an audio simulator with different audio parameters for the various aspects of the rain soundscape. I'd love sliders for the visual display too. Very nice. Very very nice. Bookmarked.

You can control the number of drops in the animation by clicking on the hamburger menu in the top-right.

Re: Making rain simulation as real as possible

#42

Post by [deleted] » Sun, Nov 11, 2018, 8:38 PM UTC

kossTKR wrote: post #12

Looks good! On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps. Weirdly on an iPhone with Safari the performance is smooth as silk. I would really like to ditch Chrome, but it seems i get full speed fans with Firefox on sites sporadically, and while Safari is much better it's still not on par with any kinds of heavy graphics. I don't get it. Why can my iPhone 6 run…

[deleted]

Re: Making rain simulation as real as possible

#43

Post by lbebber » Sun, Nov 11, 2018, 8:43 PM UTC

Hey, I made this for Codrops, like 2 or 3 years ago?

I mean, the rain effect itself, not the whole UI around it here.

Edit: Here's[1] the accompanying article, and here's[2] some other stuff I made (although my website is also just as old and hasn't been updated since!)

[1]http://tympanus.net/codrops/rain-water-effect-experiments/

[2]http://lbebber.github.io/

Re: Making rain simulation as real as possible

#44

Post by Tempest1981 » Sun, Nov 11, 2018, 8:50 PM UTC

crazygringo wrote: post #40

This is scarily close to realistic... for a second I got worried because my intuitive brain was telling me my laptop screen was all wet! Curious if this is the best done in WebGL to date, or if there's even better out there? Or what this does and doesn't do, and where next obvious areas for improvement would be?

Agreed. Passes the Turing test for rain, if there is such a concept.

Re: Making rain simulation as real as possible

#45

Post by ghettoimp » Sun, Nov 11, 2018, 8:54 PM UTC

kossTKR wrote: post #12

Looks good! On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps. Weirdly on an iPhone with Safari the performance is smooth as silk. I would really like to ditch Chrome, but it seems i get full speed fans with Firefox on sites sporadically, and while Safari is much better it's still not on par with any kinds of heavy graphics. I don't get it. Why can my iPhone 6 run…

Thanks much -- I was watching this in Firefox on MBP and didn't realize how cool this was until seeing it again in Chrome.

Re: Making rain simulation as real as possible

#46

Post by pmontra » Sun, Nov 11, 2018, 8:59 PM UTC

kossTKR wrote: post #12

Looks good! On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps. Weirdly on an iPhone with Safari the performance is smooth as silk. I would really like to ditch Chrome, but it seems i get full speed fans with Firefox on sites sporadically, and while Safari is much better it's still not on par with any kinds of heavy graphics. I don't get it. Why can my iPhone 6 run…

Firefox Android, it looks good. Sony Xperia Compact from 2016, don't remember the model.

Re: Making rain simulation as real as possible

#47

Post by universenz » Sun, Nov 11, 2018, 9:08 PM UTC

This is visually amazing. If only we could get the sound simulation to the same level but with different elements.. eg. Tin Roof / Tent / Weatherboard / Muffled Indoor / Downpipes etc. I've searched for years to find something realistic, and the closest I've been able to find was Naturescape.. but those are real seamless loop recordings.

Re: Making rain simulation as real as possible

#48

Post by bglusman » Sun, Nov 11, 2018, 9:08 PM UTC

lbebber wrote: post #43

Hey, I made this for Codrops, like 2 or 3 years ago? I mean, the rain effect itself, not the whole UI around it here. Edit: Here's[1] the accompanying article, and here's[2] some other stuff I made (although my website is also just as old and hasn't been updated since!) [1] http://tympanus.net/codrops/rain-water-effect-experiments/ [2] http://lbebber.github.io/

I don't know why this isn't getting more attention/comment (someone else independently posted it looked similar below with another link to your domain) but here's the one I found from your profile link for comparison http://tympanus.net/Development/RainEffect/

Re: Making rain simulation as real as possible

#49

Post by lbebber » Sun, Nov 11, 2018, 9:08 PM UTC

kossTKR wrote: post #12

Looks good! On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps. Weirdly on an iPhone with Safari the performance is smooth as silk. I would really like to ditch Chrome, but it seems i get full speed fans with Firefox on sites sporadically, and while Safari is much better it's still not on par with any kinds of heavy graphics. I don't get it. Why can my iPhone 6 run…

This effect uses both WebGL and canvas 2d. I'd guess that for some reason the canvas 2d isn't using hardware acceleration on those browsers?

Somebody has made a version using WebGL alone[1] (sadly they got the refraction a bit wrong), try it to see if it works well enough (and let me know, I'm curious myself).

[1] https://codepen.io/stefanweck/pen/Vbgeax

Re: Making rain simulation as real as possible

#50

Post by dathinab » Sun, Nov 11, 2018, 9:11 PM UTC

kossTKR wrote: post #12

Looks good! On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps. Weirdly on an iPhone with Safari the performance is smooth as silk. I would really like to ditch Chrome, but it seems i get full speed fans with Firefox on sites sporadically, and while Safari is much better it's still not on par with any kinds of heavy graphics. I don't get it. Why can my iPhone 6 run…

Seems to be a mac related issue, as it runs smooth on Firefox/Linux and some other comments indicate that it also can run on android[1].

Anyone tried it on Firefox + Windows?

[1]: can't verify this as I only have a slowich some years old android phone, on which it runs fluidish but miss renders the effect of the large rain drops...