Image blur effect in shaders

Question

I want to do image effects such as screen blur in my game but I have a problem that it just darkens the screen slightly.

Here is the class for the FBO

GLuint m_fbo;
GLuint m_fboTexture;
GLuint m_fboDepthBuffer;

void FBO::Initialize(float width, float height)
{
    glGenFramebuffersEXT(1, &m_fbo);
    glGenTextures(1, &m_fboTexture);
    glGenRenderbuffersEXT(1, &m_fboDepthBuffer);

    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, m_fbo);

    glEnable(GL_TEXTURE_2D);
    glBindTexture(GL_TEXTURE_2D, m_fboTexture);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glGenerateMipmapEXT(GL_TEXTURE_2D);

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, (GLuint)width, (GLuint)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, 0);
    glFramebufferTexture2DEXT(GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT0_EXT, GL_TEXTURE_2D, m_fboTexture, 0);

    glBindRenderbufferEXT(GL_RENDERBUFFER_EXT, m_fboDepthBuffer);
    glRenderbufferStorageEXT(GL_RENDERBUFFER_EXT, GL_DEPTH_COMPONENT24, (GLuint)width, (GLuint)height);
    glFramebufferRenderbufferEXT(GL_FRAMEBUFFER_EXT, GL_DEPTH_ATTACHMENT_EXT, GL_RENDERBUFFER_EXT, m_fboDepthBuffer);

    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);

    glDisable(GL_TEXTURE_2D);
}

void FBO::Bind()
{
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, m_fbo);
}

void FBO::UnBind()
{
   glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);
}

void FBO::Clear()
{
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, m_fbo);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);
}

This is how I set it up in my main class.

FBO m_fbo;//create an object

//initialize size
m_fbo.Initiliazie(screen_width, screen_height);

In my render function I do this

void Render()
{
   SetShaderProgram();//start shader program

   m_fbo.Bind();

   SetShaderImageSampler("texture", 0, m_fbo.m_fboTexture);
   SetShaderUniformVec2("size", (float)SCREEN_WIDTH, (float)SCREEN_HEIGHT);
   SetShaderUniformInt("kernel_size", ksize);

   //draws my texture
   m_spriteBatch->Draw(RecTangle(0, 0, (float)SCREEN_WIDTH, (float)SCREEN_HEIGHT));

   m_fbo.UnBind();

   EndShaderProgram();//end shader program
}

This is what SetShaderImageSampler function does:

void SetShaderImageSampler(char *sSamplerName, U32 nSlot, GLuint nHandle)
{
    glEnable(GL_TEXTURE_2D);
    glActiveTexture(GL_TEXTURE0 + nSlot);
    glBindTexture(GL_TEXTURE_2D, nHandle);
    U32 nSamplerLoc = glGetUniformLocation(m_shaderProgram, sSamplerName);
    glUniform1iARB(nSamplerLoc, nSlot);
}

This is my spritebatch draw

void SpriteBatch::Draw(RecTangle rect)
{
    //draws it depending on its center
    float left = -(rect.right/2.0f);
    float right = left + (rect.right);
    float top = -(rect.bottom/2.0f);
    float bottom = top + (rect.bottom);

    //vertices: Vertex(x, y, z, u, v) coordinates
    m_vertex[0] = Vertex(left,  top,    0, 0, 0);
    m_vertex[1] = Vertex(right, top,    0, 1, 0);
    m_vertex[2] = Vertex(right, bottom, 0, 1, 1);
    m_vertex[3] = Vertex(left,  bottom, 0, 0, 1);

    glEnableClientState(GL_VERTEX_ARRAY);
    glVertexPointer(3, GL_FLOAT, sizeof(Vertex), &m_vertex[0].m_fX);

    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glTexCoordPointer(2, GL_FLOAT, sizeof(Vertex), &m_vertex[0].m_fU);

    glDrawArrays(GL_QUADS, 0, 4);

    glDisableClientState(GL_VERTEX_ARRAY);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);

    glColor4f(0.5f, 0.5f, 0.5f, 0.5f);
}

This is my frag shader

uniform sampler2D texture;
uniform vec2 size;
uniform int kernel_size;

void main (void)  
{ 
    vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
    vec2 st = gl_TexCoord[0].st;
    vec2 texel = 1.0/size;

    int sum = 0;
    for(int i=-kernel_size; i <= kernel_size; i++) 
    {
            vec4 value = texture2D(texture, st + vec2(0.0, texel.y * i));
            int factor = kernel_size+1 - abs((float)i);
            color += value * factor;
            sum += factor;
    }
    color /= sum;

    gl_FragColor = color;
    gl_FragColor.a = 1.0;
}

Its not working too well. I tried changing the shader to do something else but it just slighly darkens it no matter what.

http://stackoverflow.com/questions/14107979/blur-an-image-of-specific-part-rectangular-circular/14108694#14108694 — junaidsidhu, Aug 26 '13 at 06:44

score 2 · Answer 1 · answered Oct 08 '12 at 10:47

2

The unbind should be

glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);

answered Oct 08 '12 at 10:47

Mortennobel

3,383
4
29
46

Wow I did not see that. Well its not black anymore. Now I tried to do some screen blur but its not doing anything. I updated the question. – Jose Oct 08 '12 at 15:31

score 0 · Answer 2 · answered Oct 08 '12 at 23:05

0

Maybe you haven't included enough code but I don't see you actually rendering anything in your Render method.

You have some calls the first of which I assume activate's the context, then you bind the frame buffer and link the shader variables, but next I would expect a call to render a quad / mesh somehow (i.e with a glBegin/glEnd section or a vertex buffer bind and render.)

answered Oct 08 '12 at 23:05

Graham McIntyre

82
1
4

I didnt included it because I thought it wasnt necessary. Its my first time that I am doing image effects so I am not sure how to initialize it. But right after the EndShaderProgram I am drawing objects such a cube and a plane for the floor which they have their own shaders. So I am not sure if the Screen Blur should be together with the other objects shaders or the blur has to be in their own shader. Ill update the rest of the render so you can see what I am talking about. – Jose Oct 09 '12 at 01:31

score 0 · Answer 3 · answered Oct 10 '12 at 18:05

0

Ok, generally to do post processing effects you would render the scene with the frame buffer active. Then render a full screen quad with your post process (blur) shader active and the frame buffer textures bound as samplers.

answered Oct 10 '12 at 18:05

Graham McIntyre

82
1
4

Thanks for the reply. I completely forgot to render the quad. I rendered it now but instead of bluring it, it just darkens it. I have updated my question. – Jose Oct 11 '12 at 07:11

score 0 · Answer 4 · answered Oct 12 '12 at 01:25

0

Nevenmind I have it working now. I was calling Bind and UnBind in the wrong place.

answered Oct 12 '12 at 01:25

Jose

127
2
14

Image blur effect in shaders

4 Answers4