• ⚠️ Mod Release Rules now apply to this board.

    All mods must include a license, source code (for executable mods), and proper attribution.

    Read the full rules here before posting.

Ocean rendering and configuration

blackrack

New Member
KSA Developer
RocketWerkz Staff
Sep 30, 2025
4
19

Rendering​

The ocean is generated using a "cascaded" fast fourier transform (FFT) approach, this is standard in ocean rendering. Multiple fourier transforms are performed, each targeting a specific range of wave sizes (from large swells down to small, choppy waves). These separate cascades are then summed together to create the final heightfield. The JONSWAP spectrum (Joint North Sea Wave Project) is used as it has multiple artist-controllable parameters to control the look and behaviour of the waves.

Mesh and tesselation​

Our spherical billboarding system is reused for the ocean waves, with separate ocean meshes setup which have the ability to snap independently from the terrain mesh. Tesselation is used to further improve mesh density near the camera.

PBR Model​

The ocean uses a PBR model based on the paper "Linear Efficient Antialiased Displacement and Reflectance Mapping", with practical guidance drawn from the GDC talk "Wakes, Explosions and Lighting: Interactive Water Simulation in Atlas". The technique derives per-pixel roughness and specular using statistics, and produces statistical maps from the FFT heightfield through filtering and mipmapping, giving antialiased and realistic shading that handle subpixel surface detail correctly, while being able to adapt in real-time to surface parameter changes (eg changing wind speed or other parameters).

Configuration​

  • Level: The water level, zero corresponds to the planet’s radius
  • Density: The water density for physics
  • Color: The water’s color, will be multiplied by the color read locally from the ColorTexture
  • ColorTexture: A color map definind the water’s color locally

    1763231725006.png
    Different water colors locally and seen from space

  • TransparencyDepth: The distance over which the water becomes opaque
  • MeshCollection: Id of the mesh collection to use

Wind waves​

  • WindTexture: A texture defining the wind speed locally, at every location the value in the texture will interpolate the current wind speed and fetch between the min and max wind speed and fetch settings. Because FFT simulations are expensive, only one simulation will rund and the speed and fetch will be selected based on the camera’s position and changed smoothly. When zoomed out, a visual representation of changes in local wind speed will be visible as local variations in the roughness/specular of the water.
    1763231774444.png
    Local variations in roughness/specular seen from space

  • MinWindSpeed: The min wind speed to use with values of 0 on the wind texture. The wind speed directly affects the look of the waves and their size.
  • MaxWindSpeed: The max wind speed to use with values of 1 (255) on the wind texture.

    1763232269827.gif

    Smoothness and wave size varying with wind speed

  • MinWindFetch: The fetch is the area over which the wind can blow uninterrupted, the larger this is, the bigger and more powerful the waves become. This is the min wind fetch to use with values of 0 on the wind texture.
  • MaxWindFetch: The max wind fetch to use with values of 0 on the wind texture.
  • Directionality: How directional the waves are relative to the wind, a value of 0 will give waves that have no dominant direction which looks a lot less realistic.


    1763232045849.gif

    Waves with direction vs without

  • Depth: The simulated depth of the ocean to compute the waves for. Unfortunately this value results in erratic changes in the simulation’s output so it cannot be varied smoothly locally like wind and fetch can.
  • FoamAmount: The amount or strength of foam to use. 0.5 is a good safe/starting value. Additional values will be added for shores and for contact foam.

Gerstner waves​

Gerstner waves is the old wave system used to initially implement/test the ocean shading, it is left in for now as a fun option, and as an example of separate data that can be combined with FFT data, however this isn’t polished or fully functional in its current state so its usage it not recommended. This will be revisited in the future to make easy-to-configure tsunami waves.


1763232034464.gif

Prototyped mixing of Gerstner waves and FFT waves
 

Rendering​

The ocean is generated using a "cascaded" fast fourier transform (FFT) approach, this is standard in ocean rendering. Multiple fourier transforms are performed, each targeting a specific range of wave sizes (from large swells down to small, choppy waves). These separate cascades are then summed together to create the final heightfield. The JONSWAP spectrum (Joint North Sea Wave Project) is used as it has multiple artist-controllable parameters to control the look and behaviour of the waves.

Mesh and tesselation​

Our spherical billboarding system is reused for the ocean waves, with separate ocean meshes setup which have the ability to snap independently from the terrain mesh. Tesselation is used to further improve mesh density near the camera.

PBR Model​

The ocean uses a PBR model based on the paper "Linear Efficient Antialiased Displacement and Reflectance Mapping", with practical guidance drawn from the GDC talk "Wakes, Explosions and Lighting: Interactive Water Simulation in Atlas". The technique derives per-pixel roughness and specular using statistics, and produces statistical maps from the FFT heightfield through filtering and mipmapping, giving antialiased and realistic shading that handle subpixel surface detail correctly, while being able to adapt in real-time to surface parameter changes (eg changing wind speed or other parameters).

Configuration​

  • Level: The water level, zero corresponds to the planet’s radius
  • Density: The water density for physics
  • Color: The water’s color, will be multiplied by the color read locally from the ColorTexture
  • ColorTexture: A color map definind the water’s color locally

    View attachment 463
    Different water colors locally and seen from space

  • TransparencyDepth: The distance over which the water becomes opaque
  • MeshCollection: Id of the mesh collection to use

Wind waves​

  • WindTexture: A texture defining the wind speed locally, at every location the value in the texture will interpolate the current wind speed and fetch between the min and max wind speed and fetch settings. Because FFT simulations are expensive, only one simulation will rund and the speed and fetch will be selected based on the camera’s position and changed smoothly. When zoomed out, a visual representation of changes in local wind speed will be visible as local variations in the roughness/specular of the water.
    View attachment 464
    Local variations in roughness/specular seen from space

  • MinWindSpeed: The min wind speed to use with values of 0 on the wind texture. The wind speed directly affects the look of the waves and their size.
  • MaxWindSpeed: The max wind speed to use with values of 1 (255) on the wind texture.


    Smoothness and wave size varying with wind speed

  • MinWindFetch: The fetch is the area over which the wind can blow uninterrupted, the larger this is, the bigger and more powerful the waves become. This is the min wind fetch to use with values of 0 on the wind texture.
  • MaxWindFetch: The max wind fetch to use with values of 0 on the wind texture.
  • Directionality: How directional the waves are relative to the wind, a value of 0 will give waves that have no dominant direction which looks a lot less realistic.


    View attachment 466

    Waves with direction vs without

  • Depth: The simulated depth of the ocean to compute the waves for. Unfortunately this value results in erratic changes in the simulation’s output so it cannot be varied smoothly locally like wind and fetch can.
  • FoamAmount: The amount or strength of foam to use. 0.5 is a good safe/starting value. Additional values will be added for shores and for contact foam.

Gerstner waves​

Gerstner waves is the old wave system used to initially implement/test the ocean shading, it is left in for now as a fun option, and as an example of separate data that can be combined with FFT data, however this isn’t polished or fully functional in its current state so its usage it not recommended. This will be revisited in the future to make easy-to-configure tsunami waves.


View attachment 465

Prototyped mixing of Gerstner waves and FFT waves
Love the water effects and when I saw the tsunami the devil in me got excited.