title: GLSL Smooth border shader
body: <p>I'm looking for a specific shader or an idea for another approach to get the desired result.</p>
  
  <p>A picture shows the desired result (left-side input, right-side output):
  <a href="https://i.stack.imgur.com/yJ8Ki.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yJ8Ki.jpg" alt="enter image description here"></a></p>
  
  <p>I already experimented with modifying a simple vignette shader:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I think it's more confusing than helpful when I show you my modified code. I tried to imitate the same concept as of the vignette shader: Used the bounding box of the island, transforming x,y,width,height in screenCoords and get the relative position of fragCoords to island's center (normal vignette would use the screen resolution instead the island 'resolution'). Then I wanted to invert the vignette effect (inside dark, outside fade out)</p>
  
  <p>Unfortunately it doesn't work and I think whole approach should be changed.</p>
  
  <p>Second idea is to place a dark light in all islands on my map. (with Box2DLights)
  But this might be a little expensive?</p>
  
  <p>Any other ideas?</p>