【WebGPU Unleashed】0.1 GPU管线

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123

前面我们学习了应用程序如何通过驱动程序与GPU连接。然而，驱动程序仅通过在应用程序和 GPU 之间传递数据来处理管线工作，他们不执行任何实际的图形处理。一旦绘图请求发送到 GPU，它必须由 GPU 执行并最终产生可见像素。在本节中，我们将探讨 GPU 如何处理绘图命令并通过称为 GPU 管线的过程生成像素。 GPU管线可以比作像素生产工厂：它以配置和输入数据为原材料，生产像素作为最终产品。在像素制造过程中，我们要经历一系列步骤。其中一些步骤是可编程的，一些只是可配置的，还有一些具有固定的功能。接下来我们将详细查看每个管线步骤。

图形编程本质上涉及配置 GPU 管线、将输入数据输入其中并接收结果。因此，对GPU管线有扎实而深入的了解是学习GPU图形编程最重要的方面。 GPU编程的核心活动包括定义管线和提供着色器程序。了解 GPU 管线至关重要，甚至比熟悉特定图形 API 更重要。如果你有使用多个 API 的经验，你会注意到它们都是围绕与 GPU 管线配合使用而设计的。因此，充分了解 GPU 管线可以让我们快速适应新的 API。

GPU编程的三种类型数据

首先，让我们了解一下哪些数据和命令被发送到 GPU。到目前为止，我们一直将这些称为绘制命令或绘制请求，但它们实际上包含什么？在对 GPU 进行编程时，我们需要为其提供三种类型的数据才能有效地工作。

第一种类型的数据是管线配置。打个比方，如果GPU是一位多才多艺的艺术家，我们可以通过提供着色器程序将其配置为达芬奇或鲁本斯风格的绘画。配置包含许多设置，我们将在本书中了解这些设置，但关键组件是着色器程序。着色器是在 GPU 上运行的程序，可确定如何变换几何图形以及如何对像素着色。但是，着色器程序并不是配置所需的唯一数据，还涉及其他步骤，我们将在以后的章节中介绍。

其次，一旦配置了 GPU 管线，就可以生成像素了。我们现在需要向其提供原始输入，通常是数百或数百万个三角形和纹理贴图，GPU 管线会将其转换为像素。

最后，在上述过程中可能还需要其他元数据，通常是uniform缓冲区的形式。如果我们将着色器程序比作在 GPU 上运行的程序，那么uniform就像我们传递给程序的参数，类似于命令行变量。

如何理解GPU管线

现在让我们看一下 GPU 管线，它是 GPU 硬件的理论抽象。虽然它不一定与实际的硬件实现相匹配，但从软件工程的角度来看，它是实时 3D 编程最重要的概念，因为我们所有的编程活动都围绕着 GPU 管线的使用。

理解 GPU 管线的一个好方法是将 GPU 想象成一个工厂。原材料是用三角形表示的几何形状，最终产品是像素。 GPU管线是将原材料转化为最终产品的过程。

在 3D 世界中，三角形是所有形状的基本构建块，就像像素对于 2D 图形一样。你可能会问为什么使用三角形？这是因为使用三角形是表示任意表面的最具效益的方式。水密性是计算机图形学中的一个重要概念。如果网格不包含孔并且具有明确的内部和外部，则该网格被认为是防水的。有关水密性的更严格定义，你可以访问此博客和此视频。

虽然使用三角形并不是表示 3D 形状的唯一方法，但它是最有效的。例如，在基于点的渲染中，小圆盘用于表示 3D 形状的表面。然而，这些圆盘必须在底层 3D 表面上进行密集采样，以避免间隙并防止出现伪影。即使进行密集采样，如果我们放大得足够大，间隙仍然可能是可见的。另一方面，即使放大，三角形也可以没有任何间隙地覆盖表面。例如，可以使用三角形网格来表示球体的 3D 模型，每个三角形平滑地过渡到相邻三角形以形成无缝、无间隙的表面。即使在高放大倍数下查看，也能准确渲染 3D 形状。

在 GPU 工厂内，三角形经过一系列步骤变成像素，这些步骤便构成了 GPU 管线。过去，GPU 管线是固定的，只能以预定义的方式产生像素。然而现在它已经变得可编程，允许我们编写称为着色器的 GPU 程序，并定义我们自己的像素生成方式。

