三角形是怎么变成“一格格像素“的？—

接着上一步：三角形拼好了，然后呢？

上一篇我们讲清了"图元装配"——GPU 照着"索引说明书"，把散落的点连成了一个个三角形。

现在，问题很自然地来到了下一步：

好，我手里有一个三角形了。它此刻，还只是一个"用三条边围出来的、空心的线框骨架"。
可我的屏幕，是由一格一格的"像素"组成的呀！屏幕上要显示的，是一片片"填满颜色的实心区域"，而不是几条干巴巴的边线。
那么——这个"空心的三角形线框"，是怎么变成"一格格填满的实心像素"的？

完成这个"从线框到实心像素"魔法转变的工序，就叫——光栅化（Rasterization）。

它是整条渲染流水线里，一个决定性的转折点。今天我们就用大白话，把它彻底讲明白。

一、光栅化，到底在干一件什么事？

先记住一句话，这就是光栅化的全部核心：

光栅化，就是判断"这个三角形，到底盖住了屏幕上哪些像素格子"，然后把这些格子，一个个地"点亮/填上"。

我们用一个绝妙的比喻——“在方格纸上涂三角形”：

想象你有一张方格纸（每一个小方格,就是屏幕上的一个"像素"）。
现在,我给你三个点的位置,让你在这张方格纸上画一个三角形。你先用铅笔,把三个点连起来,画出了三角形的轮廓线。
但老师要求:“不能只画线框,要用彩笔,把三角形内部,一格一格地涂满!”
于是你开始涂色。你会怎么判断哪些格子该涂呢?你会看:“这个小方格,它的中心,是落在三角形内部,还是外部?”
中心在三角形里面→涂!（这个像素属于三角形）
中心在三角形外面→不涂!（这个像素不属于三角形）
你把所有格子都这么判断一遍、涂一遍,最后——一个由"实心小方格"组成的、填满颜色的三角形,就出现在方格纸上了!

这个"在方格纸上，一格一格判断、一格一格填涂"的过程，就是光栅化！

方格纸= 你的屏幕;
每个小方格= 一个像素;
判断格子中心在不在三角形内= 光栅化的核心计算;
填涂= 生成一个个待处理的像素。

看，光栅化就是把"矢量的、连续的、光滑的三角形几何图形"，转换成"离散的、一格一格的像素"的过程。从"数学上的形状"，变成了"屏幕上的方块块"。

二、为什么图片放大了会看到"锯齿"和"马赛克"？

理解了光栅化，你顺便就能搞懂一个生活中的常见现象了。

你有没有发现：一条斜线或者一个圆的边缘，在屏幕上放大了看，总是歪歪扭扭、有"锯齿"，像楼梯台阶一样？

这，正是光栅化的"副作用"！

因为屏幕的像素,是一个个方方正正的格子。而现实中的斜线、曲线是光滑连续的。
用"方格子"去逼近一条"斜线",就好比用一堆小方块去搭一个斜坡——再怎么搭,边缘也是一格一格、锯齿状的台阶,不可能绝对光滑。

这就是"锯齿（Aliasing）"的由来——它是"连续的形状"被"离散的像素"表达时，必然产生的误差。

那怎么办呢？于是就有了大名鼎鼎的技术——“抗锯齿（Anti-Aliasing）”。它的思路很聪明：在锯齿的边缘，填上一些"过渡的、半深半浅的颜色"，从视觉上"骗过"你的眼睛，让那些生硬的台阶，看起来变得柔和、平滑。你在游戏画质设置里看到的 MSAA、FXAA、TAA 等选项，就是各种不同的抗锯齿方案。

看，一个小小的"锯齿"现象背后，藏着的正是"光栅化"这道工序的本质——用有限的方格，去表达无限光滑的形状。

三、光栅化不只是"填格子"，它还很贴心地"传数据"

光栅化最容易被误解的地方是：以为它只是"确定哪些像素被填"。

其实它还干了一件极其重要的事——为每个像素，"插值"计算出各种数据。

这话有点绕，我们还是用比喻：

