Java-Gaming.org Hi !
Featured games (83)
games approved by the League of Dukes
Games in Showcase (523)
Games in Android Showcase (127)
games submitted by our members
Games in WIP (592)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  GLSL - add effect to all screen instead to a specific texture  (Read 880 times)
0 Members and 1 Guest are viewing this topic.
Offline israelg99

Junior Devvie





« Posted 2014-01-21 22:30:51 »

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

My fragment shader -
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
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 Smiley
Offline RobinB

JGO Ninja


Medals: 44
Projects: 1
Exp: 3 years


Spacegame in progress


« Reply #1 - Posted 2014-01-21 22:35:25 »

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.
Offline HeroesGraveDev

JGO Kernel


Medals: 295
Projects: 11
Exp: 3 years


┬─┬ノ(ಠ_ಠノ)(╯°□°)╯︵ ┻━┻


« Reply #2 - Posted 2014-01-21 22:35:31 »

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

Relevant tutorials:
https://github.com/mattdesl/lwjgl-basics/wiki/FrameBufferObjects
https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson3

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline RobinB

JGO Ninja


Medals: 44
Projects: 1
Exp: 3 years


Spacegame in progress


« Reply #3 - Posted 2014-01-21 22:37:42 »

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

Relevant tutorials:
https://github.com/mattdesl/lwjgl-basics/wiki/FrameBufferObjects
https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson3

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

JGO Kernel


Medals: 295
Projects: 11
Exp: 3 years


┬─┬ノ(ಠ_ಠノ)(╯°□°)╯︵ ┻━┻


« Reply #4 - Posted 2014-01-21 22:41:46 »

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

Offline pitbuller
« Reply #5 - Posted 2014-01-21 23:54:59 »

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

Junior Devvie





« Reply #6 - Posted 2014-01-22 14:22:08 »

The ShapeRenderer of LibGDX, doesnt work with GLSL..
This is what i wrote :
1  
2  
3  
4  
5  
6  
7  
8  
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.
Offline davedes
« Reply #7 - Posted 2014-01-22 14:44:11 »

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.

Offline wessles

JGO Wizard


Medals: 74
Projects: 4
Exp: 4 years


Radirius Software


« Reply #8 - Posted 2014-01-22 16:28:40 »

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  Tongue. But I have made one before, and it worked.

Offline dermetfan
« Reply #9 - Posted 2014-01-22 16:42:02 »

I made a video about that:
<a href="http://www.youtube.com/v/caQZKeAYgD8?version=3&amp;hl=en_US&amp;start=" target="_blank">http://www.youtube.com/v/caQZKeAYgD8?version=3&amp;hl=en_US&amp;start=</a>
Here are its vertex and fragment shaders.

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline wessles

JGO Wizard


Medals: 74
Projects: 4
Exp: 4 years


Radirius Software


« Reply #10 - Posted 2014-01-22 16:46:49 »

Amazing tutorial. Subscribed.

Offline israelg99

Junior Devvie





« Reply #11 - Posted 2014-01-22 23:14:53 »

I made a video about that:
<a href="http://www.youtube.com/v/caQZKeAYgD8?version=3&amp;hl=en_US&amp;start=" target="_blank">http://www.youtube.com/v/caQZKeAYgD8?version=3&amp;hl=en_US&amp;start=</a>
Here are its vertex and fragment shaders.

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 Smiley
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

SHC (24 views)
2014-11-25 12:00:59

SHC (24 views)
2014-11-25 11:53:45

Norakomi (22 views)
2014-11-25 11:26:43

Gibbo3771 (22 views)
2014-11-24 19:59:16

trollwarrior1 (36 views)
2014-11-22 12:13:56

xFryIx (74 views)
2014-11-13 12:34:49

digdugdiggy (52 views)
2014-11-12 21:11:50

digdugdiggy (46 views)
2014-11-12 21:10:15

digdugdiggy (41 views)
2014-11-12 21:09:33

kovacsa (69 views)
2014-11-07 19:57:14
Understanding relations between setOrigin, setScale and setPosition in libGdx
by mbabuskov
2014-10-09 22:35:00

Definite guide to supporting multiple device resolutions on Android (2014)
by mbabuskov
2014-10-02 22:36:02

List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!