Shader Animation

The usual method of making shader animation is to use time parameter and sin wave function. It’s fast and easy to make simple periodical animation, such as water wave and flashing color. However, to have more complex periodical animation, we need to shape sin wave function with min(), max(), abs(), and the sin function it self. It might requires a lot of works to shape it. I figured out a simpler way to input the animation parameters: texture.

We can think the period of an animation is from 0 to 1. That’s the uv’s range. The animation input value is the texture’s RGB channel’s value. For example, If I have a texture like this:

It’s a 1x512 picture. It is divided into 4 segments. The first segment is in [0, 128), and the RGB linearly increase from 0 to 255. The second segment is in [127, 255), and the RGB value is all 255. The third segment is in [255, 284) and the RGB values change from 255 to 0. The final segment’s value is all 0.

This represents a period of animation, the input starts with 0, increase to 1, go down to 0, and stays as 0.

The advantage of this method is highly customizable and reduced the complex math calculation of shaping the sin wave. The disadvantage is that the animation is static unless we change the texture. Of course we can assemble multiple 1 pixel height texture into a whole 512 x 512 texture, so that we can have 512 different input, but it requires more work on making textures.

UV Distortion

source: https://twitter.com/Fakirgnome/status/1120421374571495426

It’s a quite interesting method to make some water-like effect on a plane. We can use distortion to create water-like effect and a mask to limit the effect area, like a pond on a plane.

FOW

Another attempt to update the Fog of War is to convert all data updates to a texture, and render the fog based on this texture. It will include the opened area, fog-covered area, fog-disappearing area. Shader only renders what it is told and does not render any animation.

Calculating the NoL is a start to make the color interact with the light source’s position and rotation, such as sunset and sunrise effect.

half NoL = saturate(dot(normalWS, lightPos));