假设三角形的三个顶点,颜色分别是红、绿、蓝。那么三角形内部的那些像素,该是什么颜色?
光栅化会很聪明地做**“平滑过渡”**:
靠近红色顶点的像素,偏红;
靠近绿色顶点的像素,偏绿;
正中间的像素,是三种颜色的混合……
于是,整个三角形内部,呈现出一片红绿蓝丝滑渐变的效果。

这个"根据三个顶点的值，平滑地推算出内部每个像素的值"的过程，叫"插值（Interpolation）"。

不光是颜色，还有贴图坐标、法线、深度等各种数据，都是光栅化通过"插值"，为每个像素算出来的。

打个比方:三个顶点像是三根"标杆",标好了三个角的数值。而内部千千万万个像素的数值,不用一个个重新测量,而是根据它到三根标杆的"远近",平滑地估算出来。又快又自然。

这一步"插值"极其关键——因为下一道工序（片元着色器给像素上色、算光照）所需要的各种数据，全靠光栅化这里"插值"准备好了！光栅化，是承前启后的"数据加工与分发中心"。

四、把它放回流水线，看清"承上启下"

① 顶点处理 —— 定好每个顶点在屏幕的位置 ↓ ② 图元装配 —— 把顶点连成一个个三角形（线框） ↓ ★ 光栅化（Rasterization）★ ← 我们在这里！ —— 判断三角形盖住了哪些像素格子（填格子） —— 为每个像素，插值算好颜色、贴图、深度等数据 —— 把这一堆"待上色的像素（片元）"，交给下一步 ↓ ③ 片元处理 —— 给每个像素，算出最终颜色（上色、打光） ↓ ……测试、输出到屏幕

看清它的枢纽地位了吗？

在它之前，流水线处理的是"顶点、三角形"这种"几何图形"（数量少，是"形状"）;
在它之后，流水线处理的是"像素、片元"这种"屏幕上的点"（数量巨大，是"颜色点"）。

光栅化，正是"从几何世界"跨入"像素世界"的那道大门、那座桥梁。过了这道门，我们就从"研究形状"，正式进入了"研究每个点该是什么颜色"的阶段。

尾声：光栅化的启示——“再宏大的连续，最终都要落地为一个个具体的当下”

我们讲完了光栅化——这道把"空心的三角形线框"，变成"一格格填满的实心像素"的神奇工序。它用"方格纸涂色"般朴素的方式，完成了整条流水线中最关键的一次跨越：从"连续、光滑、理想的几何形状"，落地为"离散、具体、真实的一个个像素"。

而在这道"从连续到离散、从形状到像素"的工序里，藏着一个耐人寻味的哲理：

再宏大、再连续、再理想的东西，最终，都要"落地"为一个个具体的、有限的、可执行的"当下"。

你看那个三角形：

在数学上，它是一个"完美、连续、无限精确"的理想图形;
可它要真正显示出来、被人看见，就必须"落地"——被拆解成一个个具体的、有限的像素格子。哪怕会因此产生"锯齿"，哪怕不再那么"完美"，但唯有如此，它才从"抽象的理念"，变成了"眼前的现实"。

这多像我们的理想与人生啊。

我们心中常怀着一些"宏大而连续"的理想——一个远大的梦想、一个完美的计划、一幅美好的蓝图。它们在脑海里，光滑、圆满、毫无瑕疵;
可理想若只停留在"连续的想象"里，它就永远只是一个"三角形线框"，虚无缥缈，无法被世界"看见"。唯有把它"光栅化"——拆解成一个个具体的、当下能执行的小步骤、小行动（像素），一格一格地、踏踏实实地去"填涂"，它才能真正"显示"在现实的屏幕上;
而光栅化还坦然地告诉我们：“落地”，往往意味着"接受不完美"。连续的理想，一旦变成离散的现实，难免会有"锯齿"、有妥协、有遗憾。但成熟的人懂得：与其守着一个"完美却永不落地"的空想，不如拥抱一个"带着锯齿却真实存在"的现实——因为，还可以用"抗锯齿"般的智慧，去慢慢地修饰、优化、让它趋于圆满。