Settings

Theme

Making rain simulation as real as possible

rainbowhunt.me

632 points by sazers 7 years ago · 132 comments

Reader

geofffox 7 years ago

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 7 years ago

    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 7 years ago

      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.

  • PatientChance 7 years ago

    WOW this is a surprise... What a small world! I used to watch you and Dr. Mel on WTNH Ch 8 many years ago when I lived in CT. I still think of you guys every time I'm back in CT and turn on the 11pm news. You are fantastic and always entertaining. I always looked forward to watching you predict whether I'd have school the next day. Thank you for the memories.

    • geofffox 7 years ago

      I am blushing. The people of Connecticut were very kind to me and I will be forever grateful.

      • timmaah 7 years ago

        The Geoff Fox? You came to my house in Durham when I was a kid and interviewed my mom for some moon landing story. I think we saved a seltzer can you drank for a few months.

        • geofffox 7 years ago

          It is very cool for me to hear that something I did years ago was memorable for your family. Thanks for saying hi.

  • Insanity 7 years ago

    That sounds really cool actually!

    How did you end up building such a studio at home etc? Sounds like a lot of work to me!

    (Always cool to see what kind of people hang around here on HN as well!)

    • geofffox 7 years ago

      I am very unusual in that I'm comfortable on both sides of the camera. What I learned is building a studio is an IT project!

      Maybe the most unusual part is, none of this would work unless I could run the show by myself. My TriCaster is programmable with macros which is what I've done. I am my own director while on the air.

      Oh -- with a friend I created a map making system which runs on an i5 and produces ~ 40,000 maps a day. Here are some samples I threw together a few months ago. These are 100% produced using FOSS including the map databases and fonts! https://drive.google.com/drive/folders/172O4Xl35np8RnbRi07PD...

      My last computer class was as a senior in high school, 1967-68 semester. This was BEFORE computers had screens.

      • mxstbr 7 years ago

        Wow this is super interesting, you should do an AMA!

      • voltagex_ 7 years ago

        This doesn't look like any map system I've seen - can you share details on your renderer?

        There's a lot of untapped potential in geospatial (even with Google taking most of the mindshare)

        • geofffox 7 years ago

          Sure -- It's a multistage process making a graphics sandwich. The meteo data is done by GrADS. I render these at full HD resolution-- 1920x1080.

          The base map and overlay are both produced in QGIS using the NaturalEarth database. Because GrADS can't read geographical info from graphics they are built by hand and the parameters are entered into GrADS by hand.

          Animations are made from still png frames using ffmpeg.

          OpenSans is my font.

          All of this runs on an i5 with 8Gb of RAM under CentOS7. I make around 40,000 maps a day (one per frame in the animations).

          I am 68 years old. My only computer training came 51 years ago. This is all self taught.

      • Insanity 7 years ago

        That is really amazing! My hat off to you!

        I agree with the others here that an AMA might be worth it :)

      • bscphil 7 years ago

        I would be thrilled to see some of the code for your map system, if you feel like open sourcing it on Github or the like. Even a verbal description of it would be great. It looks really great!

        • geofffox 7 years ago

          If you wrote code like mine you wouldn't want it seen. I have borrowed freely from others, especially the College of DuPage whose entire site (except satellites) is on github. Their code is well written and documented.

          • jonathanpoulter 7 years ago

            Not meaning to be rude, it sounds like you're going strong and providing a great service. But if you retire in future do you plan on handing down your code and setup to someone?

            • geofffox 7 years ago

              I haven't thought about it. I have a business in mind for the maps which would keep them in demand. More about that in my AMA I suppose.

              I am very happy with my life and where we live. I really don't want develop a big business. Can I just be an artisinal meteorologist?

    • geofffox 7 years ago
      • lighttower 7 years ago

        Your location is embedded in the photos you shared on drive. Scarlett Irvine.

        • geofffox 7 years ago

          OK. I can put on coffee.

          Seriously, I was on TV in Connecticut for nearly 30 years. Where I lived was common knowledge. I'd often meet someone whose friend had told them I lived in their neighborhood.

          Only once did someone knock on my door just to say hello. Most people are respectful and there are dozens of other clues to where I live since I run a business there.

          I appreciate your concern, really.

        • eternalny1 7 years ago

          Just Google Geoff Fox, it's not like he's trying to be secretive.

  • lbebber 7 years ago

    (author) Hey, I could help with that. I was beginning to work on a better version of it a while ago, but haven't gotten around finishing it.

  • Sephr 7 years ago

    I made exactly what you're asking for: https://rainpaper.com

  • mikehollinger 7 years ago

    Fascinating. How’d you land that gig?

    • geofffox 7 years ago

      I've been doing this over 35 years and have seven Emmys. They got someone they shouldn't be able to afford and working from home I could afford to accept it. I'm a pancreatic cancer survivor (Whipple) and this flexibility helps.

      I am a professional. My job is to forecast their weather and I am diligent in that pursuit. Windows are overrated.

      • geofffox 7 years ago

        In response to Lane -- Pancreatic cancer is the worst. It is incurable in 2018! I was very lucky that it was found before it spread.

        It was removed in a six hour, two surgeon operation called a Whipple. It was pioneered in the 1930s. Back then they lost about 1/3 on the table. Only about 1/3 of pancreatic patients can receive a Whipple and only about a third of those have my result. Only 9% live beyond five years.

        The Whipple is considered the most difficult operation a surgeon can perform. The docs who do this are hospital all-stars.

        On day one I told my doctors (with cancer you get an army of doctors) I wanted to aggressively go at it.

        I had a catheter port inserted in my chest for IVs (like chemo or with my CTscans). It's been used over thirty times. When I take a blood test it's commonly a dozen vials or more.

        My treatment ended around a year and a half ago. I am certifiably cancer free, though my body knows how to make pancreatic cancer and could do it again.

        I am missing a few internal parts. Whipple surgery reconnects some parts of the digestive system differently than original factory specs. With half a pancreas I shoot insulin 4-5 times a day (no big deal). My right pinkie will be tapped for blood drops around 1,500 times this year.

        I am the luckiest person you will meet today. And, it's a kickass diet. I lost 35 pounds.

        Because I am old I am on Medicare. I subscribe to a Medicare Advantage program, which means I limit myself to an HMO's doctors in return for paying less for services. I would think my medical care had to cost over $500,000. I paid ZERO. I do pay for some drugs -- thousands a year -- but my army of doctors were paid by the government.

        People shouldn't go broke or need GoFundMe because they get sick. The US needs Medicare for all. Insurance just means we all share the risk for the few that need it.

        • cockatoo2 7 years ago

          The republicunts don't believe in healthcare for sick people.

          • sctb 7 years ago

            We've banned this account.

          • geofffox 7 years ago

            The fact that we need GoFundMe campaigns for people who get sick or that veterans beg for charity through Wounded Warriors upsets me to no end. A modern, successful democracy should take care of its people.

      • lanewinfield 7 years ago

        Wow, this is such a fascinating story. I'd totally subscribe to an AMA.

        Glad to hear you've kicked cancer's ass.

        • geofffox 7 years ago

          Point me in the right direction. I'd love to do an AMA -- except I'd take questions on the site and answer via YouTube live or something similar. That way I could demo any studio questions live.

          Where can I get info on doing one?

          Also, sneakily, I have other ideas for where my studio can be used beside traditional outlets, especially since I make a full suite of weather maps. This would give me a chance to explain.

          • voltagex_ 7 years ago

            With your setup, Twitch or YouTube Live would work. Take the questions on Reddit or similar beforehand (with an established channel you've got other ways of taking questions, but for a new set up it's a bit trickier).

          • spike021 7 years ago

            I think typically they're done on Reddit these days, but I bet you could do this kind of questions post you refer to on HN and then follow up with a link to a video or stream.

            • geofffox 7 years ago

              Already found a great article on 'how-to.' I will.

              It's second nature to me, but most people are sort of stunned when they see a broadcast quality studio in my (former) garage.

              • spike021 7 years ago

                I think that's pretty awesome myself. Closest I've been to that kind of setup is back in.. either middle or high school tech class. We had a separate indoor sound-proofed "room" used for a broadcast channel just for school. Cool stuff.

      • andremendes 7 years ago

        This is impressive and cool, I really would like to read more about it. You should write a blog!

