Shaders: Distortion using UVs

Summary: This article covers distorting textures using UV coordinates and a noise texture. In Unity and Unreal.

Usually I distort textures using the screen pixels or grab pass from the render pipeline. That is expensive to do. Since you force those pixels to go through more processing after they have almost passed through the render pipeline once again. I found this extremely simple and cheap method of just moving the UVs of the texture around using a noise texture whose UV are moved in time. Thereby distorting the original texture.

The UVs of the texture are responsible for the how the texture is wrapped around the model. If you move the UVs the texture wrapping also moves.

With just scaling and moving the UVs, the textures can be distorted. We’ll distort the textures using a noise texture then move the noise texture over time to get a wave like effect. Since the noise texture is input as greyscale the white values make the UVs move the most and black stays where they are. Moving the entire noise texture on top of that gives the distortion, a wave like pattern. This can be used for Water, flags, grass, and other effects in Games.

Here’s the link to the texture I used from Google Open Creative Commons depot free for download.

https://en.wikipedia.org/wiki/UV_mapping#/media/File:UV_checker_Map_byValle.jpg

Reference: This tutorial was inspired by Ben Cloward who I met at the last GDC. He is one the best sources for anyone learning shaders in any Rendering Engine, including Game Engines’ like Unity or Unreal.

Here’s a link to his Unity’s Youtube Shader series. https://youtube.com/playlist?list=PL78XDi0TS4lEBWa2Hpzg2SRC5njCcKydl&si=_6mK9tq7-P5dbu6d