Water Distortion 3D

Task

Create a shader that animates vertical waves moving horizontally across an image. The waves should originate from the point (0.0, 0.0), spreading outward across the texture. Use the sine function to distort the texture coordinates, with amplitude controlling the wave height and frequency defining the number of waves per unit of distance. To make the waves move over time, include the speed and iTime variables in the formula for dynamic animation.

Theory

Sine distortion is a widely used technique in the realm of computer graphics and animation to produce dynamic, wave-like effects. It applies the principles of sinusoidal motion, commonly found in wave physics, to texture coordinates, achieving visually engaging distortions. This technique is often employed to simulate rippling water or wavy surfaces.

Core Concept

The sine function $\sin(x)$ periodic nature ensures the distortion repeats consistently over a defined interval. The sine function has a period of $2\pi$, meaning it cycles through its full range (from $-1$ to $+1$ ) every $2\pi$ units. By scaling the input of the sine function using a frequency multiplier, we can control the spacing of the waves, thereby increasing or decreasing their density.

The distortion effect can be mathematically expressed as:

$ \text{distortion} = A \cdot \sin\left(x \cdot 2\pi \cdot f + v \cdot t\right) $

• Amplitude $\left(A\right)$ controls the height of the waves. Higher values result in larger distortions.

• Frequency $\left(f\right)$ determines the number of wave cycles within a unit of distance. Increasing frequency makes waves appear closer together.

• Distance $\left(x\right)$ represents the space between the origin of the wave and the point being distorted on the texture plane. This is the distance where the distortion is applied.

• Speed $\left(v\right)$ adds wave propagation over time $\left(t\right)$.

To apply this effect, the distortion value is added to the horizontal $x$ or vertical $y$ coordinates of the texture:

uv.x += distortion
uv.y += distortion

This adjustment alters the appearance of the texture, creating smooth, flowing patterns.