2D纹理可变宽度轮廓效果的GLSL实现可行性咨询

该需求非常适合通过GPU实现，且自定义任意宽度的轮廓效果完全可以实现。你之前接触的几像素宽边缘检测方案都是基于单步邻域采样的轻量边缘识别逻辑，本身就不是为大宽度轮廓设计的，不存在技术瓶颈。

常用实现方案 #

方案1：有向距离场（SDF）实现（最推荐） #

这是实现可变宽度轮廓的首选方案，性能稳定且宽度调整无额外开销：

• 先对原始2D纹理生成SDF纹理，每个像素存储该点到最近的纹理不透明区域边缘的距离（可自定义规则：比如内轮廓为负、外轮廓为正），该预处理步骤也可完全在GPU上完成
• 片元着色器渲染时只需做阈值判断即可，参考代码如下：

uniform sampler2D sdfTex;
uniform float outlineWidth; // 外部传入的轮廓宽度，可任意调整
uniform vec4 outlineColor;
uniform vec4 mainColor;
varying vec2 vUv;

void main() {
    float dist = texture2D(sdfTex, vUv).r;
    if (dist <= outlineWidth && dist > 0.0) {
        // 落在轮廓区域，输出轮廓色
        gl_FragColor = outlineColor;
    } else if (dist <= 0.0) {
        // 落在原始纹理内部，输出主体颜色
        gl_FragColor = mainColor;
    } else {
        // 外部透明区域
        gl_FragColor = vec4(0.0);
    }
}

• 调整outlineWidth参数即可直接修改轮廓宽度，哪怕设置到上百像素也不会带来额外性能开销，完美适配任意宽度需求。

方案2：膨胀法（适合动态纹理无需预处理的场景） #

如果你的纹理是实时生成的动态内容，不想做SDF预处理，可以用alpha通道膨胀实现：

• 以轮廓宽度为采样半径，对原始纹理的alpha通道做圆形核的膨胀计算，所有膨胀后alpha大于原始alpha的区域即为轮廓区域
• 大宽度场景可以用多级降采样+膨胀的方式优化，避免单pass采样次数过多降低性能。

效果参考 #

你需求的轮廓效果和下图完全匹配：

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