Computer Knowledge2026-10-1030 minYygz3149 人浏览已发布

计算机图形学学习指南：从课程入门到能够独立实现图形系统

给自己学习计算机图形学的指南

Notes

适用对象：本科《计算机图形学》课程学习者，尤其适合课程中涉及 WebGL / OpenGL、几何绘制流水线、二维与三维变换、裁剪、光栅化、深度测试、光照、纹理、曲线曲面 等内容的同学。

学习目标：不仅“会做题、能考试”，更要做到 看得懂图形学流水线、能推公式、能写基本图形程序、能解释屏幕上的图像是如何一步步生成的。

0. 先回答三个最重要的问题

0.1 计算机图形学到底学什么？

一句话概括：

计算机图形学研究如何用计算机表示、生成、变换、显示和渲染图形与图像。

它最核心的一条主线是：

TEXT

三维/二维对象
    ↓
几何表示
    ↓
坐标变换
    ↓
观察与投影
    ↓
裁剪
    ↓
光栅化
    ↓
片元处理
    ↓
可见性判断
    ↓
光照 / 材质 / 纹理
    ↓
帧缓存
    ↓
屏幕图像

因此，学图形学不能把知识点当成彼此独立的章节。真正要建立的是一条完整的“模型如何变成屏幕像素”的因果链。

0.2 这门课最难的地方是什么？

通常不是代码本身，而是以下四点：

坐标系多：模型坐标、世界坐标、观察坐标、裁剪坐标、规范化设备坐标、屏幕坐标容易混淆。
矩阵多：平移、旋转、缩放、观察、投影、复合变换需要建立统一理解。
流水线长：顶点、图元、片元、像素、帧缓存等概念容易混在一起。
“图像结果”背后是数学：光照、插值、投影、曲线曲面都依赖线性代数和几何直觉。

所以正确学习策略不是死记 API，而是：

先理解数学与流水线，再用 WebGL / OpenGL 验证。

0.3 学完应该达到什么标准？

建议把目标分成四档。

Level 1：课程及格标准

你应该能够：

解释计算机图形学的基本概念和主要应用；
区分像素、片元、顶点、图元、帧缓存；
知道光栅化、裁剪、深度测试分别解决什么问题；
会做二维/三维基本变换计算；
会解释平行投影和透视投影；
会解释基本光照模型；
能完成课堂和考试中的常见计算题、简答题。

Level 2：真正学懂本科课程

在 Level 1 基础上，你还应该能够：

从头画出完整图形绘制流水线；
解释一个三角形从顶点数据到屏幕像素的全过程；
手算基本变换矩阵及复合变换；
理解视图矩阵、投影矩阵的作用；
理解裁剪空间、NDC、视口变换；
理解顶点着色器和片元着色器的职责；
能写一个基础 WebGL/OpenGL 程序完成三角形、立方体、变换、光照和纹理；
能分析常见渲染错误，例如“为什么物体看不到”“为什么深度错乱”“为什么颜色不对”。

Level 3：具备图形编程能力

你应该能够独立完成：

一个 3D 场景；
摄像机移动；
模型变换；
深度测试；
Phong / Blinn-Phong 光照；
纹理映射；
基本交互；
动画；
简单模型加载。

并且能够阅读 WebGL/OpenGL 示例代码，不再只是“照着抄”。

Level 4：达到后续科研/工程学习起点

你应该能够继续学习：

实时渲染；
PBR；
阴影；
延迟渲染；
光线追踪；
GPU 编程；
可视化；
三维重建；
医学影像可视化；
神经渲染、NeRF、3D Gaussian Splatting 等现代方向。

1. 学习这门课前需要具备什么基础？

1.1 数学基础

最重要的是 线性代数。

必须掌握：

向量；
向量加减；
点积；
叉积；
向量长度；
单位向量；
矩阵乘法；
单位矩阵；
逆矩阵的基本概念；
齐次坐标；
坐标系与基；
三角函数 sin、cos、tan。

其中最重要的是：

点积

\mathbf a\cdot \mathbf b=\|\mathbf a\|\|\mathbf b\|\cos\theta

用途：

判断夹角；
判断方向是否相近；
计算漫反射；
判断表面朝向。

叉积

\mathbf a\times\mathbf b

结果是同时垂直于 $\mathbf a$ 与 $\mathbf b$ 的向量。

用途：

求平面法向量；
构建摄像机坐标系；
判断三角形朝向。

矩阵乘法

图形学里的核心思想之一是：

\mathbf p'=M\mathbf p

其中：

$\mathbf p$ ：原始顶点；
$M$ ：变换矩阵；
$\mathbf p'$ ：变换后的顶点。

必须牢记：

矩阵乘法一般不满足交换律。

即：

AB\neq BA

所以“先旋转再平移”和“先平移再旋转”的结果往往不同。

1.2 编程基础

如果课程使用 WebGL，建议至少熟悉：

HTML 基础；
JavaScript 变量、函数、数组、对象；
TypedArray；
基本循环、条件判断；
浏览器开发者工具；
JavaScript 调试。

如果课程使用 OpenGL，则建议熟悉：

C/C++；
数组；
指针；
结构体/类；
编译链接的基本概念。

注意：

API 不是图形学本身。WebGL / OpenGL 是帮助你实践图形学原理的工具。

2. 建立整门课的核心知识地图

建议把整门课程压缩成下面 12 个模块：

TEXT

01 图形学基本概念
        ↓
02 显示设备与颜色表示
        ↓
03 基本图元与光栅化
        ↓
04 二维几何变换
        ↓
05 二维观察与裁剪
        ↓
06 三维几何变换
        ↓
07 三维观察与投影
        ↓
08 图形绘制流水线 / WebGL
        ↓
