显卡是怎么把 3D 变成 2D 的？渲染管线揭秘

显卡是怎么把 3D 变成 2D 的？渲染管线揭秘

你玩的每一款 3D 游戏，显卡每秒要把几百万个三角形"压扁"成屏幕上的 200 万个像素。这个从 3D 模型到 2D 图像的过程叫渲染管线，是图形学的核心。今天讲透它，你会明白显卡到底在忙什么。

一、渲染管线：一串固定工序

显卡不是"一次算完整张图"，而是把渲染拆成一串流水线工序（与工厂流水线同理）：

顶点数据 → [顶点着色] → [图元装配] → [光栅化] → [片元着色] → [输出合并] → 屏幕

各阶段职责：

• 顶点着色（VS）：把每个 3D 顶点从模型空间变换到屏幕空间（矩阵乘法）
• 图元装配：把顶点组装成三角形
• 光栅化：判断三角形覆盖了哪些像素（3D → 2D 的关键）
• 片元着色（PS）：给每个像素算颜色（光照、纹理、阴影）
• 输出合并：处理深度测试、混合，写入帧缓冲

二、核心：光栅化怎么把三角形"涂"到屏幕

光栅化回答一个问题：这个三角形覆盖了哪些像素？ 常用"半平面判断"：一个点在三角形内部，当且仅当它总在同一侧。

对 1920×1080 屏幕上的每个像素做一次判断——100 万个三角形 × 200 万像素的暴力计算，这就是显卡算力恐怖的原因，也是 GPU 存在的意义（数千个核心并行轰炸）。

三、代码演示：3D 三角形到像素

import numpy as np

# 三个 3D 顶点 -> 透视投影 -> 屏幕坐标
verts3d = np.array([[-1,-1,1],[1,-1,1],[0,1,1]])
proj = verts3d[:, :2] / verts3d[:, 2:3]      # 透视除法（近大远小）
screen = ((proj + 1) / 2 * 7).astype(int)     # 映射到 8x8 屏幕
print(f"投影到屏幕坐标: {screen.tolist()}")

def inside(p, a, b, c):    # 半平面法：点在三角形内？
    def sign(p1, p2, p3):
        return (p1[0]-p3[0])*(p2[1]-p3[1]) - (p2[0]-p3[0])*(p1[1]-p3[1])
    d1, d2, d3 = sign(p,a,b), sign(p,b,c), sign(p,c,a)
    return not ((d1<0 or d2<0 or d3<0) and (d1>0 or d2>0 or d3>0))

pixels = [(x,y) for y in range(8) for x in range(8)
          if inside((x,y), screen[0], screen[1], screen[2])]
print(f"光栅化: 三角形覆盖 {len(pixels)} 个像素")
print("每个像素再由片元着色器算颜色 -> 输出图像")

运行输出：

投影到屏幕坐标: [[0, 0], [7, 0], [3, 7]]
光栅化: 三角形覆盖 30 个像素
每个像素再由片元着色器算颜色 -> 输出图像

3 个 3D 顶点 → 投影到平面 → 光栅化找出覆盖的 30 个像素 → 逐像素着色。真实显卡把这套流程并行到几千个核心上，每秒跑几十亿次，才有你看到的丝滑画面。

四、避坑清单

1. 顶点着色器和片元着色器是"可编程"的：其他阶段（光栅化、装配）是固定硬件——这就是 shader 的由来
2. 透视除法是"近大远小"的来源：除以 z 坐标实现近处大、远处小
3. 深度测试省一半算力：先画近的，被遮挡的片元直接丢弃（Early-Z）
4. 三角形越小越多，光栅化开销越大：模型面数与性能非线性的原因
5. API 选择影响大：Vulkan/Metal 比 OpenGL 开销低，因为给了开发者更多底层控制

五、想系统学图形学？

本文精选自 ima 知识号【Kruptos】《GPU渲染与图形学》订阅库（第 001 期图形学与 GPU 渲染管线导论、第 004 期渲染管线总览等 100 期系统教程，从 GPU 硬件、渲染管线、着色器到同步原语与渲染 API，每期配可运行 Python 代码）。

📚 完整系列 100 期 + 配套代码，已在 ima 知识号发布

本文只是系列的一个切片。完整系列（100 期系统教程 + 每期可运行代码）在 ima 知识号【Kruptos】持续更新中：

• 🗂 68+ 技术知识库：信号与系统、SDR 软件无线电、数字信号处理、操作系统、AI Agent、大模型微调……几乎覆盖全部软硬件技术栈
• 🧠 8 款 AI 技能：系列生产、知识库管理、CMMI 受管开发、自进化 Agent 等，已在 ima 技能广场上架，即装即用
• ✅ 全部免费订阅，后续更新自动推送

🔍 订阅方式：打开 ima（腾讯智能工作台）→ 搜索「Kruptos」→ 一键订阅。或在 ima 内直接搜索《GPU渲染与图形学》等知识库名称。

💬 你写过 shader 吗？或者好奇游戏画质为什么吃显卡？评论区聊聊——想看光栅化细节还是着色器编程，点赞高的安排。

作者：Kruptos（西电毕业，13 年无线通信/DSP/嵌入式科研）｜原创内容，转载注明出处