Raining window shader
Type: Personal project
Time: 1 week
Language: Cg
Works involved: All aspects (Background image for demo is from https://commons.wikimedia.org/wiki/File:Buenos_Aires_at_night.JPG)
Abstract: My motivation is from a raining day that I took a photo of my raining window and I am intrigued to write a shader inside Unity without using any texture. The shader could adjust blurry level of the window, the amount of rain on the window and its transparency of the raindrop.
Time: 1 week
Language: Cg
Works involved: All aspects (Background image for demo is from https://commons.wikimedia.org/wiki/File:Buenos_Aires_at_night.JPG)
Abstract: My motivation is from a raining day that I took a photo of my raining window and I am intrigued to write a shader inside Unity without using any texture. The shader could adjust blurry level of the window, the amount of rain on the window and its transparency of the raindrop.
Final result:
Adjusting parameter for different look: (Include _Size, _Time, _Blur, _Distortion)
Process:
Motivation and reference images observation:
Motivation and reference images observation:
Breakdown the problems:
From the reference, we can see that each main rain drop is followed with a trail which is formed with multiple smaller drops in gradient scale when it's dripping down, and each main drop with the trail could appear in different position on the window. That sums up the raindrop, and for the window, when raining there is normally fog around, and when the rain drops down it will wash off the fog, the reflection of the raindrop is also opposite to the environment instead of mirror like. In this way, the raindrop and the window fog are two main things to tackle and solve.
From the reference, we can see that each main rain drop is followed with a trail which is formed with multiple smaller drops in gradient scale when it's dripping down, and each main drop with the trail could appear in different position on the window. That sums up the raindrop, and for the window, when raining there is normally fog around, and when the rain drops down it will wash off the fog, the reflection of the raindrop is also opposite to the environment instead of mirror like. In this way, the raindrop and the window fog are two main things to tackle and solve.
Divide into grid and in each cell has a dot represent the main drop, and further move its y position to make it bounce down and up in each cell. Noted the speed of main drop is not average speed, the rain drop will remain bigger and bigger and once it drops with a fast speed and stay at the new position for a while and repeat.
The trail of the raindrops are formed by 8 smaller dots in each cell and they are smoothsteped to get gradient result of dripping.
For wiggling effect of dripping, I use a sin function to replicate the drop. ( I experimented different sin function and find the similar effect that I want from the graph.
Next step is to random the wiggling since each cell is dripping the same time. Generate a random number between 0 and 1 and then add to full cycle (2 pi) of time so that each cell will drip at different time. Also when adding the wiggle, handle the wiggle to not make it go outside the cell. The closer the drop is to the center there's more wiggle. Notice that when the trail is formed, to make it more realistic, the trail will formed a white gradient represented the water moving along the trail. Set up the fogtrail so that it is along the drop and the trail.
The water effect is the dropPos*drop as offset and times a value of distortion. Set up the distortion of the raindrop and the negative value will reflect opposite of the environment, the positive vice versa. We want to set it to negative. The results are without the window blurryness. The raindrops part are done. I also set up 3 different layers of uv to combine together of the raindrops to make it more diverse.
Lastly, for blurry window, simply use tex2Dlod function to get the customized mip map and to achieve the blur effect of the texture to represent fog. And the fogtrail should be set to (1-fogtrail)*blur to make fogtrail without the blur. And it is basically done.
Thoughts:
Since I sampled the texture multiple times and averages them in order to get the blur effect, the shader is quite expensive, and might not be efficient in game or real time application. Also, when we zoom out further, the shader starts to show some kind of pixelating which I think might be able to optimize by trying to deal with the uv space pixels in close or far situations. However, I think this shader successfully replicate a real raining situation, and by breaking down the look in the beginning and using the variation of sin function, it's efficient to get the wiggling effect of raindrops.
Since I sampled the texture multiple times and averages them in order to get the blur effect, the shader is quite expensive, and might not be efficient in game or real time application. Also, when we zoom out further, the shader starts to show some kind of pixelating which I think might be able to optimize by trying to deal with the uv space pixels in close or far situations. However, I think this shader successfully replicate a real raining situation, and by breaking down the look in the beginning and using the variation of sin function, it's efficient to get the wiggling effect of raindrops.