WebGL 完整学习路线大纲
第一阶段：前置基础（必须先掌握）
1. JavaScript 核心
- ES6+ 语法（箭头函数、解构、模块化）
- 类型数组（TypedArray：Float32Array、Uint16Array 等）
- 异步编程（Promise、async/await）
- 事件处理机制
2. 计算机图形学数学基础
- 向量数学：加减乘除、点积、叉积、归一化
- 矩阵运算：平移、旋转、缩放矩阵、矩阵乘法
- 坐标空间：模型空间 → 世界空间 → 视图空间 → 裁剪空间 → NDC → 屏幕坐标
- 三角函数：正弦、余弦、弧度制
- 线性插值：lerp、slerp
- 四元数（进阶）：万向锁问题、平滑旋转
3. HTML/CSS 基础
- Canvas 元素理解
- 事件坐标系统
第二阶段：WebGL 核心概念
4. 渲染管线理解
顶点数据 → 顶点着色器 → 图元装配 → 光栅化 → 片元着色器 → 深度/模板测试 → 混合 → 帧缓冲- 每个阶段的作用
- 可编程阶段 vs 固定功能阶段
- GPU 并行处理原理
5. WebGL 上下文与基础
- 获取 WebGL 上下文（
getContext('webgl')或'webgl2'） - 视口设置（
viewport） - 清除缓冲区（颜色、深度、模板）
- 状态机概念（WebGL 是状态机）
6. 缓冲区对象（BufferObject）
- 创建缓冲区（
createBuffer） - 绑定缓冲区（
bindBuffer） - 传递数据（
bufferData） - 类型：
ARRAY_BUFFER、ELEMENT_ARRAY_BUFFER
第三阶段：着色器编程（核心难点）
7. GLSL 语言基础
- 数据类型：float、int、bool、vec2/3/4、mat2/3/4、sampler2D
- 限定符：
attribute、uniform、varying（WebGL 1.0） - WebGL 2.0：
in、out、uniform - 内置变量：
- 顶点：
gl_Position、gl_PointSize - 片元：
gl_FragColor、gl_FragCoord - 函数与控制流：if/else、for、while、自定义函数
- 内置函数：
- 三角函数：
sin、cos、tan - 数学函数：
pow、sqrt、abs、clamp、mix、step、smoothstep - 向量函数：
length、dot、cross、normalize、reflect、refract
8. 顶点着色器
- 顶点变换（MVP 矩阵：Model-View-Projection）
- 传递数据到片元着色器（
varying/out） - 逐顶点光照计算（Gouraud 着色）
- 顶点动画（波浪、旗帜飘动）
9. 片元着色器
- 像素颜色输出
- 纹理采样（
texture2D/texture） - 逐像素光照计算（Phong、Blinn-Phong）
- 程序化生成（噪声、条纹、棋盘格）
第四阶段：纹理与贴图
10. 纹理基础
- 创建纹理（
createTexture） - 绑定与配置（
bindTexture、texParameteri） - 加载图像数据（
texImage2D） - 纹理坐标（UV：0-1 范围）
- Mipmap 生成（
generateMipmap）
11. 纹理参数
- 过滤方式：
NEARESTvsLINEAR、Mipmap 链 - 环绕方式：
CLAMP_TO_EDGE、REPEAT、MIRRORED_REPEAT - 各向异性过滤（
EXT_texture_filter_anisotropic）
12. 高级纹理
- 多纹理混合（多层贴图）
- 立方体纹理（天空盒、环境映射）
- 数据纹理（
texImage2D用 TypedArray） - 渲染到纹理（帧缓冲对象 Framebuffer Object）
第五阶段：光照与材质
13. 光照模型原理
- 环境光照（Ambient）：基础亮度
- 漫反射光照（Diffuse）：Lambert 余弦定律
- 镜面高光（Specular）：Phong / Blinn-Phong
- 光照计算公式：
Color = Ambient + Diffuse + Specular- 光源类型：平行光、点光源、聚光灯
14. 法线贴图与凹凸贴图
- 切线空间转换
- 法线贴图采样与解码（
normal = normal * 2.0 - 1.0）
第六阶段：3D 数学与矩阵系统
15. 矩阵栈与变换
- 模型矩阵（位置/旋转/缩放）
- 视图矩阵（相机位置与朝向）
- 投影矩阵（透视投影 vs 正交投影）
- 矩阵乘法顺序（
MVP = Projection * View * Model）
16. 相机系统
- 第一人称相机（欧拉角）
- 轨道相机（围绕目标点旋转）
- 相机的
lookAt矩阵构造 - 视图矩阵的逆矩阵计算
第七阶段：高级渲染技术
17. 帧缓冲对象（FBO）
- 离屏渲染
- 后期处理特效（泛光、模糊、颜色校正）
- 阴影映射（Shadow Mapping）
- 反射/折射渲染
18. 多渲染目标（MRT，WebGL 2.0）
- 一次渲染写入多张纹理
- G 缓冲区（延迟渲染 Deferred Rendering）
19. 实例化渲染（Instanced Rendering）
- 大量重复物体的高效渲染
drawArraysInstanced/drawElementsInstancedgl_InstanceID内置变量
第八阶段：WebGL 2.0 新特性
20. 核心改进
- 3D 纹理（
TEXTURE_3D） - 采样器对象（Sampler Object）
- 统一缓冲区对象（Uniform Buffer Object，UBO）
- 顶点数组对象（Vertex Array Object，VAO）
- 变换反馈（Transform Feedback）
- 直接状态访问（无需频繁
bind）
第九阶段：性能优化
21. 渲染优化
- 减少状态切换（批次合并 Batch）
- 视锥体裁剪（Frustum Culling）
- 遮挡剔除（Occlusion Culling）
- 绘制调用最小化（Draw Call Batching）
22. 内存优化
- 纹理压缩（S3TC、PVRTC、ASTC）
- 顶点数据压缩（量化）
- 资源复用与池化
23. 着色器优化
- 避免动态分支
- 减少复杂计算（预计算）
- 使用低精度（
mediump、lowp）
第十阶段：调试与工具
24. 调试工具
- 浏览器开发者工具（Performance、Memory）
- Spector.js（WebGL 调用捕获与回放）
- RenderDoc（帧调试器）
- WebGL Inspector
25. 常见问题排查
- 黑屏/白屏（检查着色器编译、矩阵、视口）
- 纹理不显示（检查图像加载、纹理坐标、Mipmap）
- 性能瓶颈定位（Draw Call 数量、纹理内存）
第十一阶段：框架与实战
26. 辅助库学习
- TWGL（减少 WebGL 样板代码）
- Three.js（理解其封装原理）
- Regl（函数式 WebGL）
27. 实战项目路径
- 简单三角形→ 理解管线流程
- 彩色立方体→ 顶点颜色插值
- 纹理贴图立方体→ 纹理采样
- 光照球体→ 逐顶点/逐像素光照
- 模型加载（OBJ/GLTF）→ 复杂网格渲染
- 粒子系统→ 大量物体实例化
- 后期特效→ 帧缓冲 + 着色器
- 简单游戏引擎→ 整合所有知识
学习路线图（建议顺序）
阶段1-2: JS + 数学基础（2-4周） ↓ 阶段3-4: WebGL 上下文 + 第一个三角形（1周） ↓ 阶段5: 着色器基础 + 变换（2周） ↓ 阶段6: 纹理与颜色（1-2周） ↓ 阶段7: 3D 空间与相机（2周） ↓ 阶段8: 光照模型（2-3周） ↓ 阶段9: 帧缓冲与后期（2周） ↓ 阶段10: 高级特性（按需学习） ↓ 阶段11: 性能优化（持续） ↓ 阶段12: 实战项目（4-8周）推荐学习资源
书籍
- 《WebGL 编程指南》（入门圣经，虽然版本老但原理扎实）
- 《OpenGL ES 3.0 编程指南》
- 《Real-Time Rendering》（进阶）
在线资源
- Learn WebGL（https://learnwebgl.brown37.net）
- WebGL Fundamentals（https://webglfundamentals.org）
- The Book of Shaders（https://thebookofshaders.com）
- ShaderToy（学习片元着色器神器）
练习平台
- CodePen / JSFiddle（快速原型）
- ShaderToy（仅片元着色器）
- 自己搭建本地服务器（避免跨域问题）
关键提醒
不要一上来就学 Three.js：Three.js 封装了太多细节，跳过底层会让你遇到性能问题时无从下手。
着色器是最核心的障碍：先写顶点着色器画一个三角形，再写片元着色器改颜色，慢慢增加复杂度。
数学不能跳过：矩阵乘法、向量点积叉积是基本功，不然后面光照和相机看不懂。
调试会比 JS 痛苦：着色器编译错误信息不友好，准备好用 Spector.js 和浏览器开发者工具。
先 WebGL 1.0 再 2.0：兼容性考虑，1.0 的 Attribute/Uniform 限制会让你理解底层机制。
结构如下：
workspace/webgl-learning/ ├── README.md # 总览导航 ├── 01-前置基础 ├── 02-WebGL 核心概念 ├── 03-着色器编程 ├── 04-纹理与贴图 ├── 05-光照与材质 ├── 06-3D 数学与矩阵 ├── 07-高级渲染技术 ├── 08-WebGL 2.0 新特性 ├── 09-性能优化 ├── 10- 调试与工具 └── 11-实战项目与资源