09 可见面判定与深度测试
        ↓
10 光照与明暗处理
        ↓
11 纹理映射
        ↓
12 曲线、曲面、动画与高级渲染

学习过程中，每完成一章，都要问自己：

“这一章在完整绘制流水线中处于哪个位置？”

如果答不出来，说明知识仍然是碎片化的。

3. 模块一：计算机图形学基本概念

3.1 应学会什么

需要理解：

什么是计算机图形学；
什么是计算机生成图像；
图形与图像的关系；
图形学与数字图像处理的区别；
图形学与计算机视觉的区别；
图形学的主要应用领域。

三个领域最容易混淆

计算机图形学

关注：

TEXT

模型/数据 → 图像

例如：

游戏画面；
CAD；
3D 动画；
科学可视化；
虚拟现实。

数字图像处理

关注：

TEXT

图像 → 图像

例如：

去噪；
增强；
锐化；
滤波。

计算机视觉

关注：

TEXT

图像 → 信息/理解

例如：

目标检测；
图像分类；
人脸识别；
三维重建。

达标标准

看到一个实际应用，你能够判断它主要属于：

图形学；
图像处理；
计算机视觉；

并能解释原因。

4. 模块二：显示设备、帧缓存、颜色与分辨率

这一部分很容易被认为“不重要”，实际上考试非常喜欢考基本概念和计算。

4.1 必须理解的概念

像素；
分辨率；
帧缓存；
刷新率；
RGB；
色深；
真彩色；
显存；
光栅显示；
隔行扫描和逐行扫描。

4.2 必会计算

如果一个像素有 $b$ 位：

N=2^b

种可能状态。

例如 24 位 RGB：

2^{24}=16,777,216

约为 1677 万色。

若分辨率为：

W\times H

每像素占 $b$ bit，则一帧至少需要：

M=W\times H\times b

bit。

如果刷新率为 $f$ ，则每秒像素读取数量约为：

R=W\times H\times f

逐行扫描时尤其常用。

达标标准

能够独立完成：

色深计算；
帧缓存大小计算；
像素吞吐率计算；
单像素读取时间计算。

5. 模块三：基本图元与光栅化

这是理解“几何图形如何真正显示到屏幕上”的关键。

5.1 首先理解什么是光栅化

三角形最初是连续几何对象：

TEXT

三个顶点 → 一个连续三角形区域

但显示器只能显示离散像素。

因此需要：

TEXT

几何图元
    ↓
判断覆盖了哪些像素
    ↓
产生片元

这个过程就是：

光栅化（Rasterization）

必须牢记：

TEXT

顶点 ≠ 片元 ≠ 像素

顶点 Vertex

描述几何结构的数据点。

片元 Fragment

光栅化后生成的“候选像素”，通常带有：

屏幕位置；
深度；
颜色；
插值属性；
纹理坐标等。

像素 Pixel

最终写入帧缓存并显示的离散图像元素。

因此：

片元是潜在像素，不一定成为最终像素。

5.2 如果教材讲经典算法，需要掌握

DDA 直线生成算法；
Bresenham 直线算法；
中点画圆算法；
多边形扫描转换；
区域填充。

学习时不要只背公式

以 Bresenham 为例，要搞懂：

为什么只需要整数运算；
为什么每一步只在两个候选像素中选择；
决策变量代表什么；
如何由上一步递推下一步。

达标标准

能够回答：

给定一个三角形的三个顶点，GPU 为什么最终能在屏幕上填满一个三角形？

如果能够完整解释“顶点 → 三角形 → 光栅化 → 片元 → 像素”，这一模块就基本掌握。

6. 模块四：二维几何变换

这是整门课的数学基础之一。

6.1 平移

x'=x+t_x

y'=y+t_y

使用齐次坐标：

\begin{bmatrix} x'\\ y'\\ 1 \end{bmatrix} = \begin{bmatrix} 1&0&t_x\\ 0&1&t_y\\ 0&0&1 \end{bmatrix} \begin{bmatrix} x\\y\\1 \end{bmatrix}

6.2 缩放

\begin{bmatrix} x'\\y'\\1 \end{bmatrix} = \begin{bmatrix} s_x&0&0\\ 0&s_y&0\\ 0&0&1 \end{bmatrix} \begin{bmatrix} x\\y\\1 \end{bmatrix}

6.3 旋转

二维逆时针旋转：

R(\theta)= \begin{bmatrix} \cos\theta&-\sin\theta&0\\ \sin\theta&\cos\theta&0\\ 0&0&1 \end{bmatrix}

6.4 为什么需要齐次坐标

没有齐次坐标时：

旋转可以写成矩阵；
缩放可以写成矩阵；
平移不能直接用普通二维矩阵乘法统一表示。

引入齐次坐标后：

平移、旋转、缩放都可以统一为矩阵乘法。

这是非常重要的思想。

6.5 复合变换

若：

TEXT

先执行 M1
再执行 M2
再执行 M3

则在列向量约定下：

p'=M_3M_2M_1p

注意：

最先执行的变换矩阵离顶点最近。

高频考试题

绕原点旋转；
绕任意点旋转；
关于某直线对称；
先平移再旋转；
复合矩阵计算。

绕任意点 $(x_0,y_0)$ 旋转

思想：

TEXT

把旋转中心移动到原点
        ↓
绕原点旋转
        ↓
再移动回去

矩阵：

M=T(x_0,y_0)R(\theta)T(-x_0,-y_0)

达标标准

你应该能在不看书的情况下写出：

平移矩阵；
旋转矩阵；
缩放矩阵；
绕任意点旋转的变换顺序；
正确判断矩阵乘法顺序。

7. 模块五：二维观察与裁剪

7.1 裁剪解决什么问题？

一句话：

裁剪决定哪些几何内容应该进入可见区域。

