2

I'm looking for a specific shader or an idea for another approach to get the desired result.

A picture shows the desired result (left-side input, right-side output): enter image description here

I already experimented with modifying a simple vignette shader:

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;
}

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)

Unfortunately it doesn't work and I think whole approach should be changed.

Second idea is to place a dark light in all islands on my map. (with Box2DLights) But this might be a little expensive?

Any other ideas?

genpfault
  • 51,148
  • 11
  • 85
  • 139
Lukas__
  • 93
  • 10
  • 1
    How is the input image created / rendered in the first place? – Tenfour04 Apr 24 '16 at 18:31
  • 1
    The input is created with procedural generation ( https://en.wikipedia.org/wiki/Procedural_generation ). Each vertex is stored in a PolygonSprite ( from libgdx ) and is rendered by a suitable SpriteBatch (PolygonSpriteBatch). The green platforms get separated redered (these are normal sprites). Just the filling of such an island is a polygonsprite. – Lukas__ Apr 24 '16 at 23:24
  • add precomputed attribute distance from the edge and use that as blur/darkening strength. Otherwise you need to cast rays and detect this distance in shader which is slow (similar to http://stackoverflow.com/a/34708022/2521214) ... – Spektre Apr 25 '16 at 06:44
  • You can try to use erosion filter (https://en.wikipedia.org/wiki/Mathematical_morphology). You render object to black-white texture. Then apply erosion filter. You can use result mask to apply darkness to result frame. It needs additional render pass, it can be little slowly. – Unick Apr 25 '16 at 12:56
  • thanks Spektre and Unick for your suggestions. I will evaluate both :) – Lukas__ Apr 25 '16 at 16:01

0 Answers0