Abstract

Sections

• Setup
• Wave Displacement
• Water Shading
• Dynamic Detail
• Underwater Rendering
• Caustics
• Godrays
• Water Cutouts
• Sources

Setup

RenderPipelineManager.beginCameraRendering += RenderSurface;

void RenderSurface(ScriptableRenderContext context, Camera camera)
{
    CommandBuffer commandBuffer = CommandBufferPool.Get("Water CMD");
    
    UpdateSurface(waterSurface, commandBuffer, context, camera);
    
    context.ExecuteCommandBuffer(commandBuffer);
    context.Submit();

    commandBuffer.Clear();
    CommandBufferPool.Release(commandBuffer);
}

Wave Displacement

You might have heard of the Fast Fourier Transform before, it has been used in dozens of games and movies after it was proposed in the 2004 paper Simulating Ocean Water by Jerry Tessendorf. I learned of it from a source I am much more familiar with; a 2023 Youtube video by Acerola, a graphics programmer entertainer; I Tried Simulating The Entire Ocean.

What must be understood before understanding the Fourier Transform is that any periodic waveform can be identically reproduced with a sum of sinusoids. The purpose of Fourier Transform, then, is to take a waveform and decompose it into that sum of sinusoids.

The output is now in the "frequency domain" which, as opposed to describing how amplitude at a given time (time domain), describes the amplitude of a wave at a given frequency. For example, for a wave of frequency 30hz we see a spike in the frequency domain at 30hz. The size of the spike is proportional to it's amplitude, as we see in the figure below.

However, even with very detailed wave spectra, we have not completely eradicated the tiling issue. It is inevitable that any periodic waveform, or sum or periodic waveforms, will repeat given enough distance. However, the FFT is so fast we can actually compute several wave spectra simultaneously and scale them over the ocean surface. The literal millions of waves all interact and distort one another virtually eradicating tiling up to an extreme distance.

As one last trick I learned from HDRP, you can define constants as part of a compute shader's kernals. I used to this give the user control over the resolution of the wave spectra and subsequent FFT passes as a graphics option.

#pragma kernel RowPass_128    FFTPass=RowPass_128                 FFT_RESOLUTION=128    BUTTERFLY_COUNT=7
#pragma kernel ColPass_128    FFTPass=ColPass_128   COLUMN_PASS   FFT_RESOLUTION=128    BUTTERFLY_COUNT=7
#pragma kernel RowPass_256    FFTPass=RowPass_256                 FFT_RESOLUTION=256    BUTTERFLY_COUNT=8
#pragma kernel ColPass_256    FFTPass=ColPass_256   COLUMN_PASS   FFT_RESOLUTION=256    BUTTERFLY_COUNT=8
#pragma kernel RowPass_512    FFTPass=RowPass_512                 FFT_RESOLUTION=512    BUTTERFLY_COUNT=9
#pragma kernel ColPass_512    FFTPass=ColPass_512   COLUMN_PASS   FFT_RESOLUTION=512    BUTTERFLY_COUNT=9

[numthreads(FFT_RESOLUTION, 1, 1)]
void FFTPass(uint3 id : SV_DISPATCHTHREADID)
{
    for (int i = 0; i < 8; i++)
    {
        #ifdef COLUMN_PASS
            _FFTTarget[uint3(id.xy, i)] = FFT(id.x, _FFTTarget[uint3(id.xy, i)]);
        #else
            _FFTTarget[uint3(id.yx, i)] = FFT(id.x, _FFTTarget[uint3(id.yx, i)]);
        #endif
    }
}

Water Shading

Dynamic Detail

Dynamic meshing is how I am refering to constructing the mesh data that will be sent to the GPU. Like using Levels of Detail to render decimated versions of objects as they get further from the camera, the same can be done to oceans only a little more complicated. Upon creating a HDRP ocean, three meshes are generated; a dense central grid, a rectangular grid mesh and a colossal outer mesh which is essentially a flat plane with a hole in it. These meshes are dynamically scaled and rotated to fill the surface.
Put together, the meshes look like this:

Underwater Rendering

Finally, we can move on to the underwater effects. Except wait, how do we know where on the screen underwater is? For example; a camera can be situated well above the water, deep below it, or directly in it leading to a complex split in the screen where some is underwater and some is not.

Unseen in this text so far is the number of iterations it took to arrive at the end result and a lot of that time was spent on this problem alone. This mostly came from general inexperience and a lack of readily available examples or articles online. At the end I came to a method which is actually quite simple and has no significant performance cost and I would be interested to know how the waterline is handled by released games.

One idea was to calculate the height at a given position from the displacement maps. However, this does not account for the horizontal component of the FFT's, or the shape of the water mesh.

So I tried to recapture the height of the surface mesh after it is rendered using a separate, orthographic camera above the view camera. Although multiple camera's does effect performance, this created the effect I wanted for a small area around the player. However, later in this project I introduced water cutouts, areas where the water would be hidden such as the inside of a submarine. This solution was unable to account for the myriad of complex ways a glass window could intersect the water surface.

My most recent attempt involves generating two masks; a position mask and a surface face mask.
The face mask is captured to a render texture in a pre-pass, which renders the ocean surface before anything else using it's own depth texture. Front/back face information is stored in the red channel; front as 1.0, back as 0.5, leaving 0 where there is no surface present. To do this, I reused the pre-pass I had already implemented to capture the surface depth, which is useful for several underwater effects.

The position mask is computed using the position of the water surface and a position computed at the maximum depth from the camera using the screen space uv coordinates.
With these two masks, I can test if a given fragment is underwater with this slightly strange logic:

