Apple Metal顶点着色器如何用3个顶点绘制全屏四边形？

核心思路：用超大三角形覆盖全屏，依赖GPU裁剪得到矩形 #

这种方式没有用传统4个顶点画两个三角形的方案，而是靠1个超出裁剪空间的大三角形，让GPU自动裁切掉超出视口的部分，最终得到覆盖全屏的矩形区域。

逐部分拆解代码 #

1. 绘制命令

renderEncoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)

这里直接命令GPU绘制1个三角形，使用索引0到2的3个顶点——全程不需要额外的顶点缓冲区，所有顶点坐标都在着色器里实时生成。

2. 顶点着色器的坐标计算

顶点着色器通过vertex_id（每个顶点的唯一标识，取值为0、1、2）生成对应坐标：

vertex ColorInOut quadPassVertex(uint vid[[vertex_id]])
{
    ColorInOut out;
    
    float4 position;
    position.x = (vid == 2) ? 3.0 : -1.0;
    position.y = (vid == 0) ? -3.0 : 1.0;
    position.zw = 1.0;
    
    out.position = position;
    
    return out;
}

先明确：Metal的裁剪空间范围是x∈[-1,1]，y∈[-1,1]，超出这个范围的像素会被GPU自动裁剪。逐个分析三个顶点的坐标：

• vid=0：坐标为(-1.0, -3.0, 1.0, 1.0)——y值-3远低于裁剪空间的底部边界(-1)
• vid=1：坐标为(-1.0, 1.0, 1.0, 1.0)——正好落在裁剪空间的左上角
• vid=2：坐标为(3.0, 1.0, 1.0, 1.0)——x值3远超出裁剪空间的右边界(1)

这三个点连接成的三角形，会从左上角(-1,1)延伸到右侧屏幕外的(3,1)，再延伸到下方屏幕外的(-1,-3)。GPU渲染时会自动裁切掉超出[-1,1]范围的部分，剩下的可见区域正好是覆盖整个屏幕的矩形（从(-1,-1)到(1,1)）。

这种方案的优势 #

相比用4个顶点画两个三角形的传统方式，它：

• 不需要存储任何顶点数据，节省内存
• 减少GPU处理的顶点数量（3个 vs 4个）
• 无需使用索引缓冲区，简化了渲染流程

内容的提问来源于stack exchange，提问作者Reza Hemadi