比如一个三角形一部分在窗口内、一部分在窗口外：

正确结果不是：

TEXT

全部显示

也不是：

TEXT

整个删除

而是：

TEXT

保留可见范围内的部分

7.2 常见算法

Cohen-Sutherland 直线裁剪

需要掌握：

区域编码；
逻辑与判断；
完全接受；
完全拒绝；
部分相交继续计算。

核心判断：

若两端点编码均为 0：

TEXT

完全可见

若：

code_1 \& code_2 \neq 0

则：

TEXT

完全不可见

否则：

TEXT

需要求交点继续裁剪

Liang-Barsky

如果教材要求，理解它利用参数方程：

P(t)=P_0+t(P_1-P_0)

把裁剪问题转化为参数 $t$ 的约束。

达标标准

能够区分：

裁剪；
消隐；
深度测试。

牢记：

裁剪解决“是否在观察范围内”；深度测试解决“谁挡住谁”。

8. 模块六：三维几何变换

二维变换理解以后，三维本质上是扩展到 $4\times4$ 齐次矩阵。

8.1 三维平移

T= \begin{bmatrix} 1&0&0&t_x\\ 0&1&0&t_y\\ 0&0&1&t_z\\ 0&0&0&1 \end{bmatrix}

8.2 三维缩放

S= \begin{bmatrix} s_x&0&0&0\\ 0&s_y&0&0\\ 0&0&s_z&0\\ 0&0&0&1 \end{bmatrix}

8.3 绕 x/y/z 轴旋转

至少理解三种基本旋转矩阵。

绕 $z$ 轴：

R_z(\theta)= \begin{bmatrix} \cos\theta&-\sin\theta&0&0\\ \sin\theta&\cos\theta&0&0\\ 0&0&1&0\\ 0&0&0&1 \end{bmatrix}

另外两种建议通过“哪两个坐标发生二维旋转”理解，而不是死背。

达标标准

能回答：

为什么三维图形学大量使用 4×4 矩阵？

答案核心：

因为使用三维齐次坐标后，可以把平移、旋转、缩放、投影等统一到矩阵框架中，方便进行复合变换和流水线处理。

9. 模块七：摄像机、观察变换与投影

这是整门计算机图形学最重要的章节之一。

9.1 必须建立“摄像机”直觉

现实摄影中：

世界不会因为你拿着相机移动而真的移动；
但是从相机坐标来看，可以等效成“世界反向移动”。

因此：

观察变换本质上是把世界坐标变换到摄像机坐标系。

9.2 常见坐标空间

一定要按顺序理解：

TEXT

模型坐标 Model Space
        ↓ Model Matrix
世界坐标 World Space
        ↓ View Matrix
观察/摄像机坐标 View Space
        ↓ Projection Matrix
裁剪坐标 Clip Space
        ↓ 透视除法
NDC
        ↓ Viewport Transform
屏幕坐标 Screen Space

常把前三个主要矩阵写作：

P_{clip}=PVM P_{model}

或按教材/库约定写成：

P_{clip}=M_{proj}M_{view}M_{model}P

即常见的 MVP。

9.3 平行投影

特点：

平行线仍平行；
远处物体不会明显变小；
常用于工程制图、CAD。

9.4 透视投影

特点：

近大远小；
更符合人类视觉；
产生透视缩短。

简单直觉：

x'\propto \frac{x}{z}

y'\propto \frac{y}{z}

这就是为什么距离越远，投影越小。

9.5 透视除法

裁剪坐标：

(x_c,y_c,z_c,w_c)

经过：

x_{ndc}=\frac{x_c}{w_c}

y_{ndc}=\frac{y_c}{w_c}

z_{ndc}=\frac{z_c}{w_c}

得到 NDC。

这一点非常重要。

达标标准

能够从头解释：

一个三维点为什么能够显示在二维屏幕上？

答案至少要包含：

TEXT

模型变换
→ 观察变换
→ 投影变换
→ 透视除法
→ 视口变换
→ 屏幕坐标

10. 模块八：现代图形绘制流水线

如果整门课只能真正学懂一个东西，就学懂这个。

典型流程：

TEXT

顶点数据
    ↓
顶点着色器 Vertex Shader
    ↓
图元组装 Primitive Assembly
    ↓
裁剪 Clipping
    ↓
光栅化 Rasterization
    ↓
片元 Fragment
    ↓
片元着色器 Fragment Shader
    ↓
深度/模板/混合等测试
    ↓
帧缓存 Framebuffer
    ↓
显示器

10.1 顶点着色器

主要负责：

顶点坐标变换；
顶点属性处理；
输出传递给后续阶段的数据。

典型任务：

P'=MVP\cdot P

如果想让一个模型移动、旋转：

最自然的位置就是在顶点阶段通过矩阵变换顶点。

10.2 光栅化

输入：

TEXT

三角形等图元

输出：

TEXT

片元

同时会对顶点属性进行插值。

例如一个三角形三个顶点颜色分别为红、绿、蓝，内部片元颜色可以通过插值得到渐变。

10.3 片元着色器

主要负责：

颜色；
纹理；
光照；
材质；
逐片元效果。

10.4 后续测试

片元着色后仍不一定成为最终像素。

可能经过：

深度测试；
模板测试；
混合；
丢弃。

所以：

TEXT

片元 ≠ 最终像素

达标标准

不看资料，能够用一张纸画完整流水线，并解释每一步：

输入是什么；
做什么；
输出是什么。

11. 模块九：WebGL 应该如何学习

如果你们课程使用 WebGL，不建议一开始大量背 API。

学习顺序应该是：

TEXT

先知道“我要完成什么图形学任务”
        ↓
再知道“WebGL 用什么 API 完成”

