on screen raindrops tutorial
in this documentation we are going to recreate the effect of raindrops hitting your camera screen and swirling down and leaving your field of view. first of all: there might be other solutions but this is the easiest one i figured out. lets start!
basic concept
particle systems
the basic concept is pretty straight forward. as already mentioned there are two steps to archieve the effect. lets start with the way the particle systems needs to be set up.
as you can see in the example above, there are different types of raindrops. some of them are smaller or bigger than the others. there are also raindrops forming and sliding down the screen. to start with you are going to create three different types of raindrops, following the settings below. of course you can change the settings as you like. these are just the settings that worked out for me.
leave the material in the renderer tab at default for now. if not already, make sure your renderer in the particle system is set to billboard. your first particle system should look something like this and be creating new particles over and over. the special thing about the particles is, that they appear in 2D, which is essential to archieve the effect.
the settings for the second particle system look like this. as you see in the scene/game view the generated particles are way bigger.
now onto the final particle system which is responsible for the sliding raindrops. following the settings your system should look something like this
shader
the second and last step is to create a shader which makes the raindrops transparent and gives them some kind of wiggle effect so they dont look static all the way. this step will be shown in hdrp but also works for urp. you just have to use a different kind of starting shader and maybe a few tweaks here and there.
lets start with the first part of the shader, the transparency. i didnt come up with the idea behind the transparent effect because it has been used many times already. i suggest you to check out existing tutorials on youtube.
your first part of the shader look something like this
in the next step you need to create a material with the shader on it.
MAKE SURE YOUR MATERIAL IS SET TO TRANSPARENT
after that you drag your created material on the materials tab in the render tab of each particle system. for the 3rd particle system you also need to add the material to the "trail" option in the renderer tab, otherwise it wont look perfect. when youve done that. you will see that your raindrops are transparent but also still have remaining edges, in particular dont have a falloff on each corner, making the particles not looking like raindrops. thats why we need a short addition to our shader, creating a falloff on the sides of the particles. thats how your shader should be looking at the moment
2nd part of the shader
to get the raindrops look like actual raindrops we need an addition to our shader graph. if you plug the following into the alpha of your shader graph you will see that you that youve created perfectly looking raindrops.
when you got this far, all you need to do is setting up the different particle systems infront of your camera. meaning you need to drag each one of them onto your main camera and reset its transformation. after that just adjust them how you like it and thats it. in the video on top i coded it, that the particles only activate once i enter a certain area on the map (box volume). if you want to know how i did that, send me a message here
i hope that my first tutorial documentation was clear and told you how to archieve raindrops in a really simple way. if you have any questions or maybe some improvements, feel free to contact me. if you are too lazy to read through the article, there even might be a youtube tutorial, if not, its on the way