in Shaders, Unity |

Shader Showcase Saturday #5: Dripping Rain

The first time I played Diablo 2 I remember how impressed I was to see rain causing ripples on the river just behind the Rogue Encampment. But only when I looked closer I realised that those ripples were not actually caused by any raindrop. Both ripples and raindrops were simply unrelated. As it often happens, improving graphics in modern computer games is not a quest for realism: it’s all about believability.

When it comes to 2D games, creating ripples in water is relatively easy, as that is often done with particles. But for 3D objects, things are a little bit more complicated. Since meshes can be curved, is hard to have particles following those shapes correctly. Technically speaking, such an effect could be perfectly simulated with physics, but as we have seen already, fluid simulations are expensive and hard to control.

This is why most games in which you see water slowly dripping on a 3D surface often rely on shaders.

If this is your first time approaching shaders, I highly encourage you to read A Gentle Introduction to Shaders, which will get you started.

VFX Artist Klemen Lozar has created a photorealistic raindrop shader (below) in Unreal Engine 4, which features three main effects. The first one is the presence of tiny droplets which can be seen at all time on the material. The second is the sudden appearance of short-lived droplets that simulates incoming raindrops. Finally, rain streaks are dripping downwards, following the model’s geometry.

Klemen has explained how these effects were achieved in a follow-up thread (below), where he also provided a nice animation. A rain streak pattern is encoded in a texture which is then applied on top of the material. By offsetting the Y coordinate of the texture over time, it is possible to simulate a downward movement. This is a very common technique which is called UV offset, since the X and Y coordinates of a texture in a shader are referred to as U and V. By using a noise texture, the UV coordinates of the rain streaks texture are distorted to give the illusion that drops are moving erratically. There are several tutorials on this blog that will teach you how many different effects can be implemented by simply playing with the UV coordinates. If you are interested, LCD Shader Effect might be a good starting point.

The appearing drops are done with a different technique. Klemen relies on a grid texture in which the colour of each square is used to decide the “arrival time” of the raindrop.

The above-mentioned effect is perfect for objects with complex geometries. However, it can be tricky to use on flat surfaces. This is because heavy rain is not simply drawn onto a 3D model. Realistic Rain Storm is the perfect asset for photorealistic rain, as it uses particles to simulate not just the ripples caused by raindrops, but also their ground splashes. This gives a new dimension to a rainy landscape, and it works perfectly for VR. That is because most flat effects that look perfect on a screen can appear unnatural in VR, since they lack depth.

A big step forward has been made by Taizyd Korambayil, who crafted a shader which simulates rain streaks based on the inclination of a model. In the video below you can see how the same shader blends between raindrops and rain streaks on the fly, with exceptionally believable results.

Taizyd wrote two articles which describe how to recreate his effect. In the tutorial titled Rainy Surface Shader – Part 1, he explains how to recreate the ripple effect that appears on horizontal surfaces. He uses a similar, yet different approach from Klemen. I highly encourage you to look at both versions, as there is a lot to learn on how to master the art of shaders. The most interesting bits are in Rainy Surface Shader – Part 2 where Taizyd explains how he achieved the “slope awareness” seen in his video. He simply blends between the horizontal raindrop effects and the vertical rain streaks, based on the inclination of the mesh surface. To be more technical, the strength of both effects is modulated by the surface normal of the face being rendered, expressed world space. This means that the concept of “horizontal” and “vertical” depends on the inclination of the objects in the world.

A similar technique is often used to procedurally textures on complex landscapes. It is called triplanar shading, since it usually blends three textures, based on the alignment of the surface normal to the X, Y or Z axis. MinionsArt made an amazing animation that shows how this effect works.

If you are looking for a more technical explanation, Tech Artist Ben Golus wrote an article titled Normal Mapping for a Triplanar Shader which explains how to really master this technique.

The problem with both the rain effects seen so far is that they only apply to a single material. Another great asset that allows avoiding that is Rain. The name is simple, but the asset delivers high-quality distortions that are perfect to simulate heavy rains.

Another key aspect to the believable of raindrops is to ensure that they change the look of the materials like real water would do. What this means is actually different based on which material is affected by water. For metal surfaces, this means reducing their metallic value close to zero, and increasing the smoothness to give a shinier look. However, this is not what happens to fabric, which becomes darker but retains its original roughness and metallicity. Below, you can see a beautiful rendering made by Sina Mehralinia in Houdini, where the water drops indeed change the physical look of the material below.

One of the best assets that you can use to replicate the look and feel of wet surfaces is Raindrop Wet Surface. It is perfect for flat surfaces, both natural and metropolitan. It is perfect to simulate puddles on concrete, tarmac and even bricks. It can also be animated to transit from a dry to wet, and the shape of the puddle can be modelled using an additional texture.

From the Asset Store…

💖 Support this blog

This website exists thanks to the contribution of patrons on Patreon. If you think these posts have either helped or inspired you, please consider supporting this blog.

Patreon Patreon_button
Twitter_logo

YouTube_logo
📧 Stay updated

You will be notified when a new tutorial is released!

📝 Licensing

You are free to use, adapt and build upon this tutorial for your own projects (even commercially) as long as you credit me.

You are not allowed to redistribute the content of this tutorial on other platforms, especially the parts that are only available on Patreon.

If the knowledge you have gained had a significant impact on your project, a mention in the credit would be very appreciated. ❤️🧔🏻

Write a Comment

Comment