GLSL平滑边框着色器

Question

我正在寻找一个特定的着色器或另一种方法来获得理想的结果。

图片显示了所需的结果（左侧输入，右侧输出）：

我已经尝试修改一个简单的晕影着色器：

varying vec4 v_color;
varying vec2 v_texCoord0;

uniform vec2 u_resolution;
uniform sampler2D u_sampler2D;

const float outerRadius = .65, innerRadius = .4, intensity = .6;

void main() {
    vec4 color = texture2D(u_sampler2D, v_texCoord0) * v_color;

    vec2 relativePosition = gl_FragCoord.xy / u_resolution - .5;
    float len = length(relativePosition);
    float vignette = smoothstep(outerRadius, innerRadius, len);
    color.rgb = mix(color.rgb, color.rgb * vignette, intensity);

    gl_FragColor = color;
}

我认为当我向您展示修改过的代码时，它会让您感到困惑而不是有用。我试图模仿与晕影着色器相同的概念：使用岛的边界框，在screenCoords中转换x，y，width，height并获得fragCoords到岛屿中心的相对位置（正常的小插图将使用屏幕分辨率而不是岛屿的分辨率＆＃39;）。然后我想反转晕影效果（在黑暗中，在外面淡出）

不幸的是，它不起作用，我认为应该改变整个方法。

第二个想法是在地图上的所有岛屿上放置一盏暗光。 （使用Box2DLights） 但这可能有点贵？

还有其他想法吗？