Shader Works · Shader 入门教程

这套教程从第一张纯色图案开始，逐步走到 Three.js 中的纹理、形变、光照、后处理、兼容性、调试与综合实战。每课先解释图形学原理和数据流，再给出可运行示例与分级练习。第 1–16 课正文与 139 道练习已发布。

课程目录

课次	主题	规划练习	状态
01	Hello Shader	7	已发布
02	GLSL 基础	9	已发布
03	坐标系与 UV	9	已发布
04	形状与图案（SDF）	9	已发布
05	时间与动画	9	已发布
06	纹理采样与混合	10	已发布
07	顶点着色器与形变	10	已发布
08	噪声与随机	10	已发布
09	光照与法线	10	已发布
10	后处理	10	已发布
11	性能基础与测量	7	已发布
12	跨平台与跨设备兼容	10	已发布
13	Shader 调试与日常问题排查	12	已发布
14	综合实战：魔法阵	6	已发布
15	综合实战：粒子系统	7	已发布
16	综合实战：封装材质库	4	已发布

原规划的第 12–14 课综合实战已顺延为第 14–16 课。第 11 课侧重性能成本和测量，第 13 课侧重定位与修复故障。

项目可直接复制的清单：跨平台兼容检查 · Shader 调试排查。

全系列验收记录列出本轮检查结果与复查命令；可运行 python doc/shader-tutorial/verify.py 重新检查章节数量、练习文件、三层任务和本地链接。

立即检查运行环境

在 doc/shader-tutorial/exercises/ 目录执行：

http-server -p 1000

打开 http://localhost:1000/，进入第 1–16 课练习；也可以点击“运行环境检查”。检查页验证本地 Three.js、Shader 源文件、uniform、渲染循环和窗口缩放，不计入 139 道课程练习。ES 模块和 fetch() 需要 HTTP 服务，不要用 file:// 打开。

也可以在仓库根目录执行 yarn dev，打开 /doc/shader-tutorial/exercises/。yarn build 只构建 Vite 已注册的页面，不能代替文档练习的浏览器运行检查。

exercises/vendor/ 存放从仓库依赖复制的 Three.js r185 浏览器模块及第 10 课所用后处理 addons，许可证见 vendor/LICENSE。普通静态服务器无需打包器或外部 CDN 即可加载它。

编写约定

新增课程前阅读编写指南。课程正文模板和练习模板约定解释顺序、文件结构、分级任务和验收方式。运行环境检查提供一套可以直接复制修改的页面与 Shader 源码。