Distortion: Distortion maps affect the position of pixels in a texture coordinate (0,1).

Flow maps: Directed **distortion maps for both the X (red) and Y (green) channels of texture coordinates.

Directional movement of pixels over time. - Keith Guerrette

Here is how a flow map works.

  1. Map the texture coordinates to the 0-1 space. Remember that texture coordinates are simply 2 gradients from 0-1 in the X and Y directions, the purpose being that they tell the shader that each pixel is unique and where it is located; then based on the UV's of the object how to apply the texture. So, if we distort the gradient (add noise, smudge it, etc. . .) we are effectively telling the shader to distort the location of the UV's of the object, thereby distorting the texture when it is applied. If you pan the texture (flow) across the now distorted UV's, the texture will be distorted per the flow map.

  2. Splitting distortion between the red and green channels (RG), distort the position of the pixels of the sampled texture according to the distortion given of the texture coordinates.

    1. In Unreal Engine, this works by take a TexCoord node, component mask it into the Red and Green channels, adding/multiplying/lerping noise into one or both channels (the distortion of the texture coordinates), append the channels back together to make the new UV base texture coordinates, and plug into the UV's sample of the TextureSample node.
    2. NOTE: The sample method set on your distortion texture (flow map) matters. In order to increase the distortion possible (ensure the full range of distortion is possible); increase the VALUE range of distortion from (0,1) (which will only distort the pixels by moving them to the right and up) by using a ConstantBiasScale node set on (Bias: -0.5, Scale: 2; (*n + Bias)Scale) to increase the range from (0,1) to (-1,1). This is similar to how a normal map is calculated on each channel (-1,1 range) to ensure that lighting interpolation occurs correctly. By doing this, you tell the shader that it can distort in the negative direction (left and down) in addition to the positive direction. Another method is to set the "0" value as 0.5 in the noise texture. Anything below 0.5 is negative and anything above 0.5 is positive distortion.

    Example of UV Distortion

    You can use a normal map as a distortion by removing the blue channel. This is a great way to create new distortions like the following:

https://twitter.com/klemen_lozar/status/987743611289681920

https://twitter.com/klemen_lozar/status/987762338596929536

Example of Flow Map Distortion

siggraph2010_vlachos_waterflow.pdf

Courtesy Alex Vlachos, Valve, Siggraph 2010 Conference

Courtesy Alex Vlachos, Valve, Siggraph 2010 Conference

Primarily an X (red) based distortion map, the red channel is heavily distorted causing the the red smears. There is some distortion along Y (green), but not a lot. See the image below to see the effect that this distortion map has on the noise texture. Courtesy Alex Vlachos, Valve, Siggraph 2010 Conference

Primarily an X (red) based distortion map, the red channel is heavily distorted causing the the red smears. There is some distortion along Y (green), but not a lot. See the image below to see the effect that this distortion map has on the noise texture. Courtesy Alex Vlachos, Valve, Siggraph 2010 Conference

Courtesy Alex Vlachos, Valve, Siggraph 2010 Conference

Courtesy Alex Vlachos, Valve, Siggraph 2010 Conference

Examples of Flow Map Distortion Applied to Water

Animating Water Using Flow Maps

Water Technology of Uncharted