11.1 第一阶段：画出一个三角形

你需要理解完整过程：

TEXT

创建 canvas
↓
获取 WebGL context
↓
编写 vertex shader
↓
编写 fragment shader
↓
编译 shader
↓
链接 program
↓
创建 buffer
↓
上传顶点数据
↓
绑定 attribute
↓
gl.drawArrays / gl.drawElements

目标不是背代码，而是能解释每一段代码在 GPU 流水线中的作用。

11.2 第二阶段：让三角形动起来

加入：

平移；
旋转；
缩放；
animation loop。

建议使用：

JAVASCRIPT

requestAnimationFrame(render)

这时候重点理解：

每一帧实际上都在重新根据新的参数绘制场景。

11.3 第三阶段：进入三维

实现：

立方体；
深度测试；
透视投影；
摄像机。

重点：

JAVASCRIPT

gl.enable(gl.DEPTH_TEST)

背后原理必须理解：

同一屏幕位置多个片元竞争时，通过深度比较决定哪个片元更靠近观察者。

11.4 第四阶段：光照

实现：

法向量；
漫反射；
镜面反射；
环境光。

11.5 第五阶段：纹理

理解：

纹理坐标 UV；
texture image；
sampler；
texture unit；
filtering；
wrapping。

WebGL 达标标准

你能够不照抄完整教程，独立完成：

一个可以旋转的带光照和纹理的三维立方体。

做到这一点，就说明 WebGL 基础真正建立起来了。

12. 模块十：可见面、消隐与深度缓冲

12.1 为什么需要消隐？

三维场景投影到二维屏幕后，多个表面可能覆盖同一个像素。

系统需要判断：

TEXT

哪个表面在前？
哪个表面被挡住？

12.2 Z-buffer / Depth Buffer

为每个像素保存一个深度值。

新片元到来：

TEXT

比较新片元深度
        ↓
如果更近
    更新颜色 + 更新深度
否则
    丢弃

这是现代实时渲染中非常重要的方法。

12.3 背面剔除

如果一个封闭物体的某个三角形背向摄像机，通常可以提前忽略。

这可以减少绘制开销。

需要理解：

面的绕序；
正面/背面；
法向量。

达标标准

能够清晰区别：

技术	解决的问题
裁剪	图元是否在可见范围内
背面剔除	表面是否背向观察者
深度测试	多个片元中谁离观察者更近

13. 模块十一：光照模型

光照是最容易“公式记住但没理解”的部分。

正确学习方式：

先理解现实中的光，再看数学近似。

13.1 环境光

近似表示场景中到处存在的间接光。

I_a=k_aL_a

13.2 漫反射

Lambert 定律：

I_d=k_dL_d\max(0,\mathbf N\cdot\mathbf L)

其中：

$\mathbf N$ ：表面单位法向量；
$\mathbf L$ ：指向光源的单位向量。

因为：

\mathbf N\cdot\mathbf L=\cos\theta

因此：

光线越正对表面，越亮；越斜，越暗。

13.3 镜面反射

Phong 模型常写为：

I_s=k_sL_s\max(0,\mathbf R\cdot\mathbf V)^n

其中：

$\mathbf R$ ：反射方向；
$\mathbf V$ ：观察方向；
$n$ ：高光指数。

$n$ 越大：

TEXT

高光越小、越集中

13.4 Phong 光照模型

整体：

I=I_a+I_d+I_s

即：

TEXT

环境光 + 漫反射 + 镜面反射

13.5 Flat / Gouraud / Phong Shading

一定要区分：

Flat Shading

一个面使用一个颜色/法向结果。

Gouraud Shading

在顶点计算光照，然后插值颜色。

Phong Shading

插值法向量，然后逐片元计算光照。

通常效果：

TEXT

Phong > Gouraud > Flat

但计算开销也通常更高。

达标标准

看到一个光照公式，能够解释每个向量的几何意义，而不是只会代数计算。

14. 模块十二：纹理映射

纹理映射的核心思想：

不需要给模型增加大量几何细节，也能让表面看起来丰富。

14.1 UV 坐标

一般：

(u,v)\in[0,1]^2

表示纹理图像中的位置。

三角形顶点拥有：

TEXT

Position
Normal
Color
UV

光栅化时，UV 会在三角形内部插值。

14.2 需要理解的概念

Texture coordinate；
Sampler；
Texture unit；
Nearest；
Linear filtering；
Repeat；
Clamp；
Mipmap。

达标标准

能够解释：

一张二维图片为什么可以“贴”到一个三维立方体表面？

15. 曲线与曲面

如果课程讲 Bézier / B-spline，这部分非常容易考公式和性质。

15.1 Bézier 曲线

一般形式：

P(t)=\sum_{i=0}^{n}B_i^n(t)P_i

其中 Bernstein 基函数：

B_i^n(t)=\binom{n}{i}t^i(1-t)^{n-i}

0\le t\le1

必须掌握的性质

经过首尾控制点；
起点切线由前两个控制点决定；
终点切线由后两个控制点决定；
位于控制多边形凸包中；
具有仿射不变性；
高阶 Bézier 全局控制性较强。

15.2 B-spline

重点理解为什么需要它：

Bézier 控制点一改，整条曲线都可能改变；B-spline 更适合局部控制。

达标标准

不仅会背公式，还能回答：

为什么实际建模中经常需要 B-spline / NURBS，而不仅是一个高阶 Bézier？

16. 动画

动画本质是：

随时间改变场景参数并反复绘制。

例如旋转角度：

\theta(t)=\omega t

每一帧：

TEXT

更新时间
↓
更新模型矩阵
↓
重新渲染

必须理解：

帧；
FPS；
插值；
时间步；
关键帧；
变换动画。

17. 一套真正有效的学习方法

