Shader Learn

00 序章:GPU 如何绘制画面

你会亲手写出这颗星球

它由一段顶点 shader 和一段片元 shader 画成。拖动画布转一转。

讲解

这门课写给会 JavaScript 或 C/C++、但还没写过 shader 的人。每一课左边是实时画面,右边是正在运行的代码:代码里的数字可以直接拖动,代码本身也可以直接改。

  1. 01片元与数据
  2. 02用数学画形状
  3. 03时间、交互与重复
  4. 04纹理与噪声
  5. 05从数据到顶点
  6. 06空间、相机与深度
  7. 07表面与光照
  8. 08Three.js 帮你做了什么
  9. 09多遍渲染
  10. 10片元的其他输出
  11. 11常见陷阱与调试
  12. 12从画面到配方
  13. 13综合练习
  14. A附录

整门课都在拆解这颗星球:数据 → 顶点 → 光栅化 → 片元 → 输出。最后一课你会亲手改写它。

试一试

  • 留意山峰和水面:亮度是一层一层的,不是连续渐变
  • 从目录里任选一章开始,随时可以回来

作者 @huozhi