Ocean 1: a surface made of waves

Every game ocean starts with the same idea: the water is a height field. For every spot (x, z) on the sea there is one number, the height h of the surface there. Animate that number and the sea moves.

The simplest wave is a sine: sin(position * frequency + time * speed). The position has to be measured along the direction the wave travels, and that is exactly what a dot product gives you: dot(xz, direction).

One sine looks like a corrugated roof. The trick that makes it look like water is to add several, each with its own direction, frequency, speed and a smaller amplitude: long slow swells with short fast ripples riding on them.

float waveH(float2 xz)
{
    float h = 0.0;
    h += 0.30 * sin(dot(xz, float2(0.80, 0.60)) * 0.9 + time * 1.1);
    h += 0.20 * sin(dot(xz, float2(-0.60, 0.80)) * 1.4 + time * 1.3);
    // ...three more, smaller and faster
    return h * 0.5;
}

Here you draw the height field seen from above, as a map: dark where the water is low, bright where it is high. Next lesson you stand in it.