Pages

getteammates.com

Friday, 13 February 2015

Blur implementation in OpenGL using shader



Blur implementation is one of the simple thing to achieve in OpenGL.

The basic idea is to take the neighbour pixels as well while considering the pixel to draw. Say for example take average of the surrounding pixels.

Vertex shader


attribute vec3 a_position;                                 
attribute vec2 a_texturecoord;                             
                                                           
varying vec2 v_texturecoord;                               
                                                           
void main()                                                
{                                                          
   v_texturecoord = a_texturecoord;                        
                                                           
   gl_Position = vec4(a_position, 1.0);                    
}                                                          

Fragment shader

                                                                                                     
                                                           
uniform sampler2D u_sampler;                               
uniform float u_blurstep;                                  
                                                           
varying vec2 v_texturecoord;                               
                                                           
void main()                                                
{                                                          
    vec4 sample0;                                          
    vec4 sample1;                                          
    vec4 sample2;                                          
    vec4 sample3;                                          
                                                           
    float step = u_blurstep;                               
                                                           
    sample0 = texture2D(u_sampler,                         
                        vec2(v_texturecoord.x - step,      
                        v_texturecoord.y - step));         
                                                           
    sample1 = texture2D(u_sampler,                         
                        vec2(v_texturecoord.x + step,      
                        v_texturecoord.y - step));         
                                                           
    sample2 = texture2D(u_sampler,                         
                        vec2(v_texturecoord.x - step,      
                        v_texturecoord.y + step));         
                                                           
    sample3 = texture2D(u_sampler,                         
                        vec2(v_texturecoord.x + step,      
                        v_texturecoord.y + step));         
                                                           
    gl_FragColor = (sample0 + sample1 + sample2 + sample3) 
                               / 4.0;                      
}                                                          

Complete source code is available at https://github.com/trsquarelab/glexamples

No comments:

Post a Comment