17.1 不要“只看课件”

图形学是一门强实践课程。

推荐学习循环：

TEXT

看理论
↓
自己画图
↓
手推公式
↓
写代码
↓
观察结果
↓
故意修改参数
↓
解释现象

例如学习透视投影：

不要只背矩阵。

应该：

先画小孔成像图；
理解为什么有 $x/z$ ；
再看投影矩阵；
最后在 WebGL 中改变 FOV；
观察视野变化。

这样记忆非常牢固。

17.2 每一章都做“四份笔记”

建议你的笔记固定成四栏：

A. 概念

例如：

光栅化：把几何图元转换为片元。

B. 数学

例如：

p'=Mp

C. 流水线位置

例如：

TEXT

裁剪 → 光栅化 → 片元着色

D. 代码/API

例如：

JAVASCRIPT

gl.drawArrays(...)

这样可以避免“知道 API，但不知道原理”。

17.3 每个概念必须能回答三个问题

例如“深度测试”：

What？

是什么？

比较片元深度的机制。

Why？

为什么需要？

解决遮挡关系。

Where？

处于流水线哪里？

片元产生以后、写入帧缓存以前。

做到这一步，理解才算完整。

18. 推荐 16 周学习计划

第 1 周：图形学总体认识

学习：

图形学是什么；
主要应用；
图形学/图像处理/视觉区别；
图形系统基本组成。

成果：

手画整门课程知识地图。

第 2 周：显示系统与颜色

学习：

像素；
分辨率；
RGB；
帧缓存；
刷新率；
色深。

练习：

显存计算；
颜色数计算；
像素速率计算。

第 3 周：基本图元与光栅化

学习：

直线；
圆；
三角形；
DDA；
Bresenham；
光栅化。

成果：

用代码实现基本直线算法；
能解释“图元 → 片元”。

第 4 周：二维变换

学习：

平移；
缩放；
旋转；
齐次坐标；
复合变换。

目标：

手算矩阵；
理解变换顺序。

第 5 周：裁剪与二维观察

学习：

Window / Viewport；
直线裁剪；
多边形裁剪。

目标：

能手算 Cohen-Sutherland。

第 6 周：三维变换

学习：

4×4 齐次矩阵；
三维平移；
三维旋转；
三维缩放。

目标：

能解释模型矩阵。

第 7 周：观察系统与摄像机

学习：

Eye；
LookAt；
Up；
View Matrix。

目标：

理解“移动相机”等价于“反向变换世界”。

第 8 周：投影

学习：

正交投影；
透视投影；
FOV；
Near / Far；
Perspective Divide。

成果：

能完整描述 3D → 2D。

第 9 周：WebGL 绘制流水线

学习：

Shader；
Buffer；
Attribute；
Uniform；
Varying / in / out；
Draw call。

项目：

绘制三角形；
绘制彩色矩形。

第 10 周：三维场景

项目：

立方体；
模型旋转；
透视；
深度测试。

目标：

把前面所有变换知识串起来。

第 11 周：光照

学习：

Normal；
Ambient；
Diffuse；
Specular；
Phong。

项目：

实现一个光照立方体。

第 12 周：纹理

项目：

给立方体贴图；
研究 UV；
改变纹理过滤方式。

第 13 周：曲线曲面

学习：

Bézier；
B-spline；
曲面基础。

项目：

实现交互式 Bézier 曲线。

第 14 周：动画与交互

加入：

键盘；
鼠标；
摄像机控制；
动画循环。

第 15 周：综合项目

完成：

一个可交互三维场景。

至少包含：

三维模型；
MVP；
深度测试；
光照；
纹理；
交互；
动画。

第 16 周：总复习

重点：

TEXT

流水线
+ 变换矩阵
+ 投影
+ 裁剪
+ 光栅化
+ 深度
+ 光照
+ WebGL Shader

19. 如果只有 8 周时间，如何压缩学习

建议优先级：

TEXT

第一优先级：
变换 + 投影 + 流水线

第二优先级：
光栅化 + 裁剪 + 深度

第三优先级：
光照 + 纹理

第四优先级：
曲线曲面 + 高级内容

8 周安排：

周次	内容
1	基础概念 + 显示系统
2	光栅化 + 基本图元
3	二维/三维变换
4	摄像机 + 投影
5	WebGL Pipeline + Shader
6	深度 + 光照
7	纹理 + 曲线
8	综合项目 + 总复习

20. 实验应该怎么做，才能真正学会？

不要只追求“运行成功”。

建议每次实验都做三个版本。

Version 1：最小可运行版本

例如：

TEXT

先画一个纯色三角形

Version 2：参数实验版本

故意改变：

顶点；
矩阵；
颜色；
深度；
FOV；
光源。

观察结果。

Version 3：解释版本

在实验报告里写：

TEXT

我修改了什么？
↓
画面发生了什么？
↓
为什么发生？
↓
对应图形学哪个原理？

这一步是最有价值的。

21. 推荐项目阶梯

项目 1：二维图元绘制器

功能：

点；
线；
三角形；
简单颜色。

训练：

基础光栅；
坐标系统。

项目 2：二维变换演示器

可以交互控制：

平移；
旋转；
缩放。

训练：

矩阵；
复合变换。

项目 3：3D 立方体

功能：

旋转；
摄像机；
透视；
深度测试。

这是最重要的基础项目。

项目 4：光照与纹理场景

功能：

Phong 光照；
多个物体；
纹理贴图；
相机移动。

做到这里，图形学入门已经比较扎实。

项目 5：简单三维可视化系统

例如：

医学模型；
OBJ 模型；
地形；
科学数据。

加入：

旋转；
缩放；
平移；
光照；
切换视角。

22. 考试应该如何复习？

课程学习与考试复习应当分开一点。

