🧭 WebGL 学习路线图（入门 → 进阶 → 精通）
🌱 基础 → 🔧 渲染流程 → 🎨 图形进阶 → 🏗 项目实战 → 🚀 性能与封装
🌱 第一阶段：WebGL 基础入门（掌握 Canvas + WebGL 基础）
✅ 目标
能在 canvas 中初始化 WebGL，绘制基本图形（如三角形、颜色填充）。
🔑 学习要点
- WebGL 与 Canvas 的关系
- 获取 WebGL 上下文：
getContext("webgl") gl.clearColor()和gl.clear()- 坐标系统（NDC，[-1, 1]）
🔧 实践任务
- 初始化 canvas
- 设置背景色为红/绿/蓝
- 绘制一个静态三角形
🔧 第二阶段：理解 WebGL 渲染流程（Shader + Buffer）
✅ 目标
掌握完整的 WebGL 渲染管线，使用顶点着色器和片元着色器绘制图形。
🔑 学习要点
- 顶点着色器（Vertex Shader）
- 片元着色器（Fragment Shader）
- 编译/链接 shader & program
- Buffer 缓冲区、
attribute、gl.vertexAttribPointer gl.drawArrays()和gl.drawElements()
🔧 实践任务
- 绘制彩色三角形
- 使用不同坐标绘制多个图形
- 学会处理 GPU 报错调试
🎨 第三阶段：图形进阶与变换（矩阵 + 纹理）
✅ 目标
实现模型变换、纹理贴图、渐变、透明度、混合等基础图形特效。
🔑 学习要点
- 模型-视图-投影矩阵（Model/View/Projection Matrix）
- 常用矩阵库：glMatrix、twgl、three.js math utils
uniform向着色器传值- 纹理贴图：
gl.TEXTURE_2D、图片上传 GPU - 深度测试与透明混合
🔧 实践任务
- 绘制一个可旋转的正方形
- 给图形贴上一张图片纹理
- 旋转、缩放图形
- 做一个简单的坐标系轴展示
🏗 第四阶段：3D 场景与交互实践
✅ 目标
掌握创建 3D 场景、模拟相机视角、简单交互（鼠标/键盘）。
🔑 学习要点
- 使用矩阵控制相机视角（lookAt、perspective）
- 鼠标控制视角（旋转、缩放、拖拽）
- 物体坐标 → 世界坐标 → 视图坐标 → 屏幕坐标
- 帧缓冲渲染、颜色拾取（Picking）
🔧 实践任务
- 实现一个摄像机绕场旋转效果
- 模拟地球转动
- 点击选中三角形高亮
🧱 第五阶段：构建大型结构与加载外部资源
✅ 目标
支持加载模型文件、拆分多对象、多材质、多纹理。
🔑 学习要点
- 加载 OBJ / glTF 模型
- 使用
index buffer管理多个几何 - 材质系统（光照、反射、法线）
- 多个 Shader 管理
🔧 实践任务
- 加载 glTF 模型并显示（如一辆车）
- 实现基础漫反射光照
- 实现场景层级结构（例如树 → 树枝 → 树叶）
🚀 第六阶段：优化性能 & 封装工程结构
✅ 目标
编写可维护的 WebGL 应用，支持模块化、封装、优化。
🔑 学习要点
- 使用类封装 Shader/Buffer/Renderer
- 基于 requestAnimationFrame 做主循环
- 粒子系统、GPU 实时计算（GPGPU）
- Framebuffer 离屏渲染、抗锯齿
- 性能分析工具（Chrome DevTools / Spector.js）
🔧 实践任务
- 实现 1000 个粒子并实时移动
- 封装一个完整的 WebGL 应用架构（类似 three.js mini）
🛠 工具 / 框架建议（可穿插使用）
| 工具 | 用途 |
|---|---|
| glMatrix | 高性能矩阵库 |
| twgl.js | 简化 Buffer 和 Shader 操作 |
| regl | 函数式 WebGL 封装 |
| Spector.js | WebGL 调试插件 |
| Three.js | 封装库，可辅助理解底层逻辑 |
📚 学习资料推荐
- WebGL Fundamentals（强烈推荐，中文翻译好）
- LearnOpenGL（概念一样，但基于 C++）
- 《WebGL 编程指南》（红宝书）
- YouTube：The Cherno 的图形系列（逻辑通用）
🎁 最后推荐实践项目（配套练习）
| 项目名称 | 所学应用 |
|---|---|
| 三角形旋转动画 | 坐标变换、时间驱动 |
| 地球飞线可视化 | 3D 球体、飞线轨迹、动态渲染 |
| 智慧园区漫游 | 多模型、点击交互、相机切换 |
| 粒子爆炸 | GPU 加速粒子系统 |
| 模型选中高亮 | Framebuffer + Picking 技术 |
