前端图形学课程体系
前端图形学是利用 Canvas 2D、WebGL、WebGPU 等浏览器端图形能力，实现 2D 绘图、3D 渲染、地图可视化与高性能仿真应用的技术栈。本课程体系从最基础的数学与 2D 绘图出发，逐步过渡到原生 WebGL、Shader 编程、Three.js 高级应用与源码剖析，最终抵达下一代 WebGPU 标准，覆盖一名前端工程师构建现代浏览器端图形应用所需的全部知识链路。
为什么需要这套课程
浏览器早已不再是「画 DOM 的工具」。从 Figma、地图引擎、自动驾驶仿真到数字孪生，前端图形学的边界被不断拓宽。要驾驭这些场景，仅靠「会用 Three.js」远远不够——你需要理解渲染管线、GPU 工作机制、Shader 编程，以及如何在工程层面做出性能与可维护性的平衡。这套课程的目标，就是把这条链路打通。
课程地图
| # | 课程模块 | 核心目标 | 适合人群 |
|---|---|---|---|
| 1 | 数学与图形学基础 | 三角函数、向量、矩阵、坐标变换、颜色空间 | 零基础或想补齐数学短板的同学 |
| 2 | Canvas 2D | 2D 上下文绘图、Fabric.js / Konva 引擎应用 | 做编辑器、流程图、可视化面板的前端 |
| 3 | WebGL 教程 | 原生 WebGL 渲染管线、纹理、帧缓冲、GPGPU | 想理解 Three.js 底层原理的进阶者 |
| 4 | GLSL 着色器 | Shader 编写、向量运算、后期处理、性能优化 | 准备做特效、自定义材质、视觉算法的同学 |
| 5 | Three.js 实战 | 场景搭建、光照材质、模型加载、交互与性能 | 想要快速产出 3D 可视化项目的前端 |
| 6 | Three.js 进阶 | 渲染顺序、后期处理、材质定制、GPGPU | 已经能「用」Three.js，想做到「驾驭」的工程师 |
| 7 | Three.js 源码 | 渲染全链路、调度机制、性能优化原理 | 想成为渲染引擎专家、阅读开源源码的同学 |
| 8 | WebGPU 入门 | WGSL、Compute Shader、新一代 GPU 编程模型 | 关注未来标准、追求极致性能的前沿探索者 |
推荐学习路径
- 打地基：从「数学与图形学基础」开始，建立向量 / 矩阵 / 坐标系的直觉。
- 二维先行：通过 Canvas 2D 熟悉图形 API 的设计哲学，再过渡到 GPU。
- 进入三维：学习原生 WebGL，理解 GPU 是如何「画」出像素的。
- 掌握 Shader：GLSL 是与 GPU 对话的唯一语言，务必精读示例并动手实现。
- 工程化封装：用 Three.js 把渲染管线抽象掉，专注场景与业务。
- 穿透抽象：阅读 Three.js 源码，回到「为什么这样设计」。
- 面向未来：用 WebGPU 重新审视性能边界，准备迎接下一代标准。
学习建议
- 先跑通，再优化：每个示例务必自己敲一遍、跑起来，再讨论性能与可读性。
- 善用可视化：把矩阵、向量、法线、UV 画出来，比任何文字解释都直观。
- 以项目驱动：选择一个小目标（如「一个能旋转的地球」「一个粒子系统」），用课程中的知识逐层实现。
- 记录你的「卡点」：Shader 报错、性能瓶颈、坐标系错位——这些是真正内化知识的契机。
写在最后
图形学是一条「越学越宽」的路。越往深处走，你会越发现数学、工程、美学、硬件之间的边界在消融。希望这套课程能成为你探索这条路的地图，而不是终点。祝学得开心。