05 从数据到顶点

顶点着色器：改变几何形状

这次改变的，是网格顶点的真实位置。

起伏高度0.28

00.55

起伏频率5.00

110

每个顶点运行一次拖动数字，或直接改代码

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 这一侧

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

顶点 shader 改变的是网格顶点的实际位置；片元 shader 只能改颜色，不能改形状。

试一试

把高度调到 0，曲面变回平面
在顶点代码里把 sin 改成 abs(sin(...))