He can't really do that with the present approach. :)
Each 'drop' of rain is really a circle painted using the reflection scaled to the size of the drop. This approach is very fast, but won't scale well with odd-shaped drops and larger drops. With a small enough spherical drop, it's a good enough approximation for refraction.
With larger drops, you'd start to notice that the reflection isn't a refraction (i.e. the reflection is cutout in the shape of a circle, rather than truly refracted as in a drop of water).
Other approaches could be adding more expensive texture transforms, or WebGL + a refraction shader for bigger and/or non-spherical drops.
Obviously at this point we should begin ray-tracing.
Re:Rainyday.js
by devindotcom on Tuesday September 24, 2013 @02:59AM
(#6436442)
I'll call John Carmack.
I would add that its not realistic as raindrops combine because of surface tension when they touch each other :(
One thing I noticed in the second demo is that the rain drops move too perfectly in the diagonal. I'm assuming the effect is to represent wind, which doesn't typically blow at a constant angle and speed.
Overall a wonderful demo.
Re:Rainyday.js
by IgorPartola on Monday September 23, 2013 @01:59PM
(#6432854)
Not if you wax/RainX the surface :)
Re:Rainyday.js
by saltyknuckles on Monday September 23, 2013 @10:29PM
(#6435531)
Come on dude lets not get picky this is beautiful.
Re:Rainyday.js
by digitalboss on Tuesday September 24, 2013 @03:20AM
(#6436503)
It's feedback, why else would he post on HN - great start.
Re:Rainyday.js
by saltyknuckles on Tuesday September 24, 2013 @10:30AM
(#6438103)
Sometimes you show people things to show people things.
The rain drops are too spherical as they traverse the screen. The friction plus surface tension of a water on glass pulls the tail out significantly farther then represented and also varies on whether the drop is following a path that's already been traversed and therefore has less friction. It would be really really cool to see that effect added in.