22.1 第一轮：整理知识树

要求：一张纸写出：

TEXT

计算机图形学
├─ 显示系统
├─ 图元生成
├─ 变换
├─ 裁剪
├─ 投影
├─ 流水线
├─ 消隐
├─ 光照
├─ 纹理
└─ 曲线曲面

22.2 第二轮：整理公式

重点公式表：

RGB 色深；
平移矩阵；
旋转矩阵；
缩放矩阵；
复合变换；
点积；
Phong 光照；
Bézier。

22.3 第三轮：整理高频概念对比

光栅化 vs 光线追踪

顶点 vs 片元 vs 像素

裁剪 vs 消隐

顶点着色器 vs 片元着色器

正交投影 vs 透视投影

Gouraud vs Phong

图形学 vs 图像处理 vs 计算机视觉

这些非常容易出选择和简答题。

22.4 第四轮：计算题

重点练：

变换矩阵；
复合变换；
投影；
裁剪；
光照；
Bézier；
分辨率/帧缓存。

计算题必须手算，不能只看答案。

22.5 第五轮：完整模拟

要求自己在有限时间内完成一套题，并建立错题表：

错题	错误原因	正确知识	是否二刷
变换顺序	矩阵次序混淆	右侧先执行	是
片元概念	和像素混淆	片元是候选像素	是

23. 高频易错点

23.1 错误：光栅化就是显示

不完全正确。

正确：

TEXT

光栅化 → 生成片元
片元处理/测试 → 最终像素

23.2 错误：片元就是像素

错误。

片元可能：

深度测试失败；
被 discard；
被模板测试拒绝。

因此不一定写入 framebuffer。

23.3 错误：裁剪解决遮挡

错误。

裁剪：

TEXT

是否在可视范围内

深度测试：

TEXT

谁在前谁在后

23.4 错误：Shader 可以替代光栅化

错误。

Shader 是可编程阶段。

光栅化仍是 GPU 流水线的重要固定功能阶段。

23.5 错误：矩阵乘法顺序无所谓

错误。

TR\neq RT

非常重要。

23.6 错误：移动相机不会改变图像

错误。

模型不变，但观察位置改变，二维投影结果通常会改变。

23.7 错误：WebGL 就是一种 JavaScript 绘图库

不准确。

更准确地说：

WebGL 是浏览器中面向 GPU 图形渲染的低层 API，接口体系来源于 OpenGL ES。

24. 推荐教材与书籍

24.1 第一优先：你们课程指定教材

考试范围、符号、术语、矩阵约定、流水线描述都可能以指定教材为准。

所以：

课程教材用于考试，外部资料用于理解。

这两者不要颠倒。

24.2 Fundamentals of Computer Graphics

适合：

系统建立图形学知识；
进一步理解光照、渲染、几何等。

特点：内容体系完整，适合作为本科课程后的进阶教材。

24.3 Interactive Computer Graphics

如果课程强调 OpenGL/WebGL、着色器和交互式图形，这类教材非常适合作为配套学习材料。

24.4 Real-Time Rendering

这是更高级的书。

不建议刚开始就从头啃。

适合学完基础图形学以后查询：

光照；
阴影；
纹理；
GPU；
实时渲染算法。

25. 推荐在线资源

25.1 WebGL2 Fundamentals

网址：

https://webgl2fundamentals.org/

推荐指数：★★★★★

特点：

从底层解释 WebGL2；
强调 shader、buffer、matrix；
很适合真正理解 WebGL；
内容包括 2D、3D、摄像机、纹理、光照等。

建议方式：

不要一口气看完。课程学到哪个知识点，就对应看哪个章节。

25.2 MDN WebGL Tutorial

网址：

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial

推荐指数：★★★★★

适合：

查 WebGL 基础；
了解 canvas；
shader；
纹理；
光照；
动画。

MDN 的优点是概念和浏览器 API 解释比较规范。

25.3 Khronos WebGL Specification / Wiki

WebGL 规范：

https://registry.khronos.org/webgl/specs/latest/1.0/

WebGL 2.0：

https://registry.khronos.org/webgl/specs/latest/2.0/

WebGL Wiki：

https://wikis.khronos.org/webgl/Main_Page

适合：

查标准；
查 API 行为；
确认正式定义。

注意：

不建议初学者把规范当教材从头读。

25.4 LearnOpenGL

网址：

https://learnopengl.com/

推荐指数：★★★★★

即使你学的是 WebGL，也很值得看。

因为很多核心图形学思想是相通的：

Pipeline；
Transformation；
Camera；
Lighting；
Texture；
Depth；
Framebuffer。

建议重点学习：

TEXT

Getting Started
→ Transformations
→ Coordinate Systems
→ Camera
→ Lighting
→ Textures

不要过度纠结 C++ API 与 WebGL API 的差异，重点看图形学思想。

25.5 Scratchapixel

网址：

https://www.scratchapixel.com/

推荐指数：★★★★★

如果你想真正理解：

投影；
光线；
相机；
光线追踪；
渲染数学；

这是非常好的资源。

它的优势是：

很多内容从几何和数学原理开始解释，而不是只给 API。

25.6 MIT OpenCourseWare — Computer Graphics

课程：MIT 6.837 Computer Graphics

课程页面：

https://ocw.mit.edu/courses/6-837-computer-graphics-fall-2012/

适合：

建立更系统的大学图形学课程框架；
学习算法与课程作业设计；
进一步强化理论。

26. 如何使用视频资源

视频资源适合：

建立直觉；
理解空间关系；
观察动画演示。

但有一个原则：

不要把“看懂视频”当成“学会”。

正确做法：

TEXT

看 20 min
↓
暂停
↓
自己写/推
↓
重新解释

搜索关键词建议：

