UE5 Niagara Ocean Waves – via @OverdrawXYZ Twitter

Originally tweeted by Ryan James Smith (@OverdrawXYZ) on 13/05/2022.

1/N Some folks asked me to share my setup in #UE5 for how I used #Niagara to generate tiling ocean waves using Fast Fourier Transforms. This thread will hopefully shine light on the process and serve as a guide to those wanting to do the same. #gamedev #realtimevfx

The method for generating tiling ocean waves using FFTs can be summed up in these steps.
1. Precompute the h0 lookup table where each texel contains the encoded values needed to represent a wave. Its called h0 because that's the variable Tessendorf gave it in the original paper.

Everything needed for the sim is stored in this texture. From it, a wave's speed, magnitude, direction and frequency can be derived based on the Texel's location and the data stored within. The dark areas are from a "spectrum" that is multiplied to produce realistic ocean waves.

2. Precompute the "Butterfly Texture" which is essentially a lookup table that is designed for fast computation of the IFFT Algorithm on the GPU. The size of the texture is log2(N)xN – so a 512×512 grid would result in a 9×512 texture. Below is stretched for visualization.

3. Now, every frame I update the Fourier components so they animate with time, then they go through the horizontal, then vertical IFFT operations. This series of operations produces the 3D Displacement map that I use to derive normals and offset the geometry.

4. For foam, I take the Jacobian of the displacement which does a really good job of detecting when the vertices "loop" in on themselves due to excessive displacement. When this happens, I add foam, which is diffused and dissipated over time. I store it in the alpha of disp. map

5. Splashes are done by spawning particles where the foam goes above a specific threshold. They get an initial velocity that is in the direction of the wind, but that whole system can be improved with better math.

Here's an overview of the whole emitter that generates the FFT.