Rain Ripples with normals yayyy☔️

No flipbooks or particles used:D Also already have ideas on how to remove the tiling for example. (Full explanation in the comments~)

#madewithunity #unity3d #gamedev #shader #screenshotsaturday #vfx #Realtime
I didn't really liked the approach of using a large flipbook or a realtime rendered texture for rain. Kinda seems overkill for such a small effect. Also the flipbook approach has a limited framerate on top.
But then it hit me, that a single ripple could easily be recreated with good old polar coordinates! But that's just for one ripple only, right? Well then take a look at this little texture here to the left:'D Image
Instead of using one polar coordinate system, why not put several on one texture, thats than used to sample a rain normal map (to the right). Of course there will be problems, when the wrapped rain texture reaches the edges, but that can be solved with a mask.
Also cool thing about this, for each polar coordinate tile, i can use an offset to sample the rain texture at a different point in time. Which basically results in completly unique "spawntimes" of the ripples.
To create overlapping ripples and more complexity, you'd just sample the base uv texture a second time, with a different offset and combine them.
Also i calculate the correct normal rotation with the help of this weird gradient, that defines the angle of the uvs in combination with a simple 2d matrix. Which then can be fed into the normal buffer to get the correct reflections etc.
The textures can also still be "optimized" (spacewise) if thats even necessary, as in the example above, they both are only 64x64 pixel big. So yeah. 5kb seems nicer than a 5mb 2k flipbookxD

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with FLOGELZ

FLOGELZ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(