TEXT

Computer Graphics Pipeline
MVP Matrix
View Matrix
Perspective Projection
Rasterization
Bresenham Algorithm
Phong Lighting
WebGL Shader
Bezier Curve
Z Buffer

27. 建议建立自己的“图形学知识仓库”

目录结构可以这样设计：

TEXT

Computer-Graphics/
│
├─ 00_课程地图.md
├─ 01_图形学基础.md
├─ 02_显示系统.md
├─ 03_光栅化.md
├─ 04_二维变换.md
├─ 05_裁剪.md
├─ 06_三维变换.md
├─ 07_观察与投影.md
├─ 08_图形流水线.md
├─ 09_WebGL.md
├─ 10_深度与消隐.md
├─ 11_光照.md
├─ 12_纹理.md
├─ 13_曲线曲面.md
│
├─ exercises/
├─ code/
├─ images/
└─ mistakes.md

其中 mistakes.md 非常重要。

把所有容易混淆的知识记录进去。

28. 学完每一章的自测模板

每完成一章，关闭教材，回答：

1. 这一章解决什么问题？

2. 输入是什么？

3. 输出是什么？

4. 核心算法是什么？

5. 核心公式是什么？

6. 在完整图形流水线中的位置是什么？

7. 能否手算一个简单例子？

8. 能否写一个最小程序验证？

9. 有哪些容易混淆的概念？

10. 能否用 3 分钟给别人讲清楚？

如果 10 个问题能完成 8 个以上，说明基本掌握。

29. 最终能力验收标准

A 级：基础理论

你能否解释：

什么是 rasterization？
什么是 fragment？
什么是 framebuffer？
什么是 depth buffer？
什么是 shader？
什么是 texture？
什么是 clipping？

全部能准确回答。

B 级：数学

你能否独立写出：

平移矩阵；
旋转矩阵；
缩放矩阵；
复合变换；
MVP 的含义；
漫反射公式。

C 级：流水线

是否能从头讲：

TEXT

模型顶点
↓
Model Transform
↓
View Transform
↓
Projection
↓
Clipping
↓
Rasterization
↓
Fragment Shader
↓
Depth Test
↓
Framebuffer
↓
Screen

D 级：代码

是否能独立写出：

一个三角形；
一个旋转立方体；
一个透视摄像机；
深度测试；
基础光照；
纹理。

E 级：分析

程序出现问题时，你能否定位：

TEXT

是顶点数据？
是矩阵？
是坐标系？
是 shader？
是深度？
是纹理？
是 framebuffer？

如果可以，说明你已经不再是“只会照抄代码”。

30. 学完以后应该达到的最终状态

如果你真正学好了本科《计算机图形学》，你看到一个 3D 游戏/三维可视化程序时，脑海中应该能够自动拆解：

TEXT

这里有模型数据
↓
顶点经过 Model Matrix
↓
转到世界坐标
↓
View Matrix 转到摄像机空间
↓
Projection Matrix 做透视投影
↓
裁剪
↓
光栅化成片元
↓
插值 UV / Normal / Color
↓
Fragment Shader 计算光照和纹理
↓
Depth Test 处理遮挡
↓
写 Framebuffer
↓
最终显示

如果你能真正理解上面这条链路，那么这门课的核心就已经掌握了。

31. 建议的学习时间分配

如果每周可以投入 6～8 小时，建议：

内容	时间占比
教材/理论学习	25%
数学与公式推导	20%
WebGL/OpenGL 实践	30%
习题	15%
复盘与知识整理	10%

如果只看书而不写代码，会出现：

“公式好像懂了，但不知道画面怎么来的。”

如果只写代码而不学数学，会出现：

“程序可以跑，但一改参数就不知道为什么错。”

因此图形学最理想的是：

\boxed{\text{数学理解}+\text{算法理解}+\text{编程实验}}

三者一起推进。

32. 一份可执行的每周学习模板

假设一周学习 3 次。

第一次：理论学习 2 h

TEXT

30 min：复习上一章
60 min：学习新内容
30 min：整理公式/概念

第二次：代码实验 2～3 h

TEXT

30 min：看实验任务
90 min：实现
30 min：主动改变参数
30 min：记录现象

第三次：习题 + 复盘 2 h

TEXT

60 min：计算/简答题
30 min：整理错题
30 min：闭卷画知识结构

33. 计算机图形学和后续方向如何衔接

学完之后，可以向不同方向延伸。

实时渲染 / 游戏

继续：

TEXT

OpenGL / Vulkan / DirectX
→ GLSL / HLSL
→ PBR
→ Shadow Mapping
→ Deferred Rendering
→ GPU Optimization

计算机视觉 / 三维视觉

继续：

TEXT

Camera Model
→ Geometry
→ Multiple View Geometry
→ 3D Reconstruction
→ NeRF
→ Gaussian Splatting

这时候你会发现：

图形学研究“3D → 2D”，视觉很多时候研究“2D → 3D/语义”。

两者共享大量几何和摄像机知识。

医学影像可视化

继续：

TEXT

CT / MRI Volume Data
→ Volume Rendering
→ Marching Cubes
→ Surface Rendering
→ Transfer Function
→ VTK / 3D Slicer

图形学会直接帮助理解三维医学数据如何变成可观察画面。

科研 / 神经渲染

继续：

TEXT

Differentiable Rendering
NeRF
3D Gaussian Splatting
Neural Graphics

这些现代方向依然建立在：

摄像机；
几何；
投影；
光照；
渲染；

这些经典图形学基础之上。

34. 资源使用优先级建议

不建议同时开十几个教程。

最合理的组合是：

TEXT

主线：学校教材 + 课堂 PPT

理解：WebGL2 Fundamentals / LearnOpenGL

