10 ms·
Making rain simulation as real as possible
- ggggtez 8y agoThe 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.
- AdamSteel 8y agoI would pay money for this as an Android Live Wallpaper, especially if you could choose your own image to go behind the rain!
- sazers 8y agoAttention about high CPU usage on smartphones
- CyberShadow 8y agoProbably a pre-rendered video would do better. Since seeking is not required, it could do away with keyframes entirely.
- pier25 8y agoThis could probably be solved at the GPU
- sabersei2 8y agoin the credits u should put the link of Lucas as the first one, since this is basically a rip of from the Codrops demo. (like most if not all the things u post)
- dsamarin 8y agoYou might really enjoy Rainpaper then. It lets you choose a background or download popular images from Reddit. But my favorite feature is the integration with Dark Sky so the rain and intensity is activated when it really is raining. https://play.google.com/store/apps/details?id=org.oftn.rainpaper https://play.google.com/store/apps/details?id=org.oftn.rainp...
- TheRealPomax 8y agoThe 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.
- geofffox 8y agoI 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.
- mikehollinger 8y agoFascinating. How’d you land that gig?
- geofffox 8y agoI'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.
- lanewinfield 8y agoWow, this is such a fascinating story. I'd totally subscribe to an AMA. Glad to hear you've kicked cancer's ass.
- geofffox 8y agoPoint 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.
- spike021 8y ago
- tootie 8y agoWebGL is pretty amazing.
- aw3c2 8y agoThis 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.
- kossTKR 8y agoLooks 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 ?
- Nullabillity 8y agoLooks fine for me on Firefox/Linux.
- deleted 8y ago[deleted]
- ghettoimp 8y agoThanks much -- I was watching this in Firefox on MBP and didn't realize how cool this was until seeing it again in Chrome.
- pmontra 8y agoFirefox Android, it looks good. Sony Xperia Compact from 2016, don't remember the model.
- lbebber 8y agoThis 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 8y agoInteresting. 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.
- garaetjjte 8y agoLooks similar to https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
- dahart 8y agoYeah, you're right. Perhaps it's one and the same. Some of the textures downloaded here match the textures in that article.
- dahart 8y agoIs 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 8y agoThis 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-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
- pier25 8y agoThis is great material, thanks!
- deleted 8y ago[deleted]
- wild_preference 8y agoOne 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 8y agoThis 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
- platz 8y agopretty 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.
- kmfrk 8y agoBe cool if you could pay to view this without a background so you could overlay it on videos, livestreams, etc.
- pier25 8y agoLooks great. I was confused at first because I thought the sliders were parameters of the simulation and I wasn't hearing anything.
- SubiculumCode 8y agoI 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 8y agoYou can control the number of drops in the animation by clicking on the hamburger menu in the top-right.
- SubiculumCode 8y agoThanks! Didn't find that.
- s1nceri7y 8y agoi think this site would be much better than that https://mynoise.net/NoiseMachine/campingRainNoiseGenerator.php https://mynoise.net/NoiseMachine/campingRainNoiseGenerator.p...
- pbw 8y agoIs this just an audio simulation? The sliders don't seem to change the graphics very much. :(
- asafira 8y agoI'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...
- amelius 8y agoRain 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.
- tobyhinloopen 8y agoNobody wants to have their back- and forward keys "hijacked" to undo/redo their changes in rain-sounds...
- crazygringo 8y agoThis 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?
- Tempest1981 8y agoAgreed. Passes the Turing test for rain, if there is such a concept.
- lbebber 8y 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!
- crazygringo 8y agoIf 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 8y agoIt'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.
- bscphil 8y 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 8y agoHey, 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/
- bglusman 8y agoI 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/ http://tympanus.net/Development/RainEffect/
- shawn 8y agoHah. 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 8y agoWhat’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 8y agoThis got me started: https://webglfundamentals.org/ 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/ https://thebookofshaders.com/ And also, look into https://shadertoy.com/ https://shadertoy.com/. Both for using the shaders there as example and as a playground.
- universenz 8y agoThis 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.
- sizzzzlerz 8y agoPretty 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 8y agoI 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.
- justinjlynn 8y agoReminds 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!
- koala_man 8y agoAm 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.
- sporkologist 8y agoIs the thunder being generated? That's the most interesting part IMHO.
- anonytrary 8y agoAre all of the sounds being generated? They sound like recordings, but I didn't wait long enough to check for a loop.
- garblegarble 8y agoLooks like it's a few MP3s being mixed together, each quite long. e.g. splashing-rainfall160.mp3
- anonytrary 8y agoAh, 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.
- Sephr 8y agoI 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 8y agoNice, 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!
- akeck 8y agoVery smooth on iPhone 7 Safari. Only thing odd is that the larger drops are faceted like cut glass.
- deleted 8y ago[deleted]
- DarkContinent 8y agoWhere's the code for this? Anything open source?
- shmerl 8y agoFor 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).