
Making rain simulation as real as possible - sazers
http://rainbowhunt.me/?plays
======
geofffox
I am a meteorologist on TV. I work in front of a chroma key wall. I would love
to have a simulator like this where I could swap in the background image...
well, you get the idea.

This would especially be good for me as I do the weather in Nebraska from a
studio I built at home in SoCal. As far as I know I'm the only regularly
scheduled TV news anchor to work from home in the US and possibly the world.

~~~
reaperducer
Do the people in Nebraska know you’re in California? Is that disclosed or
simply not mentioned, hoping nobody catches on?

Do you have any problems with this remote setup like Sinclair has with
“Centralcasting” local news from far away? (Graphics and visuals for the wrong
station showing up, talent’s obvious lack of knowledge of local events and
terminology, etc...)

What happens in the event of a California-centric disaster like an earthquake
or wildfire, and you’re not available? Or if there’s a major weather event in
Nebraska and you’re not there, or not able to feed into Nebraska because
Vyvx/internet goes down or the satellite dish freezes over?

~~~
geofffox
We don't mention it on-the-air, but it's not hidden. You don't want to lie
about something like this (or anything, actually). When you're caught you'll
pay.

It's difficult to explain but what I do is designed for me. There's a lot I do
because I understand both sides of the equation which means my studio isn't a
turnkey solution anyone could walk into. You need to be able to understand
'why' when something doesn't work.

That being said, IMHO Sinclair did it the wrong way. The weather unit should
be an autonomous production, not dependent on the regular studio being free.
My all-in studio cost is around Hyundai money. It removes complexity and
allows live production where needed and closer to air always.

I had a trip from SoCal to Milwaukee cancelled because a few guys who robbed a
gas station decided to drive the getaway car to Sky Harbor Airport in Phoenix
-- where my first flight was headed. Random shit happens.

In three years of doing this what you describe hasn't ever happened.

We use the Internet for data. I have fiber to the wall.

~~~
scroy
Sorry but what is "Hyundai money"? Like, the cost of a Hyundai?

~~~
scoggs
Yes

~~~
geofffox
Scoggs knows.

