[HN Gopher] Show HN: WebGL simulation of rainy autumn day/evening
___________________________________________________________________
Show HN: WebGL simulation of rainy autumn day/evening
Author : maxraz
Score : 316 points
Date : 2020-07-29 12:22 UTC (10 hours ago)
(HTM) web link (pluvoir.netlify.app)
(TXT) w3m dump (pluvoir.netlify.app)
| henearkr wrote:
| Is there any relation with the effect used in pluvior.com?
| rimliu wrote:
| This reminded me of the different site I liked so much:
| https://1976design.com/. 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:
| https://1976design.com/blog/colophon/
| controlledchaos wrote:
| 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!
| maxraz wrote:
| I wish I had a MAC to test, anyway thank you.
| eminence32 wrote:
| Happens on Chrome on Windows too, so it's not likely a
| Safari-specific issue
| IvoDankolov wrote:
| It's due to the day/night buttons being anchor tags as
| opposed to any Safari-specific issue.
|
| If you wanted to keep the the ability to link to specific
| states, but avoid the history issue, you'll need to use the
| History API -- https://developer.mozilla.org/en-
| US/docs/Web/API/History/rep...
| kristiandupont wrote:
| I love these, nicely done! For reference, I consider DriveClub
| state of the art when it comes to rain simulation:
| https://www.youtube.com/watch?v=hViwrRGfuHU
| ricklamers wrote:
| That's so incredibly awesome. All in real-time with everything
| else going on in the scene. True masterpiece of modern game
| technology.
| rhacker wrote:
| Pretty cool!. Only one glitchy part, the bottom of the screen
| seems to have a few drops that appear and disappear at random,
| that's the only thing that took me out of the realism.
| donalhunt wrote:
| Can't tell the difference between the screen and my window (it's
| rainy here today!). Nice!
| windock wrote:
| Really well done, thank you!
| madjam002 wrote:
| Beautiful, bookmarking this!
| jcun4128 wrote:
| Man that's crazy, trying to figure out how you make something
| look like glass/water. Also moving your mouse around on desktop
| gives it added feel of depth/realism the pane of glass.
| eggfriedrice wrote:
| Nice Scotland simulator!
| filleduchaos wrote:
| Safari on macOS isn't playing any sounds, apparently because
| you're not requesting for some permission?
| murermader wrote:
| The sliders don't work on Google Chrome on Android 10.
| rnotaro wrote:
| Sliders are for the audio.
| dbrgn wrote:
| That looks / sounds great!
|
| Are the sounds based on samples, or procedurally generated?
| rnotaro wrote:
| It seems that it'S samples as seen from the credits at the
| bottom : https://pluvoir.netlify.app/credits.html
| acidburnNSA wrote:
| My question too. This loads really fast and is really smooth.
|
| I've been using https://mynoise.net/ for years as a paying
| customer for this kind of thing and am always happy to see
| other movement in this tech.
| IvoDankolov wrote:
| Lovely effect! Particularly enjoyed how it seems to 'fake'
| 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.
|
| One caveat is the merging of the drops sometimes looks quite
| unnatural, but I'm not sure there'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're bridged, deforming pretty
| unevenly.
| lbebber wrote:
| There was an attempt of making the drops merge more naturally,
| but it was affecting the refraction effect, which I deemed was
| more important.
|
| It should be solvable though, I just couldn't get the values
| right at the time.
|
| (Also thanks!)
| talolard wrote:
| I opened this and said wow out loud. Really cool!
| williesleg wrote:
| It works about as well as digg.
| ibdf wrote:
| Looks pretty good, I do see some weird rain drops blinking on the
| bottom half of the screen (latest version of Chrome).
| anticristi wrote:
| Anyone else felt like wiping the screen of their smartphones?
| Well done!
| lbebber wrote:
| Hi, I'm the author of the rain effect (not of the website itself
| though).
|
| You can see the original effect here[1], along with an
| explanation here[2].
|
| If you like it, you can see a few more effects and experiments on
| my portfolio here[3], although it's been a couple of years now
| since I've done anything of the sort (that I can post publicly,
| that is).
|
| [1] https://tympanus.net/Development/RainEffect/
|
| [2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-
| ex...
|
| [3] http://lbebber.github.io/
| nomel wrote:
| That story map is beautiful!
|
| I have a somewhat unrelated question. Do you ever see the world
| moving to rendering content completely on a WebGL canvas, for
| better control and with the ability to circumvent ad blockers?
| lbebber wrote:
| Hmmm I'm not sure if it could be properly used to circumvent
| ad blocking, after all the ads will still probably come from
| a separate request which one could block.
|
| However I do see it being used for web apps that prioritise
| performance--in terms of providing a smooth experience,
| rather than load times. I think Figma already does that
| (through emscripten or wasm, I'm not sure); for it to be more
| widespread, only the tooling has to catch up (e.g. React
| Native).
| lbebber wrote:
| Also thanks, I'm particularly proud of that map hahah
| AndrewStephens wrote:
| I agree, that map is amazing. I particularly like the way you
| can see exactly where the photos were taken.
| lifeisstillgood wrote:
| I am totally blown away by this - I just had WebGL pegged as
| 'draw shapes on canvas, sometimes with colour'.
|
| Thank you :-)
| dgellow wrote:
| You should check https://www.shadertoy.com/, you will be
| amazed :)
| dave_sid wrote:
| Brilliant
| dave_sid wrote:
| I wish this was what I was doing!
| OJFord wrote:
| Is the submission actually adding anything of substance to your
| work then? It seems basically the same but with a background
| image, and parameterisation sliders (that I can't get to work
| anyway).
| lbebber wrote:
| Well it has sound it seems, which might actually be more
| important depending on what you're looking for.
| ebg13 wrote:
| The sliders are for sound, not visual parameters.
|
| This site just combines the visual effect with some sound
| recordings. See the bottom of
| https://hipstersound.com/premium.html
| ChrisMarshallNY wrote:
| That's really cool! Thanks for sharing it!
| Sephr wrote:
| I ported this effect to Android in a live wallpaper called
| Rainpaper[1].
|
| [1] https://rainpaper.com
| lacoolj wrote:
| yo i love everything on codrops especially these. thank you for
| sharing with the world :)
| _the_inflator wrote:
| Cool work, very nice!
|
| It seems that not all your projects, that are download-able,
| are on Github. Why is that?
| lbebber wrote:
| There's no good reason, to my shame. But now that you
| mention, I think I'll get around to it and do it this week.
| Might be a good opportunity to round down a few rough edges
| here and there as well.
| svenfaw wrote:
| Very nicely done. It even works fine in IE11!
| jeffschofield wrote:
| For those that feel inspired, there's a good article by Lucas
| Bebber that breaks down how this kind of rain effect can be made
| in WebGL here:
|
| https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
| lbebber wrote:
| Hey, I'm the author--thanks for posting this here.
|
| The page actually uses the exact same effect, so the article
| provides a decent breakdown of how it works, for those
| interested.
| hombre_fatal wrote:
| The drops flicker in OSX Chrome 84 for me. Works in other
| browsers.
|
| Not surprising though. This 2017 Macbook Pro'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's one reason I'm still playing Morrowind (2002).
| spanhandler wrote:
| My 2014's Intel graphics handles games newer than that without
| graphical artifacts... Unity games in particular are usually
| fine.
|
| However, if you're already playing Morrowind (or OpenWM) then
| you don't really need anything else.
| jmkerr wrote:
| Same here, Vivaldi is flickering and smooth. Safari works
| correctly at a noticeably lower frame rate.
|
| I have found that Vivaldi uses the Macs Intel GPU, and Safari
| is CPU bound. WebGL 2.0 experimental support in Safari doesn't
| seem to have any effect.
| lbebber wrote:
| It _is_ really weird, that didn't use to happen either. Started
| happening after some update of either Chrome or macOS, I'm not
| certain which.
|
| In fact I think this is one of the most frustrating things of
| working with WebGL (or any of those slightly less common
| browser APIs, really), lots of small weird compatibility issues
| and instabilities.
| mistercow wrote:
| The same thing happens for me on my 2018 MBP, whether I turn on
| the discrete GPU or not.
| weinzierl wrote:
| 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]
|
| The accompanying video tutorial[2] is super interesting too as
| well as the HN discussion at the time [3].
|
| [1] https://www.shadertoy.com/view/MdfBRX
|
| [2] Link to first part:
| https://www.youtube.com/watch?v=eKtsY7hYTPg
|
| [3] https://news.ycombinator.com/item?id=15564148
| lbebber wrote:
| It has already been posted by jeffschofield, but the original
| is here[1], along with a brief article breaking down the
| effect[2].
|
| The one you posted is in many ways nicer though due to it all
| being a single shader, however it has the downside of the drops
| not interacting with each other.
|
| [1] https://tympanus.net/Development/RainEffect/
|
| [2] https://tympanus.net/codrops/2015/11/04/rain-water-effect-
| ex...
| weinzierl wrote:
| I remember that I have seen that before, but I don't remember
| when. Seems to be from 2015 while "The Drive Home" is from
| 2017.
| technicolorwhat wrote:
| Hahha i was like. This is the "drive home" Martijn is an
| exceptional explainer I like his channel a lot. A great
| resource if you want to start programming shaders.
| bullen wrote:
| Don't miss the audio origin: https://defonic.com
| DGKSK8LIFE wrote:
| Wow this is super nice. Make sure to use this as a portfolio
| project!
___________________________________________________________________
(page generated 2020-07-29 23:00 UTC)