查 API：MDN / Khronos

深入数学与渲染：Scratchapixel

系统课程：MIT OCW

简单说：

教材定范围，优秀教程帮理解，官方文档查细节，代码实验做验证。

35. 最后给自己做一次终极测试

如果下面这些问题你能够不看资料回答清楚，说明这门课已经学得比较扎实：

计算机图形学与计算机视觉的区别是什么？
24 位颜色为什么约有 1677 万种？
光栅化到底在做什么？
顶点、片元、像素有什么区别？
为什么图形学使用齐次坐标？
为什么矩阵相乘顺序不能乱？
模型坐标如何一步步变成屏幕坐标？
View Matrix 在做什么？
透视投影为什么会产生“近大远小”？
Clipping 和 Depth Test 有什么区别？
Vertex Shader 和 Fragment Shader 分别做什么？
为什么使用 Shader 后仍然需要光栅化？
Z-buffer 如何解决遮挡问题？
法向量在光照中有什么作用？
$N\cdot L$ 为什么可以描述漫反射强弱？
Phong 光照的三部分是什么？
UV 坐标是什么？
为什么三角形顶点只有三个颜色，内部却可以产生渐变？
Bézier 曲线为什么受控制点影响？
从一个 OBJ 模型到最终屏幕画面，中间发生了什么？

如果能够完整回答 16～20 个：课程掌握较扎实。

如果只能回答 10～15 个：建议重点补流水线、变换和光照。

如果少于 10 个：建议重新以“模型 → 像素”的主线梳理整门课，而不是继续刷零散题目。

36. 一句话总结学习策略

计算机图形学最好的学习方法不是“背很多算法”，而是始终围绕一个问题：

一个三维/二维数学模型，究竟经过哪些计算，最后才变成屏幕上的像素？

把下面这条链真正学懂：

\boxed{ \text{几何建模} \rightarrow \text{坐标变换} \rightarrow \text{观察与投影} \rightarrow \text{裁剪} \rightarrow \text{光栅化} \rightarrow \text{片元着色} \rightarrow \text{可见性测试} \rightarrow \text{帧缓存} \rightarrow \text{显示} }

然后再把光照、纹理、动画、曲线曲面等内容挂到这条主线上。

当你能够在看到任何一个知识点时立即回答“它处于流水线哪里、解决什么问题、输入输出是什么、数学依据是什么、如何用程序实现”，你就真正学会了本科阶段的计算机图形学。

参考学习资源

WebGL2 Fundamentals: https://webgl2fundamentals.org/
MDN WebGL Tutorial: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial
Khronos WebGL 1.0 Specification: https://registry.khronos.org/webgl/specs/latest/1.0/
Khronos WebGL 2.0 Specification: https://registry.khronos.org/webgl/specs/latest/2.0/
Khronos WebGL Wiki: https://wikis.khronos.org/webgl/Main_Page
LearnOpenGL: https://learnopengl.com/
Scratchapixel: https://www.scratchapixel.com/
MIT OpenCourseWare — Computer Graphics: https://ocw.mit.edu/courses/6-837-computer-graphics-fall-2012/

读者互动

0 次表情反馈 · 0 条评论

登录后可以发表评论、给评论点赞。去登录

还没有评论。

计算机图形学学习指南：从课程入门到能够独立实现图形系统

0. 先回答三个最重要的问题

0.1 计算机图形学到底学什么？

0.2 这门课最难的地方是什么？

0.3 学完应该达到什么标准？

Level 1：课程及格标准

Level 2：真正学懂本科课程

Level 3：具备图形编程能力

Level 4：达到后续科研/工程学习起点

1. 学习这门课前需要具备什么基础？

1.1 数学基础

点积

叉积

矩阵乘法

1.2 编程基础

2. 建立整门课的核心知识地图

3. 模块一：计算机图形学基本概念

3.1 应学会什么

三个领域最容易混淆

计算机图形学

数字图像处理

计算机视觉

达标标准

4. 模块二：显示设备、帧缓存、颜色与分辨率

4.1 必须理解的概念

4.2 必会计算

达标标准

5. 模块三：基本图元与光栅化

5.1 首先理解什么是光栅化

顶点 Vertex

片元 Fragment

像素 Pixel

5.2 如果教材讲经典算法，需要掌握

学习时不要只背公式

达标标准

6. 模块四：二维几何变换

6.1 平移

6.2 缩放

6.3 旋转

6.4 为什么需要齐次坐标

6.5 复合变换

高频考试题

绕任意点 (x0,y0)(x_0,y_0)(x0​,y0​) 旋转

达标标准

7. 模块五：二维观察与裁剪

7.1 裁剪解决什么问题？

7.2 常见算法

Cohen-Sutherland 直线裁剪

Liang-Barsky

达标标准

8. 模块六：三维几何变换

8.1 三维平移

8.2 三维缩放

8.3 绕 x/y/z 轴旋转

达标标准

9. 模块七：摄像机、观察变换与投影

9.1 必须建立“摄像机”直觉

9.2 常见坐标空间

9.3 平行投影

9.4 透视投影

9.5 透视除法

达标标准

10. 模块八：现代图形绘制流水线

10.1 顶点着色器

10.2 光栅化

10.3 片元着色器

10.4 后续测试

达标标准

11. 模块九：WebGL 应该如何学习

11.1 第一阶段：画出一个三角形

11.2 第二阶段：让三角形动起来

11.3 第三阶段：进入三维

11.4 第四阶段：光照

11.5 第五阶段：纹理

WebGL 达标标准

12. 模块十：可见面、消隐与深度缓冲

12.1 为什么需要消隐？

12.2 Z-buffer / Depth Buffer

12.3 背面剔除

达标标准

绕任意点 $(x_0,y_0)$ 旋转