Three.js Shader 循序教程

本教程使用仓库内的 Three.js r174，从 GLSL 基础开始，逐步学习二维图案、动画、noise、表面法线和 SDF。所有效果最终由 Three.js 加载并渲染。

阅读与运行

  1. 按编号阅读 shader-tutorial/ 根目录中的章节正文。
  2. 打开章节对应的 examples/ 页面，调节参数并观察画面。
  3. 到 exercises/ 完成独立练习，需要时查看同一文件末尾的参考答案。

教程正文与练习文件分开存放。正文讲解原理与示例；练习文件先说明目标和验收结果，再在末尾给出参考答案。

在 Three.js 仓库根目录启动静态服务器：

python -m http.server 8000

最小示例位于 http://localhost:8000/docs/shader-tutorial/examples/stage-00/。其余示例可从下表进入，完整网址以 http://localhost:8000/docs/ 为前缀。不要直接用 file:// 打开页面；浏览器的 ES 模块加载需要 HTTP 服务。若 8000 端口已被占用，可以换一个端口并同步修改网址。

第一部分：Three.js 与 GLSL 基础

教程 独立练习 可运行示例
01 Three.js 怎样把数据交给 Shader 练习 内置变量可视化
02 GLSL 数据类型与基本语法 练习 数据类型可视化
03 坐标空间、颜色与调试 练习 坐标空间可视化

第二部分：基础函数与二维绘图

教程 独立练习 可运行示例
04 数值映射与阈值 练习 阈值与遮罩
05 smoothstep 与平滑边缘 练习 硬边与软边
06 floor、ceil、fract 与重复图案 练习 取整与重复图案
07 距离绘图与比例修正：圆形和图片 练习 圆与图片的比例修正
08 多个图形与 RGB 叠加 练习 三个圆的 RGB 叠加

第三部分：变换、动画与纹理

教程 独立练习 可运行示例
09 二维旋转矩阵与绕任意点旋转 练习 绕点旋转
10 波浪的原理与实现 练习 波浪线与顶点位移
11 纹理采样与坐标变形 练习 纹理坐标变形

第四部分：Noise 与表面法线

教程 独立练习 可运行示例
12 Noise 的基本原理 练习 从格点到 value noise
13 常见 Noise 的结构与选择 练习 三类 noise 对比
14 多层 Noise 与常见效果 练习 多层 Noise 对比、常见效果
15 Noise 顶点位移后的几何法线 练习 位移与法线对照
16 Noise 细节法线与片元光照 练习 平面上的细节法线
17 Noise 的跨设备表现与性能 练习 精度与高频采样对照

第 15 章处理真实顶点位移后的几何法线，第 16 章处理只改变明暗细节的片元法线；两章都明确坐标空间、采样间距与光照验证。

第五部分：SDF

教程 独立练习 可运行示例
18 有符号距离函数的直觉 练习 距离、边界与描边
19 基础二维 SDF 图形 练习 圆、矩形、圆角矩形与胶囊形
20 SDF 的变换与组合 练习 变换与组合对照
21 SDF 的视觉效果 练习 带孔徽牌的距离效果
22 三维 SDF 与 Ray Marching 练习 三维距离场与逐步前进

第六部分：综合项目

教程 独立练习 可运行示例
23 动态图案海报、流动水面与程序化徽标 练习 动态图案海报、流动水面、程序化徽标

排错速查

遇到编译、比例、分段、noise、法线或 SDF 的问题，可按常见错误与排查顺序逐项定位。