A shader that visualizes water drops on surfaces using HDRP, Shader Graph, and VFX Graph
There are three VFX graphs that can be used:
- Flow VFX graph that simulates droplets of water running down a surface
- Drips VFX graph that simulates ripples of water when drips hit a puddle
- Dots VFX graph that simulates drops of water splashing on a dry surface
The Flow VFX graph doesn't use strips or trails but instead texture smearing to imitate trails of water. This is done to make advantage of the "Tile/Warp" block in VFX graph in order to make the texture almost seamless. Ensuring to have a seamless texture allows us to save a sample when blending between the texture chunks.
The drops in the VFX graph jiggle from left to right, slow down occasionally and change brightness randomly to simulate droplet residues when running down a surface.
The Drips and Dots VFX graphs spawn particles within an area and fade them out over time.
There is one shader implemented in Shader Graph that implements various features.
- UV Top: Maps the top texture (either drips or dots) using the geometry's UV data.
- UV Side: Maps the side texture (flow texture) using the geometry's UV data.
- Triplanar: Maps the top and side textures using the world position and normal combined with a blending factor.
- World XZ Top: Maps the top texture using the world position.
- Biplanar: Maps the top and side textures using the world position and normal combined with a blending factor.
- Drips: Uses the texture generated by the Drips VFX graph that simulates ripples
- Dots: Uses the texture generated by the Dots VFX graph that simulates drops of water on a dry surface.
This is an optional effect that refracts the image using the "scene color" or "grab pass" implementation. This effect isn't strong and can be toggled off for opaque surface or when performance should be improved further.
Next to colouring the fluid it is possible to set its smoothness and the overall wetness. The normal strength defines how the normal map gets generated from the heightmap.
The custom Shader GUI allows you to change between the shader's opaque and transparent variant. Next to that you can choose a diffuse and normal map including their tilings. You can also tint the surface and add a base smoothness.
The fluid texture is R8G8B8A8_UNorm because it uses all RGB channels but only needs low precision per channel. It also doesn't use stencil or depth information and, therefore, doesn't need them.
The custom shader GUI gets rid of the broad GUI HDRP materials have. While this takes away some control it also allows you to focus on the shader specific properties. It also properly groups data for the material. The "Surface Type" option is still included to make it possible to have windows and other transparent surface with water flowing down.
In the Unity project you can find the scene "_Scenes/Scene_DemoStage" which contains a working setup of the effect. For the effect to work the GameObject "System/FluidTextures" in the scene contains a controller that manages the fluid texture for the effect and contains the VFX graph simulations as child. It is possible to make this GameObject a prefab for easier usage in new scenes.
When using the shader it is advisable to choose the mapping that fits the mesh best. However, while triplanar mapping works in most situations it is also the solution that requires the most texture samples. If the geometry has UVs that generally follow gravity along the y axis it is possible to choose the desired uv mapping.
The most versatile implementation of this effect is the triplanar variant. However, as said in the section before, it is the variant with the highest sample count. To reduce this sample count it isn't strictly required to fall back to UV mapping. This depends on the further situation of the games effects and shaders.
For example: Dithered mapping. Dithered mapping might sound cheap but it allows to reduce the effective sampling count to one. While it still needs to either sample a texture or read a dither matrix this can be shared among many shaders that use similar effects. This mapping is especially useful when using temporal anti-aliasing as it allows for using blue noise textures. Their hardly recognisable repetition combined with the frame blending of TAA hides the dithering adequately.
It is a balance between memory and runtime calulations. At the moment the VFX graphs run in the background and are rendered using secondary cameras. It is possible to bake the VFX graphs in textures and interpolate them in the shader, however, this increases texture data compared to the current implementation. Especially the Dots VFX Graph can be baked into a texture as it hardly animates anything but rather only shows drops at varying times.
With more time I would properly spend time in investigating proven baking approaches for this kind of animated textures. At the moment I am weary to feature interpolation over texture rendering.
Next to triplanar mapping we can map the texture using the UV data. However, depending on its layout it may lead to water running up- or sidewards. To fix this you either have to manually author the UV channels or to create an automatic UV baking. Such an implementation could struggle with curved geometry though and would need proper testing with a broad spectrum of geometry first.
If desired it would be possible to reduce texture and rendering impact by reducing the features the shader provides such as the different texture types.
Used to generated testing textures such as "Tex_TestDrop" and "Tex_TestFlow". It was also used to generate the "Drop" texture for the Drips VFX graph.
Researching water flow images and videos for inspiration and visual approximation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent