LibGDX Radial fading shader effect within a moving area

Newbie & Debugging Questions
#1

I’m relatively new to graphics and the magic that happens behind the scenes so I’m probably jumping ahead of myself here.

With that said I am trying to achieve the shader effect shown in this picture, where the grey broken line fades from visible (closer to player) to invisible (further from player).

http://www.badlogicgames.com/forum/download/file.php?id=2174

While the broken line fades, the background items are always visible

I followed mattdesl’s guide and was able to create a flashlight type vignette effect which is close, but I didn’t have much luck because the only way I know to call the shader effects my whole sprite batch.


ShaderProgram.pedantic = false;
shader = new ShaderProgram(Gdx.files.internal("data/vignette.vsh"), Gdx.files.internal("data/vignette.fsh"));
if(!shader.isCompiled())
			System.out.println(shader.getLog());
		batcher.setShader(shader);

My main question would be what type of sprite batch and shader calls in LibGDX. player circle’s radius fade in / out of view. I know this can be achieved with a vignette type effect but my situation is a little more specific. I want the rest of the screen fully visible at all times and only a select layer of textures to be effected.

As I inch my way closer, your tips will help a lot!

#2

Draw the background with normal shading, and do the grey line stuff in a separate pass with shaders on.

Simply make alpha a function of y position with an inverse relationship, so that pixels closer to 0 in Y (near bottom of screen) are low-alpha, and far away ones are opaque.

EDIT: made a quick example on shadertoy:

void main(void)
{
	vec2 uv = gl_FragCoord.xy / iResolution.xy;
	
	vec4 c = vec4(uv.x, uv.x, uv.y, 1.0);  // consider this the background image
	
	// draw grey boxes, multiplying by Y coord to provide alpha effect
	if(mod(uv.x, 0.1) < 0.02 && mod(uv.y, 0.1) < .05) {
		c += 0.3 * uv.y * uv.y; // squaring for more intense effect
	}
	
	gl_FragColor = vec4(c);
}