基于Vulkan模板缓冲的2D无预计算法线轮廓生成方案问询

核心思路：无预计算法线的顶点外扩 #

要实现平行间距一致的轮廓，本质是对2D多边形做偏移（Offset Polygon），无需预存法线，可通过相邻边的垂直向量计算外扩方向：

步骤1：单个顶点的外扩计算 #

对于多边形的每个顶点 ( V )：

• 取前一条边的向量 ( \vec{e}{prev} = V - V{prev} )，后一条边的向量 ( \vec{e}{next} = V{next} - V )
• 计算两条边的单位向外垂直向量：
  边向量 ( (x,y) ) 的垂直向量为 ( (-y,x) )（逆时针多边形，向外方向）或 ( (y,-x) )（顺时针多边形），需先通过多边形面积判断 winding order：

  多边形面积公式：( Area = 0.5 \times \sum_{i=0}^{n-1} (x_i y_{i+1} - x_{i+1} y_i) )，正值为逆时针，负值为顺时针

• 将两个垂直向量相加后归一化，得到该顶点的外扩方向向量
• 方向向量乘以轮廓宽度，加到原顶点坐标上，得到外扩后的顶点（如 ( L = I + \text{偏移量} )）

步骤2：特殊情况处理 #

• 尖锐角：若相邻边夹角过小，直接平均垂直向量会导致偏移边交叉，可采用：
  • Miter Join：计算两条边延长线的交点作为外扩顶点
  • Round Join：用圆弧连接外扩顶点（适合GPU几何着色器实时生成）
• 凹多边形：需确保垂直向量始终指向多边形外部，通过winding order判断垂直方向即可避免向内偏移

CPU vs GPU 计算选择 #

CPU计算 #

• 适用场景：静态2D形状（如UI元素、固定场景物体）
• 优势：仅计算一次，将外扩后的顶点存入顶点缓冲，渲染时直接复用，节省GPU计算资源
• 注意：提前处理所有特殊情况（如尖锐角、凹多边形），避免渲染时出现异常

GPU计算 #

• 适用场景：动态变形的2D物体（如角色动画、实时交互元素）
• 实现方式：
  1. 几何着色器：接收原顶点数据，实时计算每个顶点的外扩偏移，输出外扩后的图元
  2. 计算着色器：批量处理所有顶点，将外扩结果写入临时顶点缓冲，再用于渲染
• 优势：无需预存外扩顶点，适配动态形状的实时变化

示例：Vulkan几何着色器实现外扩 #

#version 450
layout(triangles) in;
layout(triangle_strip, max_vertices=3) out;

uniform float outline_width;
uniform bool is_clockwise;

// 获取向外的垂直向量
vec2 get_outward_normal(vec2 edge) {
    return is_clockwise ? vec2(edge.y, -edge.x) : vec2(-edge.y, edge.x);
}

void main() {
    vec2 v0 = gl_in[0].gl_Position.xy;
    vec2 v1 = gl_in[1].gl_Position.xy;
    vec2 v2 = gl_in[2].gl_Position.xy;

    // 计算边向量
    vec2 e0 = v1 - v0;
    vec2 e1 = v2 - v1;
    vec2 e2 = v0 - v2;

    // 计算单位向外法线
    vec2 n0 = normalize(get_outward_normal(e0));
    vec2 n1 = normalize(get_outward_normal(e1));
    vec2 n2 = normalize(get_outward_normal(e2));

    // 计算顶点外扩偏移（相邻法线的平均方向）
    vec2 offset0 = normalize(n0 + n2) * outline_width;
    vec2 offset1 = normalize(n0 + n1) * outline_width;
    vec2 offset2 = normalize(n1 + n2) * outline_width;

    // 输出外扩后的顶点
    gl_Position = vec4(v0 + offset0, 0.0, 1.0);
    EmitVertex();
    gl_Position = vec4(v1 + offset1, 0.0, 1.0);
    EmitVertex();
    gl_Position = vec4(v2 + offset2, 0.0, 1.0);
    EmitVertex();
    EndPrimitive();
}

Vulkan模板缓冲配置 #

1. 第一次渲染（原形状）：
   • 模板测试：设置为 VK_COMPARE_OP_ALWAYS，模板写入操作设为 VK_STENCIL_OP_REPLACE，参考值设为1
   • 颜色缓冲：禁用写入（或写入原物体颜色）
2. 第二次渲染（外扩形状）：
   • 模板测试：设置为 VK_COMPARE_OP_NOT_EQUAL，参考值设为1，仅渲染模板值不为1的区域（即轮廓）
   • 颜色缓冲：写入轮廓颜色

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