Jump to content
  • Advertisement
Sign in to follow this  
zgintasz

How can I implement a GREAT blur?

This topic is 1059 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I wanted a blur like this:

nkOL6Nt.png

 

But I have this(lol):

XiepS7t.png

 

I made the first one in Photoshop, hoping I could achieve something similar in-game. Here is my fragment shader(using radius 5.0):

//"in" attributes from our vertex shader
varying vec4 vColor;
varying vec2 vTexCoord;

//declare uniforms
uniform sampler2D u_texture;
uniform float resolution;
uniform float radius;
uniform vec2 dir;

void main() {
	vec4 sum = vec4(0.0);

    //our original texcoord for this fragment
    vec2 tc = vTexCoord;

    //the amount to blur, i.e. how far off center to sample from
    //1.0 -> blur by one pixel
    //2.0 -> blur by two pixels, etc.
    float blur = radius/resolution;

    //the direction of our blur
    //(1.0, 0.0) -> x-axis blur
    //(0.0, 1.0) -> y-axis blur
    float hstep = dir.x;
    float vstep = dir.y;

    //apply blurring, using a 9-tap filter with predefined gaussian weights

    sum += texture2D(u_texture, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
    sum += texture2D(u_texture, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;

    sum += texture2D(u_texture, vec2(tc.x, tc.y)) * 0.2270270270;

    sum += texture2D(u_texture, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
    sum += texture2D(u_texture, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;

    gl_FragColor = vColor * vec4(sum.rgba);
}

How can I decrappify it? Is it too much performance drawback? I'm actually planning to render a blurred scene a single time, cache it and then later apply a mask on which area to render blurred and unblurred. It will be used while sniper is aiming, I guess it would look cooler than just plain black.

Edited by zgintasz

Share this post


Link to post
Share on other sites
Advertisement

I tried a blur recently (horizontal/vertical split Gaussian) and ended up with a similar effect to your second picture even when I tried with very small offsets. I wonder if there is something else to it e.g. how the texture has been setup.

 

That link TheChubu posted is worth checking out.

Share this post


Link to post
Share on other sites

Thanks, I will check it out. Now I'm wondering, how can these values be too big if I copied them from another tutorial. Are kernel weights const or do they depend on something, like image size?

Share this post


Link to post
Share on other sites


Thanks, I will check it out. Now I'm wondering, how can these values be too big if I copied them from another tutorial. Are kernel weights const or do they depend on something, like image size?
Not the weights. The offsets you sample at.

 

Are you sure you're passing the correct "resolution" parameter for both vertical (height) and horizontal (width) passes? Are you sure youre switching the directions right?

 

Although you should also check the weights are ok (normalized and all).

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!