如何在WGSL着色器中无中间光栅化实现多边形边缘模糊/抗锯齿？

核心思路：片元着色器内计算边缘距离实现软效果 #

不用额外渲染到纹理再做模糊，直接在片元着色器中计算当前片元到多边形边缘的屏幕空间距离，根据距离动态调整透明度，即可实现边缘向外模糊的软笔刷效果，同时保证相邻三角形边缘连续。

步骤1：顶点着色器传递关键数据 #

需要在顶点阶段输出片元插值所需的重心坐标，以及屏幕位置用于后续像素空间计算。修改后的WGSL顶点着色器如下：

struct VertexOutput {
    @builtin(position) pos: vec4f,
    @location(0) barycentric: vec3f,
};

@vertex
fn vertex_main(
    @location(0) pos: vec3f,
    @location(1) bary: vec3f  // 从缓冲区传入顶点重心坐标，如(1,0,0)、(0,1,0)、(0,0,1)
) -> VertexOutput {
    return VertexOutput(
        vec4f(pos, 1.0),
        bary
    );
}

步骤2：片元着色器实现软边缘效果 #

通过重心坐标的导数计算片元到三角形边缘的像素距离，根据设定的模糊宽度平滑调整透明度，实现向外模糊的软边缘：

@fragment
fn fragment_main(
    @location(0) barycentric: vec3f
) -> @location(0) vec4f {
    // 计算重心坐标的屏幕空间导数，推导片元到边缘的像素距离
    let ddxBary = ddx(barycentric);
    let ddyBary = ddy(barycentric);
    let edgeDist = min(min(barycentric.x, barycentric.y), barycentric.z);
    let edgeDistDeriv = sqrt(dot(ddxBary, ddxBary) + dot(ddyBary, ddyBary));
    let pixelEdgeDist = edgeDist / edgeDistDeriv;

    // 设置边缘模糊宽度（单位：像素）
    const blurWidth = 3.0;
    // 计算透明度：边缘处透明，向内逐渐不透明
    let alpha = smoothstep(0.0, blurWidth, pixelEdgeDist);
    let finalAlpha = 1.0 - alpha;

    // 纯色填充+软边缘透明度
    return vec4f(1.0, 0.0, 1.0, finalAlpha);
}

关键细节说明 #

• 重心坐标插值：每个顶点传入对应的重心坐标，片元阶段插值后的重心坐标可直接反映片元到三角形三条边的相对位置。
• 像素距离计算：利用ddx/ddy函数计算重心坐标的屏幕空间导数，将相对距离转换为实际像素距离，确保模糊宽度的精确性。
• 连续边缘保证：每个三角形独立计算自身边缘的透明度，相邻三角形的边缘会自然衔接，不会出现断裂。

其他可选方案 #

• 基础抗锯齿：MSAA：如果渲染管线支持，开启4x/8x多重采样抗锯齿，可快速改善边缘生硬问题，但无法实现向外模糊的软效果。
• 距离场预计算：若多边形为静态，可预先计算距离场纹理，但需要额外预处理步骤，不符合“无需单独纹理”的需求。

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