数学与图形学基础
🎯 学习目标
数学基础：
- ✅ 三角函数在图形学中的应用（单位圆、atan2）
- ✅ 向量和向量运算（点积、叉积、归一化）
- ✅ 矩阵和矩阵乘法（旋转、缩放、平移）
- ✅ 坐标系和坐标变换（模型、世界、视图、屏幕空间）
- ✅ 齐次坐标
图形学基础：
- ✅ 渲染管线（从顶点到像素）
- ✅ 顶点和片段（Shader 编程基础）
- ✅ 深度测试和混合（透明度、遮挡）
- ✅ GLSL 语言（着色器语法）
- ✅ Uniform 和 Attribute（数据传递）
实战能力：
- ✅ 能编写简单着色器（实现自定义效果）
- ✅ 能优化性能（Draw Call、几何体合并）
- ✅ 能设计渲染系统（架构设计）
🗺️ 课程地图
第 0 周：数学基础回顾
└── 第 1 天：三角函数与单位圆（sin/cos, atan2, 2D 旋转）
第 1 周：向量和坐标基础
├── 第 1 天：理解向量（方向、大小、Three.js Vector3）
├── 第 2 天：向量运算（加减、点积、叉积）
├── 第 3 天：3D 坐标系（模型、世界、视图、屏幕空间）
└── 第 4-5 天：综合练习（LineRender 源码分析）
第 2 周：矩阵和坐标变换
├── 第 1 天：理解矩阵（旋转、缩放、平移矩阵）
├── 第 2 天：矩阵乘法（变换顺序、组合变换）
├── 第 3 天：齐次坐标（w 分量的作用）
└── 第 4-5 天：综合练习（相机变换、投影矩阵）
第 3 周：图形学基础概念
├── 第 1 天：渲染管线（完整流程解析）
├── 第 2 天：顶点和片段（Shader 初探）
├── 第 3 天：深度测试和混合（透明物体渲染）
└── 第 4-5 天：综合练习（自定义 ShaderMaterial）
第 4 周：渲染管线深入
├── 第 1 天：着色器语言（GLSL 语法详解）
├── 第 2 天：Uniform 和 Attribute（数据传递机制）
└── 第 3-5 天：综合项目实战（编写复杂 Shader）
第 5-6 周：实战项目应用
├── 第 1-3 天：性能优化（Draw Call、Instancing）
└── 第 4-6 天：自定义渲染系统（架构设计、资源管理）
📚 推荐资源
在线课程
WebGL Fundamentals
- https://webglfundamentals.org/
- 免费，讲解清晰，有大量交互式示例
Three.js Journey (收费，但非常值)
- https://threejs-journey.com/
- Bruno Simon 大神的课程，实战性极强
Learn OpenGL
- https://learnopengl.com/
- 虽然是 OpenGL，但概念相通，是图形学入门经典
书籍
《Real-Time Rendering》
- 实时渲染圣经，适合深入学习理论
《WebGL Programming Guide》
- WebGL 编程指南，适合初学者
实践项目
本项目代码
LineRender.tsline_shader/index.tsbase_render.ts
Three.js 示例
- https://threejs.org/examples/
- 大量示例代码，可以直接查看源码
💡 学习建议
- 动手写代码：不要只看，要亲自写代码，修改参数，观察变化。
- 使用调试工具：学会使用 Chrome 的 Spector.js 插件或 WebGL Inspector。
- 理解原理：不要只记 API，要理解背后的数学和图形学原理。
- 结合项目：将学到的知识对应到项目代码中，看看别人是怎么用的。
✅ 学习检查清单
第 0 周后
- 理解单位圆上 sin/cos 的几何意义
- 能使用 atan2 计算角度
- 理解为什么归一化向量比 sin/cos 更快
第 1 周后
- 能用 Three.js 创建和操作向量
- 理解点积和叉积的几何意义
- 理解项目中的坐标转换逻辑
第 2 周后
- 能读懂变换矩阵
- 理解矩阵乘法的顺序及其影响
- 理解为什么需要齐次坐标
第 3 周后
- 能口述渲染管线的各个阶段
- 能区分顶点着色器和片段着色器的职责
- 理解深度测试和混合的工作原理
第 4 周后
- 能读懂 GLSL 代码
- 能编写简单的自定义 Shader
- 理解 Uniform 和 Attribute 的区别和用法
第 5-6 周后
- 能识别性能瓶颈
- 能使用几何体合并和实例化优化性能
- 能设计简单的渲染类封装
记住：理论 + 实践 = 掌握！ 🚀
开始学习： 第 0 周：数学基础回顾（三角函数）