Skia或Direct2D如何通过GPU渲染线条、多边形等2D矢量图形？

问题1：圆角矩形的GPU渲染是否由三角形组合而成？ #

不一定，根据实现方案的不同分为两种情况：

• 早期/轻量实现方案：会采用三角形组合的方式。一般是把圆角矩形拆分为中间的矩形区域、四个角的扇形区域，每个扇形再拆分为多个小三角形拼接。这种方案逻辑简单，不需要复杂的像素着色器计算，但缺点很明显：圆角精度要求越高，需要的三角形数量越多，会额外占用顶点缓存空间，也会提升Draw Call开销。
• 主流工业级实现（Skia Ganesh后端、Direct2D等）：不会完全依赖三角形组合，仅会先生成一个覆盖整个圆角矩形包围盒的矩形面片（仅由两个三角形组成的Quad），剩下的形状判断逻辑全部放在像素着色器中实现，仅在部分优化场景下会把四个圆角和中间直边区域拆分为多个小Quad，减少像素着色器的无效计算。

问题2：圆角矩形的GPU渲染是否完全通过pixel shaders实现？ #

也不是，整个流程是顶点阶段和像素着色器配合完成的：

• 顶点阶段的工作：输出覆盖圆角矩形包围盒的Quad顶点，同时将圆角矩形的核心参数（位置、宽高、四个角的圆角半径、填充/描边参数、渐变参数等）通过常量缓冲区或者顶点属性传递到后续阶段，部分可插值的参数会在顶点阶段完成计算后插值传递给像素着色器，减少像素侧的计算量。
• 像素着色器的工作：对每个像素计算当前坐标到圆角矩形实际边界的有向距离（SDF），判断当前像素属于形状内部、外部还是抗锯齿过渡区域，最终输出对应颜色。

核心原理基础示例 #

以下是简化版的圆角矩形GPU渲染核心像素着色器代码（GLSL语法），省略了描边、多圆角半径、复杂填充等工业级实现的额外逻辑：

// 圆角矩形有向距离场计算函数
float roundedRectSDF(vec2 pos, float halfW, float halfH, float r) {
  // 坐标映射到第一象限简化计算
  vec2 q = abs(pos) - vec2(halfW - r, halfH - r);
  // 计算有向距离：形状内部为负，外部为正
  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
}

void main() {
  // 以下参数均从顶点阶段插值或常量缓冲区传入
  vec2 currentPos = vFragmentPos; // 当前像素相对圆角矩形中心的坐标
  float halfWidth = uRectHalfWidth; // 矩形半宽
  float halfHeight = uRectHalfHeight; // 矩形半高
  float cornerRadius = uCornerRadius; // 圆角半径
  vec4 fillColor = uFillColor; // 填充颜色
  
  float dist = roundedRectSDF(currentPos, halfWidth, halfHeight, cornerRadius);
  // 抗锯齿处理：1像素范围内做透明度过渡
  float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);
  
  gl_FragColor = vec4(fillColor.rgb, fillColor.a * alpha);
}

上述代码就是Skia、Direct2D这类框架中圆角矩形GPU渲染的核心逻辑，工业级实现仅在此基础上扩展了更多边界情况处理和性能优化策略，核心的SDF形状判断逻辑基本一致。

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