GLSL - add effect to all screen instead to a specific texture

Newbie & Debugging Questions
#1

Hello programmers,
I wish to add a vignette effect to the screen.

My fragment shader -


varying vec4 vColor;
varying vec2 vTexCoord;

uniform vec2 screenSize;

uniform sampler2D u_texture;
uniform vec4 gameTime;

const float RADIUS = 0.75;

const float SOFTNESS = 0.6;

void main() {

	vec4 texColor = texture2D(u_texture, vTexCoord);

    vec4 timedColor = (vColor + gameTime);

	vec2 position = (gl_FragCoord.xy / screenSize.xy) - vec2(0.5);
	float len = length(position);

	float vignette = smoothstep(RADIUS, RADIUS-SOFTNESS, len);

	texColor.rgb = mix(texColor.rgb, texColor.rgb * vignette, 0.5);
		
	gl_FragColor = vec4(texColor.rgb * timedColor.rgb, texColor.a);
}

the code above, adds the vignette effect only to a texture.
but i want it to add the vignette effect to the whole screen.
I thought may be i should add a transparent background image with the vignette effect on top of everything.

What do you think? what is the best way to implement this in GLSL?
Thanks bros :slight_smile:

#2

For this filter you could just draw an quad on screen on top of everything.
Then you could just lower alpha when nearing the center.

#3

What you’re looking for is post-processing effects, and that requires using FBOs.

Relevant tutorials:


#4

For this effect the scene is not needed for processing, so why waste processing power?

#5

Chances are the OP will want to add more effects later.

#6

Vignette is usually done with low resolution texture scaled to fullscreen. If something is simple don’t make it more complicated.

#7

The ShapeRenderer of LibGDX, doesnt work with GLSL…
This is what i wrote :

Gdx.gl.glEnable(GL10.GL_BLEND);
batch.setShader(Shaders.vignette);
sr.setProjectionMatrix(fixedCamera.combined);
sr.begin(ShapeType.Filled);
sr.setColor(1,1,1,0);
sr.rect(0, 0, GameScreen.ResX, GameScreen.ResY);
sr.end();
Gdx.gl.glDisable(GL10.GL_BLEND);

It doesn’t work with my shader… the shader is the one i posted above.

Just for your information, if i will set the alpha channel to 1 it will make the shape completely white.

#8

Shape renderer uses it’s own shader. It is unrelated to SpriteBatch.

You don’t need a shader. Just use SpriteBatch to draw a feathered vignette across your screen, with linear filtering. Set the batch color to make it black.

#9

You should look into sin() and cos() functions. They are used in general for ellipses in GLSL. Coupled with some feathering, they usually produce a nice vignette effect.

I would show you a GLSL sandbox, but for some reason WebGL is not working :P. But I have made one before, and it worked.

#10

I made a video about that:

caQZKeAYgD8

Here are its vertex and fragment shaders.

#11

Amazing tutorial. Subscribed.

#12

I f**king love your videos, i subscribed long time ago.
I fixed my problem by using your video + adding transparent vignette image.

Thank you all people :slight_smile: