I am trying to make simple rain drop effect on screen.Something like this

My idea is to:

Create small drop shaped normal textures, randomly put few on screen, apply texture perturbation and mix with current frame pixels.

Here are my questions:

  • Does this idea even have sense? How professionals do this effect? Everything from text to code will be appreciated

  • How to pass pixels to shader of already rendered frame?

  • \$\begingroup\$ I am new to shaders but I think you could do that without offscreen rendering by passing the raindrop overlay as uniform to the fragment shader. \$\endgroup\$ – danijar Jan 8 '13 at 12:00
  • \$\begingroup\$ Please post a screenshot when you get this working. We would love to see how this plays out. \$\endgroup\$ – ashes999 Jan 8 '13 at 12:01
  • \$\begingroup\$ youtube.com/watch?v=_4cQfNVUTM8 \$\endgroup\$ – user1075940 Jan 8 '13 at 12:55

Yes, that sounds like a reasonable approach. You'll want to generate a reduced size version of the current frame, for both efficiency and quality (good filtering) in the drop shader. You'll need to render your frame to an offscreen render target, then create a copy of it that is reduced to a smaller size. (You may need to do the reduction in several steps, like generating mipmaps.)

Then, to render the drops, you'd use the normal map to calculate the sample point in the texture. You could just negate the xy components of the normal and use that as the UVs (scale-biased to the [0,1] range), but if you're feeling fancy you could try doing the actual refraction math. (There is even a refract function in HLSL that will do most of the math for you.)


Im not familier with glsl or hlsl but I have done some XNA before. An idea that comes to mind is have a separate spritebatch (Like you might use for a simple ui that is drawn ontop of everything) And draw it either over or under the ui (Depending on what you want)

From there you can draw your drops, maybe have a few different shapes pre made and have them at the biggest size you wanted and scale down to the smallest you want and generate them at random. You could then have them slide down at a semi random speed (Maybe use the same value you used for size so the bigger the drop the faster it moves) And even draw a trail behind it if you wanted


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.