Question

First of all sorry for my English, it's not my native language, but I hope you will understand what I want to ask.

So basically I want to blur an image around it's center. Here's an image of the scene: (the blue circle like thing is the center)

enter image description here

After blurring and stuff I'm expecting something like this:

enter image description here

Currently I'm rendering the rectangle 300 times, each time 1px bigger than the previous. But this method is slow...

So is it possible to achieve this effect with GLSL shaders? (I've tried radial blur but the result is not exactly what I want.)

Solved! I think this isn't the best way, but it works... Here's the fragment shader code:

precision mediump float;

uniform float lightRadius;
uniform vec2 resolution;

uniform sampler2D Texture;
varying vec2 texCoord;

void main() 
{
    vec2 step = vec2(1.0 / resolution.x, 1.0 / resolution.y);

    vec2 cent = vec2(.5,.5);
    vec2 dir = texCoord - cent;
    dir = normalize(dir);

    float dist = length(texCoord - cent);

    bool s = false;
    vec3 col = vec3(1,1,1);
    for (float i=0.0; i< lightRadius.x;i+=1.0) 
    {
        vec2 pix = cent + (dir * i) * step;

        float dist2 = length(pix - cent);

        if(dist2>dist)
            break;

        vec4 color = texture2D(Texture, pix);

        if(color.a > 0.5)
        {
            s = true;
            break;
        }
    }

    if(s == true){
        gl_FragColor = vec4(0,0,0,1);
    }else{
        gl_FragColor = vec4(1,1,1,0);
    }
}
Was it helpful?

Solution

If you want to blur the image around some center point, then you really are looking for a radial blur.

If you want some kind of "godray" effect, I could suggest reading - this article.

I hope it helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top