TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Making rain simulation as real as possible

632 pointsby sazersover 6 years ago

28 comments

geofffoxover 6 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.<p>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&#x27;m the only regularly scheduled TV news anchor to work from home in the US and possibly the world.
评论 #18428656 未加载
评论 #18430233 未加载
评论 #18427892 未加载
评论 #18430325 未加载
评论 #18429952 未加载
评论 #18427884 未加载
评论 #18429116 未加载
lbebberover 6 years ago
Hey, I made this for Codrops, like 2 or 3 years ago?<p>I mean, the rain effect itself, not the whole UI around it here.<p>Edit: Here&#x27;s[1] the accompanying article, and here&#x27;s[2] some other stuff I made (although my website is also just as old and hasn&#x27;t been updated since!)<p>[1]<a href="http:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;rain-water-effect-experiments&#x2F;" rel="nofollow">http:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;rain-water-effect-experiments&#x2F;</a><p>[2]<a href="http:&#x2F;&#x2F;lbebber.github.io&#x2F;" rel="nofollow">http:&#x2F;&#x2F;lbebber.github.io&#x2F;</a>
评论 #18428598 未加载
评论 #18430159 未加载
dahartover 6 years ago
Is there any description or attribution for the shader? Are the visuals an improved version of Martijn Steinrucken&#x27;s &quot;Drive Home&quot; 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.<p>[1] shader: <a href="https:&#x2F;&#x2F;www.shadertoy.com&#x2F;view&#x2F;MdfBRX" rel="nofollow">https:&#x2F;&#x2F;www.shadertoy.com&#x2F;view&#x2F;MdfBRX</a><p>video: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=WrxZ4AZPdOQ" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=WrxZ4AZPdOQ</a><p>tutorial: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=eKtsY7hYTPg" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=eKtsY7hYTPg</a>
评论 #18428675 未加载
garaetjjteover 6 years ago
Looks similar to <a href="https:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;2015&#x2F;11&#x2F;04&#x2F;rain-water-effect-experiments&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;2015&#x2F;11&#x2F;04&#x2F;rain-water-effect-ex...</a>
评论 #18427934 未加载
kossTKRover 6 years ago
Looks good!<p>On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps.<p>Weirdly on an iPhone with Safari the performance is smooth as silk.<p>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&#x27;s still not on par with any kinds of heavy graphics.<p>I don&#x27;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&#x27;t when it should have native access to GPU api&#x27;s ?
评论 #18428603 未加载
评论 #18428262 未加载
评论 #18428618 未加载
评论 #18428527 未加载
评论 #18430618 未加载
评论 #18428552 未加载
评论 #18428448 未加载
评论 #18429871 未加载
TheRealPomaxover 6 years ago
The physics look pretty good, except for the few frames where a drop impacts the &quot;window&quot;. They look too weirdly instanteous, and way too elastic for water on glass.
pier25over 6 years ago
Looks great.<p>I was confused at first because I thought the sliders were parameters of the simulation and I wasn&#x27;t hearing anything.
评论 #18428109 未加载
koala_manover 6 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.
crazygringoover 6 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!<p>Curious if this is the best done in WebGL to date, or if there&#x27;s even better out there? Or what this does and doesn&#x27;t do, and where next obvious areas for improvement would be?
评论 #18428639 未加载
评论 #18428510 未加载
sizzzzlerzover 6 years ago
Pretty realistic save for one nit-picky detail. The refraction of background scenery into the larger raindrops doesn&#x27;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.
评论 #18428858 未加载
aw3c2over 6 years ago
This is very cool but where is the context, where is the how this was made?<p>The realism is so-so. Big raindrops do not accumulate smaller ones well enough when touching. And there is no splash.
Sephrover 6 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.<p>You can see the app at <a href="https:&#x2F;&#x2F;rainpaper.com" rel="nofollow">https:&#x2F;&#x2F;rainpaper.com</a>
评论 #18430677 未加载
AdamSteelover 6 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!
评论 #18428181 未加载
评论 #18427590 未加载
tobyhinloopenover 6 years ago
Nobody wants to have their back- and forward keys &quot;hijacked&quot; to undo&#x2F;redo their changes in rain-sounds...
universenzover 6 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 &#x2F; Tent &#x2F; Weatherboard &#x2F; Muffled Indoor &#x2F; Downpipes etc. I&#x27;ve searched for years to find something realistic, and the closest I&#x27;ve been able to find was Naturescape.. but those are real seamless loop recordings.
kmfrkover 6 years ago
Be cool if you could pay to view this without a background so you could overlay it on videos, livestreams, etc.
justinjlynnover 6 years ago
Reminds me a lot of boodler (&lt;<a href="http:&#x2F;&#x2F;boodler.org&#x2F;&gt;" rel="nofollow">http:&#x2F;&#x2F;boodler.org&#x2F;&gt;</a>) but with visual component. I wish generative audio landscapes were a more popular thing to construct in general. Thanks heaps for sharing!
pbwover 6 years ago
Is this just an audio simulation? The sliders don&#x27;t seem to change the graphics very much. :(
asafiraover 6 years ago
I&#x27;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...
akeckover 6 years ago
Very smooth on iPhone 7 Safari. Only thing odd is that the larger drops are faceted like cut glass.
sporkologistover 6 years ago
Is the thunder being generated? That&#x27;s the most interesting part IMHO.
评论 #18430809 未加载
platzover 6 years ago
pretty great.<p>Something about the distribution of the droplets and the movement doesn&#x27;t seem &quot;random&quot; enough. it seems pretty &quot;regular&quot; for lack of a better word.<p>The drops themselves look amazing.
DarkContinentover 6 years ago
Where&#x27;s the code for this? Anything open source?
评论 #18430782 未加载
ameliusover 6 years ago
Rain in movies is the opposite: it doesn&#x27;t hit the camera viewport, but makes the street wet.<p>I&#x27;m wondering which would be more interesting to watch. Perhaps a combination of the two.
tootieover 6 years ago
WebGL is pretty amazing.
wild_preferenceover 6 years ago
One problem with simulation is that it&#x27;s super resource intensive, particularly more than a video. It turns my laptop&#x27;s fans on quickly which then fights for my attention with the relaxing audio and makes me acutely aware that I&#x27;m killing my battery and putting unnecessary load on my computer.<p>Maybe a better middleground is to use an animation with transparency that you can instead overlay any background, like a looping gif.
评论 #18428744 未加载
s1nceri7yover 6 years ago
i think this site would be much better than that <a href="https:&#x2F;&#x2F;mynoise.net&#x2F;NoiseMachine&#x2F;campingRainNoiseGenerator.php" rel="nofollow">https:&#x2F;&#x2F;mynoise.net&#x2F;NoiseMachine&#x2F;campingRainNoiseGenerator.p...</a>
ggggtezover 6 years ago
The UI&#x2F;UX on this is pretty awful.<p>It seems like when you change the settings, it can take 15 or more seconds to take effect.