05 Data becomes vertices

Vertices: really changing the geometry

This time we move the mesh’s actual vertices.

Wave height0.28

00.55

Wave frequency5.00

110

Runs once per vertexDrag numbers, or edit the code

void main() {
  vec3 p = aPosition;
  p.z += sin(p.x * 5.000 + uTime) * cos(p.y * 5.000) * 0.280;
  vColor = aColor;
  vUv = aUv;
  vNormal = uNormalMatrix * aNormal;
  vec4 world = uModel * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = uProjection * uView * world;
}

void main() {
  vec3 p = aPosition;
  p.z += sin(p.x * 5.000 + uTime) * cos(p.y * 5.000) * 0.280;
  vColor = aColor;
  vUv = aUv;
  vNormal = uNormalMatrix * aNormal;
  vec4 world = uModel * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = uProjection * uView * world;
}

JS side

gl.uniform1f(uTime, 0.00)
gl.uniformMatrix4fv(uModel, …) // rotation -0.35 / -0.80

The vertex shader really moves the mesh’s vertices; a fragment shader can only change colour, never shape.

Try it

Set the height to 0: the surface goes flat again
In the vertex code, change sin to abs(sin(...))