[简化版 GAMES 101] 计算机图形学 08：三角形光栅化上

Bilibili 同步视频

[简化版 GAMES 101] 计算机图形学 08：三角形光栅化上

你好呀，欢迎走进现代计算机图形学入门第五节课～✨
从这节课开始，我们正式告别基础变换，踏入三角形光栅化的世界 —— 这是实时渲染、游戏、VR 成像最核心的环节，也是把三维世界真正 “画” 到屏幕上的魔法起点。

🔹 开篇：课程总览与今日核心

我们的图形学之旅，一共分为四大板块。
而本节课聚焦的光栅化成像，正是左下角 “双车与阴影” 所代表的领域：
它是实时渲染的根基，是游戏画面、虚拟世界得以呈现的底层逻辑。

前几节课，我们深耕变换：
模型变换 → 视图变换 → 投影变换，一步步把三维场景规整到统一空间。
今天，我们要回答一个关键问题：
当三维物体被塞进 [-1,1]³ 的标准立方体后，下一步究竟该如何画在屏幕上？
答案只有一个：光栅化（Rasterization）。

📝 课程配套：作业与交流指南

✅ 作业 0 反馈

截至目前，作业 0 共收到188 份提交！
即便课程不强制，大家依旧积极参与，这份热情值得肯定～👍
作业 0 的意义，正是帮你提前扫清虚拟机、编译等技术障碍，为后续正式作业铺路。
⚠️ 作业 0 仅提交，不做批改。

✅ 作业 1 及后续安排

• 本节课计划发布作业 1（正式作业）

• 后续每周 1 次作业，分为基础要求 + 提高部分

• 两部分独立计分；结业证书以基础要求为准

• 提高部分面向兴趣拓展，自由发挥即可

✅ 交流小建议

• 课程 BBS 提问时，请清晰描述：做了什么 → 得到什么结果 → 问题在哪

• 专属课程答疑群正在规划中，避免无关信息干扰，提升答疑效率

🔁 上节课回顾：观测变换全梳理

上节课，我们完成了视图变换 + 投影变换：

1. 视图变换
   把相机固定到原点 → 看向 -Z → 向上为 Y的标准位姿，所有物体同步移动，保证视角统一。

2. 投影变换

   • 正交投影：直接丢弃深度，相机在无限远，无近大远小

   • 透视投影：符合人眼视觉，近大远小，先转为正交再投影

3. 最终结果：所有物体被压缩到[-1, 1]³的标准立方体空间。

🎥 透视投影：视锥的定义逻辑

想要定义透视投影的视锥（Frustum），只需要两个核心参数：

1. 宽高比（Aspect Ratio）

宽度 / 高度，如 4:3、16:9，决定屏幕画幅比例。

2. 垂直可视角度（FOV Y）

从相机指向屏幕上下边中点的两条线夹角，角度越大，视野越广（广角）；角度越小，越接近正交投影。

🔍 参数转化关系

通过三角函数（tan），可由FOV Y + 近平面距离算出屏幕半高；
再结合宽高比，直接推出屏幕半宽，完美对接正交投影的上下 / 左右定义。

🖼️ 屏幕空间：从数学空间到像素世界

✨ 屏幕是什么？

图形学中，屏幕 =二维像素数组，分辨率（如 1920×1080）就是数组尺寸。

• 720P = 1280×720

• 1080P = 1920×1080

• 2K / 4K = 更高密度像素阵列

✨ 像素（Pixel）

全称Picture Element，是屏幕最小渲染单元。
本节课中，我们把它抽象为：纯色小方块，内部颜色均匀不变。
颜色表示：

• 灰度：0（黑）~ 255（白）

• 彩色：RGB 三通道组合

✨ 屏幕坐标系

• 原点：屏幕左下角

• X 轴：向右

• Y 轴：向上

• 像素坐标：整数(x, y)，范围(0,0) ~ (width-1, height-1)

• 像素中心：(x+0.5, y+0.5)

• 屏幕覆盖范围：X:0→width，Y:0→height

🔄 视口变换：连接 [-1,1] 与屏幕空间

当三维物体被映射到[-1,1]²平面后，需要一步关键变换：
视口变换（Viewport Transformation）
把 [-1,1] → 拉伸 → 偏移 → 映射到0→width × 0→height的屏幕空间。

• 先缩放：宽高各 × (width/2, height/2)

• 再平移：中心移到(width/2, height/2)

• Z 轴暂不处理，留给后续深度测试

✨ 光栅化：把三角形打碎成像素

做完所有变换，我们得到屏幕空间中的三角形 / 多边形。
而光栅化，就是：
把几何图形拆解成像素，逐点确定颜色，最终绘制成完整图像。

电影《少年派》中逼真的老虎、游戏里流畅的场景，本质都是：
多边形 → 光栅化 → 像素 → 屏幕成像。

📺 拓展：那些经典的光栅显示设备

1. CRT 阴极射线管

早期显示器 / 示波器原理：电子加速、偏转、轰击荧光粉成像。
采用扫描方式：

• 逐行扫描：从上到下逐行绘制

• 隔行扫描：奇偶行分帧绘制，节省算力，但易出现画面撕裂

2. 现代平板显示

• LCD 液晶：通过液晶扭曲改变光的偏振方向，控制显隐

• LED 发光二极管：直接发光，色彩鲜艳

• 电子墨水屏：黑白粒子翻转，护眼但刷新率低（Kindle 常用）

3. 现代渲染逻辑

图像 =显存中的一块内存区域
显卡把显存数据映射到屏幕，即可呈现画面。

🌟 本节课小结

这节课，我们完成了从三维空间到二维屏幕的关键跨越：
MVP 变换 → 视口变换 → 光栅化准备
下一节课，我们将深入遮挡与可见性，解决 “谁在前、谁在后” 的渲染难题。

图形学的浪漫，就是用数学与代码，把虚拟世界一笔笔画进现实～
我们下节课见！👋