bool ShouldRender(float2 uv, float sceneDepth)
{
    float surfaceMask = SAMPLE_TEXTURE2D(_SurfaceFaceMask, sampler_PointClamp, uv).r;

    if (surfaceMask > 0.9)
        return false;

    float3 skyboxPos = ComputeWorldSpacePosition(uv, 0.00001, UNITY_MATRIX_I_VP); // Tiny epsilon to remove line artefact created just under water plane.
    return surfaceMask > 0 || (_SurfacePosition.y > skyboxPos.y);
}

Note that even though branches are disadvised in GPU programs, returning a bool here means I can skip the expensive ray-marching steps mentioned later.

Using backfaces in this way does create a small issue where extremely violent FFT waves can roll in on themselves creating backfaces above the water surface. These artefacts are generally small and could be removed in a compute shader. The last approach I have considered is using some sort of vertical smearing to propagate the lowest water surface pixels on the screen downwards. This would be performed in a compute shader after the depth pre-pass has been rasterized, and combined with the position mask would create a perfect waterline, so I may revisit this section later.

Finally with that done, I simply tint the screen with an underwater absorption color using the combined water and scene depth.

Caustics

To improve both the surface and underwater visuals, we can implement caustic patterns generated by the ocean surface. 'Caustics' refer to the patterns of light created when light rays exit one medium and enter another. As it does so, the light refracts - or bends - following the shape of the surface resulting in differing areas of high and low light density.

Many games achieve this by simply mapping a precomputed, animated texture to underwater geometry. This is a quick and dirty approach which is very effective for many games, especially those where the ocean waves are constant or performance is a large concern. However, it is possible to generate caustic patterns in real-time that actually reflect the state of the ocean surface, whether calm and slow or violent and stormy.

This article by Evan Wallace describes how this can be done by constructing a dense 'virtual plane' and refracting the vertices as if travelling through water. The new and old vertex positions are then ran through a ray, plane intersection function and given to the fragment shader. The color of each fragment is then determined by the difference in area between the non-refracted plane and the refracted one, taking advantage of the fact that fragments are computed in sets of four. In Unity that looks like this:

float Frag (Varyings i) : SV_Target
{
    float intialTriangleArea = length(ddx(i.originalPos)) * length(ddy(i.originalPos));
    float refractedTriangleArea = length(ddx(i.refractedPos)) * length(ddy(i.refractedPos));

    return intialTriangleArea / refractedTriangleArea;
}

Which produces a texture like this:

This texture is closely fit to match the wave spectrum it is produced from. Since the FFT produces periodic textures, the caustics can be seamlessly tiled across the environment using a global uv system such as triplanar mapping.

Godrays

Godrays, or crepuscular rays, occur when light penetrates the water surface and is scattered outward, some of which travelling strait into your eyes. We can achieve this effect by utilizing the caustics texture we just computed, but rather than mapping it to the scene, we raymarch the texture as projected by the scene's Main Light:

float SampleGodrays(float3 positionWS, float3 lightDirection)
{
    float3 normal = float3(0.0, -1.0, 0.0);

    // Project caustics texture in light direction.
    float3 forward = refract(lightDirection, normal, 1.0 / _IndexOfRefraction);
    float3 tangent = normalize(cross(forward, float3(0.0, 1.0, 0.0)));
    float3 bitangent = cross(tangent, forward);

    float3 sampleCoord = positionWS * _TilingFactor;
    float2 uv = float2(dot(sampleCoord, tangent), dot(sampleCoord, bitangent)) * 0.5 + 0.5;

    // Sample caustics texture at a low LOD of for some free blurring.
    // This means we can get away with a larger step size because the artefacts are naturally hidden.
    return SAMPLE_TEXTURE2D_LOD(_CausticsTexture, sampler_LinearRepeat, uv, 5).r;
}

This is called from a raymarching function, including the usual upsampling and blur passes, before being composited onto the final image.

Water Cutouts

float EvaluateTriangle(int triangleIndex, float3 pos)
{
    // a, b and c are the vertices of the triangle.
    float3 a = _Vertices[_Triangles[0 + triangleIndex * 3]];
    float3 b = _Vertices[_Triangles[1 + triangleIndex * 3]];
    float3 c = _Vertices[_Triangles[2 + triangleIndex * 3]];

    float3 pointOnTriangle = ClosestPointOnTriangle(pos, a, b, c);
    float3 normal = cross(b - a, c - a);
    
    float3 v = pos - pointOnTriangle;
    float3 dirToFace = normalize(v);
    float distToFace = length(v);

    if (dot(dirToFace, normal) < 0)
    {
        distToFace *= -1;
    }

    return distToFace;
}

float SmallestPointDistanceToMesh(float3 pos)
{
    float minAbsoluteDistance = 3.40282347e+38F;
    float minDistance = 3.40282347e+38F;

    for (int i = 0; i < _NumTriangles; i++)
    {
        float distance = EvaluateTriangle(i, pos);
        float absoluteDistance = abs(distance);

        if (absoluteDistance < minAbsoluteDistance)
        {
            minAbsoluteDistance = absoluteDistance;
            minDistance = distance;
        }
    }

    return minDistance;
}

Sources

The Fourier Transform

Wakes, Explosions and Lighting: Interactive Water Simulation in Atlas

Reflection, Refraction and Fresnel

Ocean Simulation - antoniospg

Simulating Ocean Water - Jerry Tessendorf

I Tried Simulating The Entire Ocean - Acerola

Crash Course in BRDF Implementation - Jakub Boksansky

Rendering Realtime Caustics in WebGL - Even Wallace

Periodic Caustic Textures