How to create a blur shader

Question

I am following the following shader to create a blur.

OpenGL es 2.0 Gaussian blur on triangle

First i generate framebuffers.

glGenTextures(2, texObj);
    glGenFramebuffers(2, fbObj);
    glActiveTexture(GL_TEXTURE0);
    for (int i = 0; i < 2; i++)
    {
        glBindTexture(GL_TEXTURE_2D, texObj[i]);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, 1920, 1080, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
        glGenerateMipmap(GL_TEXTURE_2D);
        glBindFramebuffer(GL_FRAMEBUFFER, fbObj[i]);
        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texObj[i], 0);
        GLuint renderbuffer;
        glGenRenderbuffers(1, &renderbuffer);
        glBindRenderbuffer(GL_RENDERBUFFER, renderbuffer);
        glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, 1920, 1080);
        glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, renderbuffer);

    }
    glBindTexture(GL_TEXTURE_2D, 0);
    glBindFramebuffer(GL_FRAMEBUFFER, 0);

Than i follow these steps.

    // first create a image of the scene
    GLint drawFrameBuffer;
    glGetIntegerv(GL_FRAMEBUFFER_BINDING, &drawFrameBuffer);    
    glBindFramebuffer(GL_FRAMEBUFFER, fbObj[0]);  
    ResourceManager::GetShader("BasicShader").Use();
    //ResourceManager::GetShader("BasicShader").SetInteger("UseColorMap", false);
    glDisable(GL_DEPTH_TEST);
    glClearColor(0.0, 0.0, 0.0, 0.0);
    glClear(GL_COLOR_BUFFER_BIT );
    geom->draw();   
    
    
    // Set the Blur in X direction
    glBindFramebuffer(GL_FRAMEBUFFER, fbObj[1]);
    ResourceManager::GetShader("shaderTest").Use();
    // Set the blur shader properties
    ResourceManager::GetShader("shaderTest").SetFloat("u_sigma", intensity);
    ResourceManager::GetShader("shaderTest").SetFloat("u_radius", blur);
    ResourceManager::GetShader("shaderTest").SetVector2f("u_dir", glm::vec2(1.0, 0.0));
    ResourceManager::GetShader("shaderTest").SetVector2f("u_textureSize", glm::vec2(1920.0, 1080.0));   
    glClearColor(0.0, 0.0, 0.0, 0.0);
    glClear(GL_COLOR_BUFFER_BIT);
    glBindTexture(GL_TEXTURE_2D, texObj[0]);
    glGenerateMipmap(GL_TEXTURE_2D);
    drawFullScreenQuad();


    // Set the Blur in Y direction
    glBindFramebuffer(GL_FRAMEBUFFER, fbObj[0]);
    ResourceManager::GetShader("shaderTest").Use();
    // Set the blur shader properties
    ResourceManager::GetShader("shaderTest").SetFloat("u_sigma", intensity);
    ResourceManager::GetShader("shaderTest").SetFloat("u_radius", blur);
    ResourceManager::GetShader("shaderTest").SetVector2f("u_dir", glm::vec2(0.0, 1.0));
    ResourceManager::GetShader("shaderTest").SetVector2f("u_textureSize", glm::vec2(1920.0, 1080.0));
    glClearColor(0.0, 0.0, 0.0, 0.0);
    glClear(GL_COLOR_BUFFER_BIT);
    glBindTexture(GL_TEXTURE_2D, texObj[1]);
    glGenerateMipmap(GL_TEXTURE_2D);
    drawFullScreenQuad();

    
    // Render the result to full screen.
    glBindFramebuffer(GL_FRAMEBUFFER, drawFrameBuffer); 
    glClearColor(0.0, 0.0, 0.0, 0.0);
    glEnable(GL_DEPTH_TEST);
    glActiveTexture(GL_TEXTURE0);
    ResourceManager::GetShader("Screen").Use();
    glBindTexture(GL_TEXTURE_2D, texObj[0]);    
    glGenerateMipmap(GL_TEXTURE_2D);
    drawFullScreenQuad();
    ResourceManager::GetShader("BasicShader").Use();

These are the shaders.

#version 430 core
layout (location = 0) in vec2 aPos;
out vec2 pos;

void main()
{
    pos = aPos;
    gl_Position =   vec4(aPos, 0.0 , 1.0);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////

#version 330 core
out vec4 FragColor;
in vec2 pos;

// texture sampler
uniform sampler2D u_texture;
uniform vec2      u_textureSize;
uniform float     u_sigma;
uniform float     u_radius;
uniform vec2      u_dir;

float CalcGauss( float x, float sigma)
{
   if( sigma <= 0.0 )
    return 0.0;
return exp( -(x * x) / ( 2.0 * sigma)) / ( 2.0 * 3.14157 * sigma);

}

void main()
{
    vec2 texC     = pos.st * 0.5 + 0.5;
    vec4 texCol   = texture2D( u_texture, texC );
    vec4 gaussCol = vec4( texCol.rgb, 1.0 );
    vec2 step     = u_dir / u_textureSize;
    float weight;
    for ( int i = 1; i <= 16; ++ i )
    {
        weight = CalcGauss( float(i) / 16.0, u_sigma * 0.5 );
        if ( weight < 1.0/255.0 )
            break;
        texCol    = texture2D( u_texture, texC + u_radius * step * float(i) );
        gaussCol += vec4( texCol.rgb * weight, weight );
        texCol    = texture2D( u_texture, texC - u_radius * step * float(i) );
        gaussCol += vec4( texCol.rgb * weight, weight );
    }
    
   gaussCol.rgb = clamp( gaussCol.rgb / gaussCol.w, 0.0, 1.0 );
   FragColor = vec4( gaussCol.rgb , 1.0 );

}

When the value for u_radius and u_sigma is 1 than the blur is smooth.

when u_sigma is 10 and u_radius is 30 than the blur looks like this.

Since that example is using webgl and i am using Opengl would the results vary ?

The new image after values given by Rabbid76.

Answer 1

In the implementation of the shader, the value for sigma has to be in range [0.0, 1.0]. A radius of 30 seems to be to large. Start with u_sigma = 0.5 and u_radius = 10 .

---

The the shader effect still looks wrong, because the computation of the alpha channel is wrong.
You have copied the shader form a WebGL . WebGL by default uses premultiplied alpha , but your desktop application does not. See Straight versus premultiplied .
Skip the division of the weighted sum of the color channels by the weighted sum of the alpha channel:

gaussCol.rgb = clamp( gaussCol.rgb / gaussCol.w, 0.0, 1.0 );

gaussCol.rgb = clamp(gaussCol.rgb, 0.0, 1.0);