------
lbebber
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/](http://tympanus.net/codrops/rain-water-effect-experiments/)

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

~~~
dclowd9901
What’s some good reading for a basic and well-explained entry into GL and
shaders. I feel like so many tuts gloss over really important stuff. I’ve
never written a shader.

As an aside, I’m sorry someone stole this from you and used it unattributed.

~~~
JoBrad
Unless they made the edit very recently, he is credited on the credits page.

~~~
lbebber
I am credited for the "menu code" and "inspiration", though, hahah

But it doesn't matter, I posted the code for it to be used, I'm glad to see it
in the wild.

------
dahart
Is there any description or attribution for the shader? Are the visuals an
improved version of Martijn Steinrucken's "Drive Home" shader [1], or a
different approach? This one does seem more dynamic with more detail, it looks
pretty good, and I like how the big drops take out the small spray.

[1] shader:
[https://www.shadertoy.com/view/MdfBRX](https://www.shadertoy.com/view/MdfBRX)

video:
[https://www.youtube.com/watch?v=WrxZ4AZPdOQ](https://www.youtube.com/watch?v=WrxZ4AZPdOQ)

tutorial:
[https://www.youtube.com/watch?v=eKtsY7hYTPg](https://www.youtube.com/watch?v=eKtsY7hYTPg)

~~~
lbebber
This is not a single shader, the animation is done with JS/canvas 2d, the
shader does just the refraction.

I wrote an article about it here[1], but I made this back when I was first
learning WebGL (it was my first WebGL project, in fact), so be aware that a
lot of things could be better!

[1][https://tympanus.net/codrops/2015/11/04/rain-water-effect-
ex...](https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/)

~~~
pier25
This is great material, thanks!

------
garaetjjte
Looks similar to [https://tympanus.net/codrops/2015/11/04/rain-water-effect-
ex...](https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/)

~~~
dahart
Yeah, you're right. Perhaps it's one and the same. Some of the textures
downloaded here match the textures in that article.

------
kossTKR
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 super smoothly while my 3000 USD
mpb struggles? And why can Chrome do it while Safari can't when it should have
native access to GPU api's ?

~~~
lbebber
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](https://codepen.io/stefanweck/pen/Vbgeax)

~~~
kossTKR
Interesting. Speed is still about 40% in Safari and 60% FF compared to Chrome
with this version. Much better than the 2d-canvas version though and looks
pretty fluid.

Would be pretty weird if the osx native browser didn't hardware accelerate
while Chrome does it on a MPB, but Apple are often weird like that.

------
TheRealPomax
The physics look pretty good, except for the few frames where a drop impacts
the "window". They look too weirdly instanteous, and way too elastic for water
on glass.

------
pier25
Looks great.

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

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

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

~~~
SubiculumCode
Thanks! Didn't find that.

------
koala_man
Am I missing something? I expected a technical description of how to do this,
but instead I just see a simulation with no further explanation or links to
it.

------
crazygringo
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?

~~~
lbebber
(Author here) Thanks! I was making a version with a better "impact" effect and
better "trails", which are the weakest parts currently in my opinion, as well
as making the larger raindrops sharper—they get a bit blurry right now. I
haven't had the time/will to finish it though!

~~~
bscphil
>which are the weakest parts currently in my opinion, as well as making the
larger raindrops sharper

I actually came here to comment on the blur on the edges of the large drops.
My guess was it was a fast way to give a passable result for the more
complicated refractions occurring at the edge of the drop. Is there a link at
which I can follow your work? Thanks!

~~~
lbebber
It actually did not have anything to do with being resource intensive or such,
it had to do with looks—with the raindrops sharp I had to get the parameters
of the refraction perfectly right, it seemed, for it to look convincing,
otherwise it looked extremely artificial and kind of "flat".

By that point I had already spent more time on this than I'd have liked, and
allowing for a little blur was an easier way for it to look good enough.

I haven't been doing any "public" work lately, but I'll post anything I make
on my Twitter[1], especially if I ever get to finish this updated version.

[https://twitter.com/lucasbebber](https://twitter.com/lucasbebber)

------
sizzzzlerz
Pretty realistic save for one nit-picky detail. The refraction of background
scenery into the larger raindrops doesn't change from the top of the window to
where the drop falls off at the bottom. Yes, I know that would take an insane
amount of computation for every drop but it would be cool.

~~~
jayd16
I worked on a similar effect in a mobile VR game. Blade Runner: Revelations on
Daydream.

This vfx is actually pretty simple but quite satisfying. Having the drops
refract based on look angle is what really pushes it over the edge.

------
aw3c2
This is very cool but where is the context, where is the how this was made?

The realism is so-so. Big raindrops do not accumulate smaller ones well enough
when touching. And there is no splash.

------
Sephr
I use this effect in my Android live wallpaper app, Rainpaper. It supports
weather synchronization, reddit integration, custom backgrounds (including
video), and muzei extensions.

You can see the app at [https://rainpaper.com](https://rainpaper.com)

~~~
aleatorisch
Nice, I wondered if someone had done this. One request I have for the app
would be the ability to select a local folder and have the app cycle though
all the pictures in it. Being able to change the picture more often (like
every 10 minutes) would be great too.

Awesome app overall though!

------
AdamSteel
I would pay money for this as an Android Live Wallpaper, especially if you
could choose your own image to go behind the rain!

~~~
sazers
Attention about high CPU usage on smartphones

~~~
CyberShadow
Probably a pre-rendered video would do better.

Since seeking is not required, it could do away with keyframes entirely.

~~~
sazers
For sure, even a good .gif file

------
tobyhinloopen
Nobody wants to have their back- and forward keys "hijacked" to undo/redo
their changes in rain-sounds...

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

------
kmfrk
Be cool if you could pay to view this without a background so you could
overlay it on videos, livestreams, etc.

------
justinjlynn
Reminds me a lot of boodler (<[http://boodler.org/>](http://boodler.org/>))
but with visual component. I wish generative audio landscapes were a more
popular thing to construct in general. Thanks heaps for sharing!

------
pbw
Is this just an audio simulation? The sliders don't seem to change the
graphics very much. :(

------
asafira
I've read before that they used to use the sound of bacon cooking on a skillet
to mimic the sound of rain in movies. I think I can hear it...

------
akeck
Very smooth on iPhone 7 Safari. Only thing odd is that the larger drops are
faceted like cut glass.

------
sporkologist
Is the thunder being generated? That's the most interesting part IMHO.

~~~
anonytrary
Are all of the sounds being generated? They sound like recordings, but I
didn't wait long enough to check for a loop.

~~~
garblegarble
Looks like it's a few MP3s being mixed together, each quite long. e.g.
splashing-rainfall160.mp3

~~~
anonytrary
Ah, yeah it sounds like that, thanks for checking. I suspected they were
recordings because adding the window effects also adds unwanted non-window
background effects. I'd have guessed a generator would keep each effect as
distinct as possible from the others.

------
platz
pretty great.

Something about the distribution of the droplets and the movement doesn't seem
"random" enough. it seems pretty "regular" for lack of a better word.

The drops themselves look amazing.

------
DarkContinent
Where's the code for this? Anything open source?

~~~
shmerl
For audio at least, it uses a bunch of recordings (as mp3) and combines them
in different ways.

Example (it's using an IP for some reason):
[http://142.44.247.245/sounds/rain/rainbest160.mp3](http://142.44.247.245/sounds/rain/rainbest160.mp3)

Not sure what the license is for the sound, so can't say whether it's free or
not.

For playback it's using jplayer, which is open source:
[http://jplayer.org](http://jplayer.org) (I'm surprised their site doesn't
list support for Opus).

------
amelius
Rain in movies is the opposite: it doesn't hit the camera viewport, but makes
the street wet.

I'm wondering which would be more interesting to watch. Perhaps a combination
of the two.

------
tootie
WebGL is pretty amazing.

------
wild_preference
One problem with simulation is that it's super resource intensive,
particularly more than a video. It turns my laptop's fans on quickly which
then fights for my attention with the relaxing audio and makes me acutely
aware that I'm killing my battery and putting unnecessary load on my computer.

Maybe a better middleground is to use an animation with transparency that you
can instead overlay any background, like a looping gif.

~~~
lbebber
This has not been done in the most optimal way—it could do with a lot less JS
being used. A version with (mostly) WebGL could be much less resource hungry.

Try this version for comparison:
[https://codepen.io/stefanweck/pen/Vbgeax](https://codepen.io/stefanweck/pen/Vbgeax)

------
s1nceri7y
i think this site would be much better than that
[https://mynoise.net/NoiseMachine/campingRainNoiseGenerator.p...](https://mynoise.net/NoiseMachine/campingRainNoiseGenerator.php)

------
ggggtez
The UI/UX on this is pretty awful.

It seems like when you change the settings, it can take 15 or more seconds to
take effect.

