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

[Bilibili 同步视频](#Bilibili 同步视频)
[🔹 开篇：课程总览与今日核心](#🔹 开篇：课程总览与今日核心)
[📝 课程配套：作业与交流指南](#📝 课程配套：作业与交流指南)
- [✅ 作业 0 反馈](#✅ 作业 0 反馈)
- [✅ 作业 1 及后续安排](#✅ 作业 1 及后续安排)
- [✅ 交流小建议](#✅ 交流小建议)
[🔁 上节课回顾：观测变换全梳理](#🔁 上节课回顾：观测变换全梳理)
[🎥 透视投影：视锥的定义逻辑](#🎥 透视投影：视锥的定义逻辑)
- [1. 宽高比（Aspect Ratio）](#1. 宽高比（Aspect Ratio）)
- [2. 垂直可视角度（FOV Y）](#2. 垂直可视角度（FOV Y）)
- [🔍 参数转化关系](#🔍 参数转化关系)
[🖼️ 屏幕空间：从数学空间到像素世界](#🖼️ 屏幕空间：从数学空间到像素世界)
- [✨ 屏幕是什么？](#✨ 屏幕是什么？)
- [✨ 像素（Pixel）](#✨ 像素（Pixel）)
- [✨ 屏幕坐标系](#✨ 屏幕坐标系)
[🔄 视口变换：连接 [-1,1] 与屏幕空间](#🔄 视口变换：连接 [-1,1] 与屏幕空间)
[✨ 光栅化：把三角形打碎成像素](#✨ 光栅化：把三角形打碎成像素)
[📺 拓展：那些经典的光栅显示设备](#📺 拓展：那些经典的光栅显示设备)
- [1. CRT 阴极射线管](#1. CRT 阴极射线管)
- [2. 现代平板显示](#2. 现代平板显示)
- [3. 现代渲染逻辑](#3. 现代渲染逻辑)
[🌟 本节课小结](#🌟 本节课小结)

Bilibili 同步视频

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

你好呀，欢迎走进现代计算机图形学入门 第五节课～✨

从这节课开始，我们正式告别基础变换，踏入三角形光栅化的世界 ------ 这是实时渲染、游戏、VR 成像最核心的环节，也是把三维世界真正 "画" 到屏幕上的魔法起点。

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

我们的图形学之旅，一共分为四大板块。

而本节课聚焦的光栅化成像 ，正是左下角 "双车与阴影" 所代表的领域：

它是实时渲染的根基，是游戏画面、虚拟世界得以呈现的底层逻辑。

前几节课，我们深耕变换：

模型变换 → 视图变换 → 投影变换，一步步把三维场景规整到统一空间。

今天，我们要回答一个关键问题：
当三维物体被塞进 [-1,1]³ 的标准立方体后，下一步究竟该如何画在屏幕上？

答案只有一个：光栅化（Rasterization）。

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

✅ 作业 0 反馈

截至目前，作业 0 共收到 188 份提交 ！

即便课程不强制，大家依旧积极参与，这份热情值得肯定～👍

作业 0 的意义，正是帮你提前扫清虚拟机、编译等技术障碍，为后续正式作业铺路。

⚠️ 作业 0 仅提交，不做批改。

✅ 作业 1 及后续安排

本节课计划发布作业 1（正式作业）
后续每周 1 次作业，分为基础要求 + 提高部分
两部分独立计分；结业证书以基础要求为准
提高部分面向兴趣拓展，自由发挥即可

✅ 交流小建议

课程 BBS 提问时，请清晰描述：做了什么 → 得到什么结果 → 问题在哪
专属课程答疑群正在规划中，避免无关信息干扰，提升答疑效率

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

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

视图变换

把相机固定到原点 → 看向 -Z → 向上为 Y 的标准位姿，所有物体同步移动，保证视角统一。
投影变换
- 正交投影：直接丢弃深度，相机在无限远，无近大远小
- 透视投影：符合人眼视觉，近大远小，先转为正交再投影
最终结果：所有物体被压缩到 [-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 变换 → 视口变换 → 光栅化准备

下一节课，我们将深入遮挡与可见性，解决 "谁在前、谁在后" 的渲染难题。

图形学的浪漫，就是用数学与代码，把虚拟世界一笔笔画进现实～

我们下节课见！👋