Skip to main content

数学与图形学基础

📚 课程概览​

总时长： 4-6 周（每天 1-2 小时）

课程结构： 0. 第 0 周：数学基础回顾（三角函数）

  1. 第 1 周：向量和坐标基础
  2. 第 2 周：矩阵和坐标变换
  3. 第 3 周：图形学基础概念
  4. 第 4 周：渲染管线深入
  5. 第 5-6 周：实战项目应用

🎯 学习目标​

完成本课程后，你将掌握：

数学基础：

  • ✅ 三角函数在图形学中的应用（单位圆、atan2）
  • ✅ 向量和向量运算（点积、叉积、归一化）
  • ✅ 矩阵和矩阵乘法（旋转、缩放、平移）
  • ✅ 坐标系和坐标变换（模型、世界、视图、屏幕空间）
  • ✅ 齐次坐标

图形学基础：

  • ✅ 渲染管线（从顶点到像素）
  • ✅ 顶点和片段（Shader 编程基础）
  • ✅ 深度测试和混合（透明度、遮挡）
  • ✅ GLSL 语言（着色器语法）
  • ✅ Uniform 和 Attribute（数据传递）

实战能力：

  • ✅ 能分析项目代码（理解 LineRender 等核心类）
  • ✅ 能编写简单着色器（实现自定义效果）
  • ✅ 能优化性能（Draw Call、几何体合并）
  • ✅ 能设计渲染系统（架构设计）

📖 如何使用本课程​

学习方式​

  1. 按顺序学习 - 从第 0 周开始，循序渐进
  2. 每天 1-2 小时 - 不要贪多，重在理解
  3. 完成练习 - 每个练习都要动手做，尝试修改参数观察效果
  4. 查看项目代码 - 结合项目实际代码学习，理解原理在项目中的应用

课程特点​

  • ✅ 结合项目代码 - 每个知识点都对应项目中的实际代码
  • ✅ 丰富实例 - 包含 Three.js 和 WebGL 的实际代码示例
  • ✅ 循序渐进 - 从简单到复杂，图文并茂
  • ✅ 边学边用 - 遇到问题时再深入学习，不搞纯理论

🗺️ 课程地图​

第 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 天：自定义渲染系统（架构设计、资源管理）

📚 推荐资源​

在线课程​

  1. WebGL Fundamentals

  2. Three.js Journey (收费，但非常值)

  3. Learn OpenGL

书籍​

  1. 《Real-Time Rendering》

    • 实时渲染圣经，适合深入学习理论

  2. 《WebGL Programming Guide》

    • WebGL 编程指南，适合初学者

实践项目​

  1. 本项目代码

    • LineRender.ts
    • line_shader/index.ts
    • base_render.ts

  2. Three.js 示例

💡 学习建议​

  1. 动手写代码：不要只看，要亲自写代码，修改参数，观察变化。
  2. 使用调试工具：学会使用 Chrome 的 Spector.js 插件或 WebGL Inspector。
  3. 理解原理：不要只记 API，要理解背后的数学和图形学原理。
  4. 结合项目：将学到的知识对应到项目代码中，看看别人是怎么用的。

✅ 学习检查清单​

第 0 周后​

  • 理解单位圆上 sin/cos 的几何意义
  • 能使用 atan2 计算角度
  • 理解为什么归一化向量比 sin/cos 更快

第 1 周后​

  • 能用 Three.js 创建和操作向量
  • 理解点积和叉积的几何意义
  • 理解项目中的坐标转换逻辑

第 2 周后​

  • 能读懂变换矩阵
  • 理解矩阵乘法的顺序及其影响
  • 理解为什么需要齐次坐标

第 3 周后​

  • 能口述渲染管线的各个阶段
  • 能区分顶点着色器和片段着色器的职责
  • 理解深度测试和混合的工作原理

第 4 周后​

  • 能读懂 GLSL 代码
  • 能编写简单的自定义 Shader
  • 理解 Uniform 和 Attribute 的区别和用法

第 5-6 周后​

  • 能识别性能瓶颈
  • 能使用几何体合并和实例化优化性能
  • 能设计简单的渲染类封装

记住：理论 + 实践 = 掌握！ 🚀

开始学习： 第 0 周：数学基础回顾（三角函数）