为什么在 Three.js 中平面能产生“起伏效果”？

在 Three.js 里，我们经常用顶点着色器给平面加上"波浪起伏"的效果。

但很多初学者会问：

👉 明明片元着色器没变，为什么光靠顶点着色器，就能让平面像水面一样起伏？

1. GPU 的基本绘制单位：三角形

在 GPU 渲染里，所有几何体最终都会被拆成三角形。

一个平面并不是一整块，而是由很多小三角形拼接而成的。
每个三角形由 3 个顶点决定。
只要顶点动了，三角形的形状也会随之改变。

👉 三角形不是固定的刚体，而是会随顶点移动而"变形"的柔性单元。

2. 顶点着色器：移动顶点的位置

顶点着色器的工作就是决定每个顶点在屏幕上的位置。

如果我们在顶点着色器里加上一个函数（比如 sin 波动），就能让顶点在 z 方向上下浮动：

ini 复制代码

uniform float uTime;
void main() {
  vec3 newPos = position;
  newPos.z += sin(position.x * 2.0 + uTime) * 0.5;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}

每个顶点位置变了 → 三角形的形状也随之改变。
当一大堆三角形被一起拉伸、压缩，就像一张布被掀起，形成了起伏。

3. 为什么视觉上是连续的？

关键就在于 三角形的可变形性 + 光栅化插值。

三角形可变形
- 如果三个顶点高度不同，三角形的平面就会"倾斜"或"扭曲"。
- 这意味着顶点之间的空间会自然填充，而不是断裂。
光栅化插值
- GPU 在把三角形映射到屏幕像素时，会对顶点属性（位置、颜色等）做插值。
- 顶点之间的像素不会突兀，而是平滑过渡。

因此，哪怕只改变顶点，三角形本身的变形和插值机制，就能保证你看到的不是零散的点，而是连续的波浪效果。

4. 顶点数决定效果细腻度

少量三角形：如果平面只有两个三角形（4 个顶点），位移之后表面会显得"折角明显"，像折纸一样。
大量三角形：如果平面有 100×100 个小格子（2 万个三角形），每个顶点都能单独上下运动 → 整体效果就会非常光滑自然。

👉 三角形越多，网格越密，视觉效果越连续。

5. 总结

GPU 世界的基本单位是 三角形。
三角形不是刚性的，它会随着顶点移动而变形。
顶点着色器改变顶点高度 → 三角形随之变形 → 光栅化插值让像素平滑过渡 → 你看到的就是连续的起伏效果。

一句话概括：

平面几何就像由无数会弯曲的"小三角布块"拼成的布。

当顶点着色器拉高或压低顶点时，这些三角布块就会跟着变形，拼合起来的整张布就产生了自然的波浪起伏。