1890 字
5 分钟
数漫图形与动画不完全学习笔记
2026-09-03
NOTE

本文主要记录图形与动画这门课的课上ppt知识点,方便系统复习应试。(很难写,知识点太碎,,一个知识点给你提一嘴就跑了,图形学入门不如直接看 learnOpenGL CN)。

第一章:计算机图形学概论#

这一部分就是些细碎的小概念

总结起来,CG 研究的有三方面:建模,动画,渲染。CG通常是将数据变为图像

帧缓存#

帧缓存(帧缓冲)是一般在显存里(有显卡时),是按行优先存放像素值的线性数组。帧缓存可以绑定很多个,主要用在后处理阶段。显卡和CPU挂在系统总线上,视频控制器不断将帧缓冲的值读出,经DAC送往显示器。显卡与CPU通过 PCIe 通道交换数据,PCIe的宽带并非显存宽带

帧缓冲是0/1矩阵(1亮0灭),由视频控制器读取。发展历程:1bit位图 -> 8bit灰度 -> 24bit真彩色 -> 30bit HDR

对于24bit真彩色的色深硬件实现
可以看成是3个8bit通道 R,G,B的输出

屏幕#

荫罩法实现颜色,主要部件:三色荧光屏,三支电子枪,荫罩板。这是RGB三基色加色混合的硬件实现。整个色彩呈现过程如下:

帧缓存RGB三通道数模转换器DAC三路基色信号显示部件\text{帧缓存RGB三通道} \rightarrow \text{数模转换器DAC} \rightarrow \text{三路基色信号} \rightarrow \text{显示部件}

分辨率#

分辨率有三种表示方法:光点直径(点距),像素数,dpi。其中光点直径指:相邻同色磷光点的最短距离(mm),区分准则:亮度衰减约 60%。dpi:每英寸点数。

CRT#

四大部件:电子枪,聚焦系统,偏转系统,荧光屏。CRT定义了后来光栅化管线输出图像的顺序从左往右,从上到下,逐行绘制

几个术语

  • 行频:每秒扫过的水平线数
  • 帧频
  • 显示宽带:系统每秒需要传输的数据。计算B=r(x)×r(y)×d×vB=r(x) \times r(y) \times d \times v。这些物理量很好理解。

CPU VS GPU#

  • CPU指令列队
  • GPU并行管线

Amdahl定律:一个系统的加速上限,由无法被优化的部分决定。(计组里求CPU加速比时用过)


第二章:图形处理管线与GPU架构#

管线#

这里讲述的是传统光栅化管线

着色器源码交给你这款GPU的驱动编译,不同的显卡的GPU命令是不一样的。

compute shader 独立与传统光栅化管线,适合做软光追的路径追踪管线(确实很好用,类似于 CUDA)

ppt里提到了一行GLSL代码:varing vec2 texcoord;。这里提一嘴,varying 早就被 in/out 替换掉了……在现代GLSL代码中,顶点着色器要输出的变量一般用 out vec2 texcoord,在对应片段着色器里用 in vec2 texcoord;,两者变量名必须一一对应。

对于最终渲染到屏幕上的阶段,当今显示均采取双缓冲形式,在垂直同步点交换指针,前者负责显示,后者负责计算。

Z-Fighting#

根源:深度缓冲精度有限且分布非线性——1/𝑧 型映射使近处密、远处疏。这里 PPT 就提了一嘴,实际上非线性分布的来源就是透视除法,最后的 NDC 坐标 OpenGL 自动由裁剪坐标除以 w 获得(w 是齐次坐标通过投影矩阵变换后得到的第四个分量),而投影矩阵会让 w 正比于 z,所以会让大量的精度在近处就用完了。具体的投影矩阵以及数学推导可以参考笔者之前关于实现软光栅化器的文章,或者跳转到本文后面部分 解决策略:设置更大的近平面(将整体的精度向远处推)、更高位深、Reverse-Z(反向Z操作)

NOTE

下面部分跟 CUDA 编程是异曲同工的

为什么需要缓冲对象?缓冲对象在 CPU 里被打包一次性传输到 GPU 的全局内存(显存),存储起来然后被反复调用。为什么这么做而不是每帧都传?因为 PCIe 带宽 32GB/s,GPU显存宽带3TB/s,每一帧都从CPU搬太贵。常见的三个对象:

  • VBO:存顶点数据的GPU缓冲区。在 OpenGL 里面创建一个 VBO 的代码逻辑跟 CUDA 编程很像,先创建这个对象,然后绑定它,将你的顶点数据传到 GPU,最后再解绑
  • PBO(保存像素数据,用于异步数据传输,由DMA后台搬运数据,代价就是多一层显存内中转,用中间层换取并行度。这个用得很少,因为GPU的计算结果一般不会再搬进CPU)
  • FBO:记录本次渲染的结果保存到哪里(其实屏幕是一个默认的FBO,我们的最终渲染场景都是要画进这个画布)

针对顶点的数据有如下对象:

  • VAO:保存这个顶点数据什么偏移量对应什么数据(因为 GPU 里的数据存储是以数组的形式,一个 VBO 里会保存很多顶点数据,每一个顶点内部又有这个点的坐标,颜色,法线等等,所以我们需要设计多个步长来对应多个不同的数据)。VAO 跟 VBO 是一起用的。
  • EBO/IBO:支持不传所有顶点,只用传一个顶点加一堆整数(顶点索引),根据关系得到顶点数据

设计这么多缓冲本质都被一条物理规律驱动:搬运比计算贵

GPU 架构#

NOTE

下面就是一些 GPU 架构说明以及 CUDA 编程

两种架构区别

  • SIMD:一条指令显式作用于向量寄存器里的多个数据;宽度由指令指定;程序员面对“向量”
  • SIMT:硬件把 32 个线程组成 Warp,同拍执行同一条指令;每线程有自己的寄存器和数据;程序员面对“标量线程”

写法上是标量,执行上是向量

NOTE

下面一些 GPU 架构知识可以直接跳转到笔者前面的相关文章

Tnsor Core:即把 MMA 固化成了电路。Tensor Core 每拍完成一整个小矩阵块(如 4×4)的 MMA,这会极高提升效率!(所以在进行 GPU 编程的时候,可以将一些运算直接写成 MMA 运算。)

RT core:专门针对于硬件光追的核心,内部自动处理 BVH,很方便(因为软件光追要求你手写 BVH 然后拍平成数组上传 GPU,巨麻烦!)

第三章:WebGL 编程#

NOTE

本章的要求:学会 Three.js,然后会自己搭建框架。 (Three.js相较于OpenGL,Vulkan来说,就像是把饭嚼烂送进嘴里,不过其源码架构还是很值得学习)

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

数漫图形与动画不完全学习笔记
https://www.naie-char.cc/posts/数漫图形与动画/
作者
萘Naie_Char
发布于
2026-09-03
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录