GPU管线的四个阶段

经典的 GPU 管线由四个阶段组成：顶点阶段、光栅化、片段阶段和混合。虽然现代管线引入了额外的阶段，但专注于这四个阶段对于大多数图形任务来说已经足够了。在这些阶段中，只有顶点和片段阶段是可编程的。每个阶段都会增量处理数据，将三角形转换为最终像素。现在让我们详细研究一下每个阶段。

第一阶段是顶点阶段。此阶段的主要目的是将 3D 几何图形转换为扁平的 2D 几何图形。此阶段的输入是称为世界空间的 3D 坐标系中的三角形。此阶段的输出仍然是三角形，但它们已被“压缩”到 2D 屏幕坐标系（也称为剪辑空间）中。将坐标从世界空间转换到屏幕空间的确切方法由顶点着色器程序确定。常见的操作包括透视投影和正交投影。无论应用何种算法，目标都是将 3D 对象投影为 2D，以便可以将它们采样为像素。

此外，该阶段还执行优化技术以减少后续阶段的工作量。这些技术包括剔除（去除背对视图的三角形）和剪切（消除可见区域之外的片段）。

第二阶段是光栅化。光栅化是将 2D 形状转换为覆盖同一区域的像素的过程。该阶段的输出称为片段。需要注意的是，片段还不是像素。虽然两者都是 2D 平面中的点，但像素具有颜色并且可显示，而片段是具有任意数据的点。附加到片段的具体数据可以包括纹理坐标、深度和颜色，但它们的最终颜色尚未确定。这是下一阶段的任务。

当我们将三角形数据输入管道时，我们可以将元数据附加到三角形顶点。典型的例子包括纹理坐标和颜色。三角形只有三个顶点，但是一旦将其转换为片段，就会生成更多的片段来覆盖三角形。我们如何将元数据附加到这些片段上呢？光栅化阶段使用插值来为所有片段生成相应的元数据。简而言之，插值根据每个片段到三个顶点的距离为其分配元数据值的加权平均值。

光栅化过程可以比作工人们铺设三角形砖墙。当我们生成片段之后，就会进入片段着色器阶段。在此阶段，我们为每个片段分配一种颜色，有效地将其转换为一个像素。着色逻辑由我们提供的片段着色器程序决定。

最后，混合阶段将每个新生成的像素应用到帧缓冲区中的现有图像。帧缓冲区是包含当前渲染图像的临时存储区域，包括所有先前绘制的元素。在混合阶段，我们可以灵活地定义如何将现有像素与新像素混合。例如，混合对于实现透明效果特别有用。混合完成后，帧缓冲区就会呈现给用户，从而结束一帧的渲染。

WebGPU和其他3D图形API提供了一组函数来帮助我们定义图形管道并将资源发送到GPU进行处理。因此，如何配置管道是我们研究的重点。

总结

在结束本节之前，我们首先讨论一下为什么需要 GPU。为什么我们不能只使用强大的 CPU 来处理图形工作？打个比方，想象一下你是一个工厂主，你总是想雇用拥有博士学位的员工来替你打工吗？如果你正在建设一家专利工厂，那么聘请博士是非常有意义的。然而，如果你正在建造一家香蕉罐头工厂，并且任务只是剥香蕉皮，那么雇用 100 只猴子可能是更好的选择。使用相同数量的资源，可以维持更大的猴子团队。博士非常有能力，可以在研究项目上进行良好的合作，但剥香蕉不需要广泛的研究能力或合作。 CPU 就像博士一样，它们非常有能力并且设计得能够很好地处理同步。另一方面，GPU 包含大量小型计算单元阵列，可以快速处理更简单的任务，尤其是当任务是独立且不需要协作时。那么对于展平三角形和着色像素，这两项任务都很简单且独立，因此 GPU 是它们的理想硬件。过去，GPU 仅用于图形，但一旦它们变得可编程，越来越多的用例开始从中受益，例如人工智能、物理模拟以及视频和图像处理。

本课概述了 GPU 驱动程序和图形管道，解释了管道如何将三角形转换为像素。在下一课中，我们将学习如何配置第一个 WebGPU 管道来渲染简单的场景。