Skip to main content

GLSL

这是一份为开发者定制的 GLSL 学习路径。本教程使用 原生 Three.js 和 RawShaderMaterial，旨在帮助你彻底理解 WebGL 渲染管线和 Shader 编程的底层原理。

🎯 如何学习​

  1. 理论学习：按顺序阅读每个章节，理解概念和原理
  2. 动手实践：完成每个章节末尾的编程作业，通过实际编程加深理解
  3. 综合项目：完成所有作业后，尝试综合项目，将所学知识融会贯通

💡 重要提示：GLSL 是一门需要大量实践的技能。只看不练很难掌握！强烈建议完成每个章节的作业。

📚 作业系统​

  • 作业清单：编程作业清单.md - 查看所有作业的完整列表
  • 章节作业：每个章节末尾都有对应的编程作业
  • 难度分级：⭐ 简单 | ⭐⭐ 中等 | ⭐⭐⭐ 困难

目录​

第一阶段：GLSL 语言基础 (语法篇)​

  1. 01. GLSL 简介与环境搭建
    • 什么是 Shader？
    • 原生 Three.js 环境搭建：手动管理 Scene, Camera 和 Render Loop。
  2. 02. 基本数据类型与变量
    • float 和 int 的严格区别。
    • vec2, vec3, vec4 的使用。
  3. 03. 向量与矩阵操作
    • Swizzling (如 v.xy, v.rb)。
    • 点积、叉积、归一化等核心几何运算。
  4. 04. 输入输出变量
    • 面试必问：attribute vs uniform vs varying 的区别。
    • 在 RawShaderMaterial 中如何手动声明这些变量。
  5. 05. 着色器结构与控制流
    • main 函数。
    • 为什么应该尽量避免 if-else。
  6. 06. 常用内置函数详解
    • 插值三剑客：mix, step, smoothstep。
    • 其他必备数学函数。

第二阶段：图形学核心原理 (理论篇)​

  1. 07. 从顶点到片段：插值的魔法
    • 深入理解光栅化和线性插值原理。
  2. 08. 光照模型实战：从 Lambert 到 Phong
    • 图形学基石：环境光 + 漫反射 + 镜面光。
    • Blinn-Phong 改进模型。

第三阶段：Shader 编程实战 (应用篇)​

  1. 09. 实战：绘制第一个动态 Shader
    • 综合演练：使用原生 JS 制作一个随时间波动的彩色平面。
  2. 10. 进阶实战：三大常见 WebGL 效果
    • 菲涅尔效果：边缘发光原理。
    • 纹理流动：UV 动画。
    • 噪声溶解：伪随机函数的应用。
  3. 11. 后期处理艺术：屏幕后处理
    • 帧缓冲 (FBO) 原理。
    • 实战：灰度、晕影、像素化、色差故障风。

第四阶段：工程化与调试 (进阶篇)​

  1. 12. 调试技巧：像手术刀一样调试 Shader
    • 可视化调试：没有 console.log 怎么活？
    • 常见黑屏原因排查。
  2. 13. Three.js 源码级解析：GLSL 的工程化艺术
    • ShaderChunk：Three.js 是如何组装 Shader 的？
    • onBeforeCompile：如何对内置材质进行"微创手术"？

第五阶段：底层深造与面试 (专家篇)​

  1. 14. 进阶实战：纯原生 WebGL (No Three.js)
    • 终极挑战：脱离 Three.js，直接使用 WebGL API 绘制三角形。
    • 理解 Shader 编译、Program 链接、Buffer 绑定和 vertexAttribPointer 的繁琐细节。
  2. 15. 面试真题与避坑指南
    • 渲染管线八股文。
    • Draw Call 与性能优化。
    • 数学与图形学基础问题。