TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: WebGL simulation of rainy autumn day/evening

393 点作者 maxraz将近 5 年前

24 条评论

lbebber将近 5 年前
Hi, I&#x27;m the author of the rain effect (not of the website itself though).<p>You can see the original effect here[1], along with an explanation here[2].<p>If you like it, you can see a few more effects and experiments on my portfolio here[3], although it&#x27;s been a couple of years now since I&#x27;ve done anything of the sort (that I can post publicly, that is).<p>[1] <a href="https:&#x2F;&#x2F;tympanus.net&#x2F;Development&#x2F;RainEffect&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tympanus.net&#x2F;Development&#x2F;RainEffect&#x2F;</a><p>[2] <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><p>[3] <a href="http:&#x2F;&#x2F;lbebber.github.io&#x2F;" rel="nofollow">http:&#x2F;&#x2F;lbebber.github.io&#x2F;</a>
评论 #23987543 未加载
评论 #23988749 未加载
评论 #23989646 未加载
评论 #23990288 未加载
评论 #23987684 未加载
评论 #23988603 未加载
评论 #23991200 未加载
评论 #23991875 未加载
hombre_fatal将近 5 年前
The drops flicker in OSX Chrome 84 for me. Works in other browsers.<p>Not surprising though. This 2017 Macbook Pro&#x27;s integrated gfx (Intel Iris Plus Graphics 640 1536 MB) seems incapable of rendering any 3D games after 2010 without flickering at some point. It&#x27;s one reason I&#x27;m still playing Morrowind (2002).
评论 #23987424 未加载
评论 #23988824 未加载
评论 #23992073 未加载
评论 #23988722 未加载
weinzierl将近 5 年前
Not sure if it is the original but the source where I first saw this rain effect was on ShaderToy - The Drive Home by Martijn Steinrucken aka BigWings[1]<p>The accompanying video tutorial[2] is super interesting too as well as the HN discussion at the time [3].<p>[1] <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>[2] Link to first part: <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><p>[3] <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=15564148" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=15564148</a>
评论 #23986957 未加载
评论 #23993258 未加载
评论 #23986792 未加载
jeffschofield将近 5 年前
For those that feel inspired, there&#x27;s a good article by Lucas Bebber that breaks down how this kind of rain effect can be made in WebGL here:<p><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>
评论 #23986809 未加载
controlledchaos将近 5 年前
Toggling the options seems to add records to the browser history, which means it takes a bunch of taps on the back button in safari to get out of the app. Otherwise, really cool!
评论 #23986254 未加载
IvoDankolov将近 5 年前
Lovely effect! Particularly enjoyed how it seems to &#x27;fake&#x27; refraction by sampling higher or lower from the background based on the drop shape. The trails squishing back into raindrops to simulate surface tension is also a pretty nice touch, though perhaps a bit over-exaggerated.<p>One caveat is the merging of the drops sometimes looks quite unnatural, but I&#x27;m not sure there&#x27;s any simple way to represent that as just a couple of textures and a transformation, as real drops would have attractive forces on a molecular level pulling them towards one another once they&#x27;re bridged, deforming pretty unevenly.
评论 #23986873 未加载
rimliu将近 5 年前
This reminded me of the different site I liked so much: <a href="https:&#x2F;&#x2F;1976design.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;1976design.com&#x2F;</a>. On the top there is header which used to reflect the real weather conditions outside. It is no longer functional, but you can read some about it in the colophon: <a href="https:&#x2F;&#x2F;1976design.com&#x2F;blog&#x2F;colophon&#x2F;" rel="nofollow">https:&#x2F;&#x2F;1976design.com&#x2F;blog&#x2F;colophon&#x2F;</a>
eggfriedrice将近 5 年前
Nice Scotland simulator!
kristiandupont将近 5 年前
I love these, nicely done! For reference, I consider DriveClub state of the art when it comes to rain simulation: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=hViwrRGfuHU" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=hViwrRGfuHU</a>
评论 #23988392 未加载
jcun4128将近 5 年前
Man that&#x27;s crazy, trying to figure out how you make something look like glass&#x2F;water. Also moving your mouse around on desktop gives it added feel of depth&#x2F;realism the pane of glass.
ibdf将近 5 年前
Looks pretty good, I do see some weird rain drops blinking on the bottom half of the screen (latest version of Chrome).
donalhunt将近 5 年前
Can&#x27;t tell the difference between the screen and my window (it&#x27;s rainy here today!). Nice!
dbrgn将近 5 年前
That looks &#x2F; sounds great!<p>Are the sounds based on samples, or procedurally generated?
评论 #23987233 未加载
评论 #23990809 未加载
anticristi将近 5 年前
Anyone else felt like wiping the screen of their smartphones? Well done!
rhacker将近 5 年前
Pretty cool!. Only one glitchy part, the bottom of the screen seems to have a few drops that appear and disappear at random, that&#x27;s the only thing that took me out of the realism.
awiesenhofer将近 5 年前
neat! I particularly love the visual appeal of night mode - reminds me of &quot;Night&quot; scenes in old movies where you still could see shadows and sunlit surfaces because of daylight filming: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Day_for_night" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Day_for_night</a>
filleduchaos将近 5 年前
Safari on macOS isn&#x27;t playing any sounds, apparently because you&#x27;re not requesting for some permission?
DGKSK8LIFE将近 5 年前
Wow this is super nice. Make sure to use this as a portfolio project!
murermader将近 5 年前
The sliders don&#x27;t work on Google Chrome on Android 10.
评论 #23990790 未加载
talolard将近 5 年前
I opened this and said wow out loud. Really cool!
svenfaw将近 5 年前
Very nicely done. It even works fine in IE11!
madjam002将近 5 年前
Beautiful, bookmarking this!
windock将近 5 年前
Really well done, thank you!
Akcium将近 5 年前
Looks very realistic!