lbebber 7 years ago

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/

  • bglusman 7 years ago

    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/

    • shawn 7 years ago

      Hah.

      Thank you for finding that.

      Welp. It's identical. I even tried to defend the current link with "Well, some cool things can happen when you hook up a UI to a shader..." but the UI doesn't even do anything except turn the rain off and on.

      There's lightning too in that other one! That's so cool.

  • dclowd9901 7 years ago

    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.

    • lbebber 7 years ago

      This got me started: https://webglfundamentals.org/

      You've probably come across it though, as it does seem to gloss over some basic stuff. But it does cover the basics pretty well, just gotta keep an eye for details and seemingly unimportant one-liners that turn out to be fundamental.

      It also takes some googling for deeper explanation of some functions, which often result on Stack Overflow answers by the author himself.

      Dealing with the WebGL API itself is a bit... let's say tricky, though. But working with shaders for me is a joy.

      This also seems promising, though I only skimmed over it: https://thebookofshaders.com/

      And also, look into https://shadertoy.com/. Both for using the shaders there as example and as a playground.

    • JoBrad 7 years ago

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

      • lbebber 7 years ago

        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 7 years ago

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

video: https://www.youtube.com/watch?v=WrxZ4AZPdOQ

tutorial: https://www.youtube.com/watch?v=eKtsY7hYTPg

