Ocean 5: the same sea on a real mesh

In Ocean 1 to 4 there was no 3D object at all. The whole sea was drawn by the pixel shader on a flat rectangle: for every pixel you shot a ray into an imaginary sea and walked along it until you hit the waves. That is a fine way to draw an endless ocean, and it needs nothing but a pixel shader, but it is not how a game engine usually does water. Unity, Unreal and Godot draw water as a real mesh: a big grid of triangles whose vertices are lifted by waves.

The two jobs are split between the two shaders you already know from the mesh lessons:

1. vert() runs once per vertex and moves the vertex: pos.y += waveH(pos.xz). The wave function is the very same waveH as in Ocean 1. The GPU then builds the real, bumpy shape and draws it with the correct depth, so the sea can meet the shore, a boat or the camera properly.
2. frag() runs once per pixel and does the lighting: sky reflection, sun glitter, foam and haze, exactly as in Ocean 3 and 4.

The grid can only show what it can resolve

This mesh has 180 by 180 squares across 2.8 units, so one square is about 0.016 wide. A wave needs roughly eight squares to be drawn as a smooth bump; shorter than that it turns into jagged noise. So the big waves go into the geometry, and the fine ripples must not. Instead they go into the normal, the direction the surface faces, which only changes the lighting and costs nothing in vertices. This is the standard trick: geometry for the swell, normals for the detail.

Normals from the wave function

Moving a vertex does not change the normal the mesh carries, so the pixel shader works the normal out itself. The slope of the water in each direction is how much the height changes when you step a tiny distance e sideways. Measure the height just either side of the pixel, in x and in z, and build a vector from the differences:

float e = 0.012;
float3 n = normalize(float3(
    h(xz - float2(e, 0.0)) - h(xz + float2(e, 0.0)),
    2.0 * e,
    h(xz - float2(0.0, e)) - h(xz + float2(0.0, e))));

Here h is the big waves plus the fine ripples, so the ripples catch the light without touching the shape. The pixel's position comes from i_worldPos.

The rest is the same sea

With a good normal, the lighting is what you already built: a Fresnel blend between deep water color and the reflected sky (reflect(-i_viewDir, n)), a sharp sun glitter, foam on the wave tops with lacy edges from noise, and haze that grows with the distance to the camera, length(_WorldSpaceCameraPos - i_worldPos). Drag the picture to orbit around the sea and see it as a real object. Zoom in on a wave: the silhouette is real geometry, and the glitter lives in the normals.

Which approach should you use? A mesh gives correct depth, works with every other object in the scene and uses the hardware the way engines expect. The cost scales with the number of vertices, and the shape can only be as detailed as the grid. The pixel-shader ray march gives you an endless horizon and detail down to the pixel, but it cannot interact with other geometry. Real games often combine both: a mesh near the camera, and a cheaper treatment far away.