在 Three.js 中，我们经常使用 顶点着色器来给平面添加“波浪起伏”的效果。很多初学者会疑惑：
明明片元着色器没有改变，为什么光靠顶点着色器，就能让平面像水面一样起伏？
下面我们来详细解释原理。
1️⃣ GPU 的基本绘制单位：三角形
- 在 GPU 渲染里，所有几何体最终都会被拆成 三角形。
- 一个平面并不是一整块，而是由很多小三角形拼接而成。
- 每个三角形由 3 个顶点决定。
- 顶点移动会改变三角形的平面朝向，但 三角形本身永远是平面，不会内部弯曲。
⚠️ 注意：单个三角形不可弯曲，但多个三角形拼接的效果可以让平面呈现连续起伏。
2️⃣ 顶点着色器：移动顶点的位置
顶点着色器的核心作用是 计算每个顶点在屏幕上的位置。
例如，我们可以在顶点着色器中加入一个正弦波函数，让顶点沿 Y 轴上下浮动：
uniform float uTime;
void main() {
vec3 newPos = position;
newPos.y += sin(position.x * 2.0 + uTime) * 0.5;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}
- 每个顶点的位置被修改
- 每个三角形的平面方向随之改变
- 相邻三角形顶点高度不同 → 拼接出折面 → 视觉上就像布被掀起，形成波浪或山峰效果
3️⃣ 为什么视觉上连续？
-
三角形折面：
- 单个三角形仍然平面
- 多个三角形共享顶点 → 折面拼接 → 形成连续曲面
-
光栅化插值：
- GPU 渲染时会对顶点之间的属性（位置、法线、颜色）进行插值
- 像素之间的过渡平滑 → 即使三角形平面存在折角，也不会出现突兀的断裂
结合折面拼接 + 光栅化插值 → 我们看到的就是平滑连续的波浪效果。
4️⃣ 顶点数决定细腻度
-
顶点太少：
- 如果平面只有 2 个三角形（4 个顶点），顶点位移后曲面折角明显 → 看起来像折纸
-
顶点足够多：
- 如果平面有 100×100 个小格子（2 万个三角形），每个顶点都能单独上下运动 → 整体波浪非常平滑自然
🔑 原理：三角形越小，折面越细，视觉效果越连续。
5️⃣ 总结
- GPU 世界的基本绘制单位是 三角形
- 三角形不可内部弯曲，但顶点移动会改变三角形平面方向
- 多个三角形共享顶点 → 折面拼接形成曲面
- 光栅化插值 → 光滑过渡
- 顶点数越多 → 曲面越平滑 → 视觉上就像布或水面起伏
一句话概括：
平面几何就像由无数平面的“小三角布块”拼成的布。顶点着色器移动顶点，高低起伏 → 三角布块折叠 → 整体布面呈现自然波浪效果。
该文章由AI生成