garaetjjte 7 years ago

Looks similar to https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...

  • dahart 7 years ago

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

kossTKR 7 years ago

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 7 years ago

    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

    • kossTKR 7 years ago

      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.

  • Nullabillity 7 years ago

    Looks fine for me on Firefox/Linux.

  • dathinab 7 years ago

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

  • ghettoimp 7 years ago

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

  • taneq 7 years ago

    Runs fine in Firefox for me, nice and smooth. Seems to use ~30% CPU on all four cores but the GPU fans don't spin up audibly. Windows 8.1 / Core i5-4590.

  • pmontra 7 years ago

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

  • werdnapk 7 years ago

    Firefox on Mac... runs perfect.

TheRealPomax 7 years ago

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 7 years ago

Looks great.

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

  • SubiculumCode 7 years ago

    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.

koala_man 7 years ago

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 7 years ago

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 7 years ago

    (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 7 years ago

      >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 7 years ago

        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

    • crazygringo 7 years ago

      If you ever get a chance, I'd love to read a "making of" blog post -- how you started, what approaches worked/didn't, what you're measuring success against, and remaining challenges... Think it would be super-educational and fascinating!

      • lbebber 7 years ago

        It's been a while since I made this, but it's a good suggestion! Rest assured that there was hardly any method to it though, mostly hair-pulling when things did not look quite good! (which is, for me at least, the biggest pain in working with this kind of thing)

        But there are some neat tricks which, while not necessarily transferable themselves, might serve as inspiration for other problems.

  • Tempest1981 7 years ago

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

sizzzzlerz 7 years ago

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 7 years ago

    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 7 years ago

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 7 years ago

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

  • aleatorisch 7 years ago

    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 7 years ago

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

tobyhinloopen 7 years ago

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

universenz 7 years ago

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 7 years ago

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

justinjlynn 7 years ago

Reminds me a lot of boodler (<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 7 years ago

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

asafira 7 years ago

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 7 years ago

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

sporkologist 7 years ago

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

  • anonytrary 7 years ago

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

    • garblegarble 7 years ago

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

      • anonytrary 7 years ago

        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 7 years ago

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 7 years ago

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

  • shmerl 7 years ago

    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

    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 (I'm surprised their site doesn't list support for Opus).

amelius 7 years ago

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 7 years ago

WebGL is pretty amazing.

wild_preference 7 years ago

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.

s1nceri7y 7 years ago

i think this site would be much better than that https://mynoise.net/NoiseMachine/campingRainNoiseGenerator.p...

ggggtez 7 years ago

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.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection