Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: How to use this blur shader?  (Read 5133 times)

0 Members and 1 Guest are viewing this topic.

smguyk

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
How to use this blur shader?
« on: December 15, 2014, 01:25:06 am »
I want to create a "blur rect" that blurs everything underneath it. I have a rectangle (sf::RectangleShape) that's black and half transparent and I want to apply an additional blur effect to it by using a pixel shader.

The blur.frag is from the shader example (can't find the URL right now):

uniform sampler2D texture;
uniform float blur_radius;

void main()
{
        vec2 offx = vec2(blur_radius, 0.0);
        vec2 offy = vec2(0.0, blur_radius);

        vec4 pixel = texture2D(texture, gl_TexCoord[0].xy)               * 4.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offx)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offx)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offy)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offy)        * 2.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offx - offy) * 1.0 +
                 texture2D(texture, gl_TexCoord[0].xy - offx + offy) * 1.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offx - offy) * 1.0 +
                 texture2D(texture, gl_TexCoord[0].xy + offx + offy) * 1.0;

        gl_FragColor =  gl_Color * (pixel / 16.0);
}

And this is the code:

sf::Shader shader_blur_;
shader_blur_.loadFromFile("./data/blur.frag", sf::Shader::Type::Fragment);
shader_blur_.setParameter("blur_radius", 0.05);

and the draw code:

...
renderTarget.draw(someText);
renderTarget.draw(someButton);
renderTarget.draw(blurRect, &shader_blur_); // has no effect
...

It has no effect. When I apply the shader to the other stuff, for example the someText, it properly blurs the text, but that's not what I want. I want to apply it to the blurRect so everything underneath it (in this case: someText and someButton) gets blurred!

I also tried

renderStates.shader = &shader_blur_;
renderTarget.draw(blurRect, renderStates);

but it doesn't work either.

Could you please help me?
« Last Edit: December 15, 2014, 01:26:56 am by smguyk »

Ixrec

  • Hero Member
  • *****
  • Posts: 1241
    • View Profile
    • Email
Re: How to use this blur shader?
« Reply #1 on: December 15, 2014, 01:32:29 am »
If all of the rectangle's pixels are already the same color, then it shouldn't be a surprise that blurring doesn't do anything.  What would you expect a blurry solid black square to look like?

Shaders apply to the entity being drawn, and nothing else.  They don't magically apply to regions of the screen.

Assuming I understand what you actually want, the simplest solution is to do this as a post-processing step.  Namely, draw *everything* to a RenderTexture, then draw the RenderTexture's texture to the window using a shader.  You would have to modify blur.frag to only act on a subregion of the window, but that shouldn't be too hard.
« Last Edit: December 15, 2014, 01:36:38 am by Ixrec »

smguyk

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
Re: How to use this blur shader?
« Reply #2 on: December 15, 2014, 01:36:25 am »
Well the rectangle is black but also half transparent which means one can still see what's underneath it (albeit everything underneath it is a little darkened).

I want to use a shader to create a blur effect so that in addition to everything underneath the rectangle being darkened everything will also be blurred.

I don't know how to explain it better :/

Ixrec

  • Hero Member
  • *****
  • Posts: 1241
    • View Profile
    • Email
Re: How to use this blur shader?
« Reply #3 on: December 15, 2014, 01:37:44 am »
I realized I misread part of your post and was editing my answer as you posted that.  It should be a bit more useful now.

smguyk

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
Re: How to use this blur shader?
« Reply #4 on: December 15, 2014, 01:47:38 am »
Thanks, I understand now.

It'll take some time for me to do that as I'm fairly new to using shaders.

rcurtis

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: How to use this blur shader?
« Reply #5 on: December 17, 2014, 11:02:02 pm »
I urge you to make a minimum viable example so that people can see what your doing.

 

anything