# How to blur image using glsl shader without squares?

I want to blur image with Gaussian blur algorithm. And I use the following shaders:

attribute vec4 position;
attribute vec4 inputTextureCoordinate;

const int GAUSSIAN_SAMPLES = 9;

uniform float texelWidthOffset;
uniform float texelHeightOffset;

varying vec2 textureCoordinate;
varying vec2 blurCoordinates[GAUSSIAN_SAMPLES];

void main()
{
gl_Position = position;
textureCoordinate = inputTextureCoordinate.xy;

// Calculate the positions for the blur
int multiplier = 0;
vec2 blurStep;
vec2 singleStepOffset = vec2(texelHeightOffset, texelWidthOffset);

for (int i = 0; i < GAUSSIAN_SAMPLES; i++)
{
multiplier = (i - ((GAUSSIAN_SAMPLES - 1) / 2));
// Blur in x (horizontal)
blurStep = float(multiplier) * singleStepOffset;
blurCoordinates[i] = inputTextureCoordinate.xy + blurStep;
}
}


uniform sampler2D inputImageTexture;

const lowp int GAUSSIAN_SAMPLES = 9;

varying highp vec2 textureCoordinate;
varying highp vec2 blurCoordinates[GAUSSIAN_SAMPLES];

void main()
{
lowp vec3 sum = vec3(0.0);
lowp vec4 fragColor=texture2D(inputImageTexture,textureCoordinate);

sum += texture2D(inputImageTexture, blurCoordinates[0]).rgb * 0.05;
sum += texture2D(inputImageTexture, blurCoordinates[1]).rgb * 0.09;
sum += texture2D(inputImageTexture, blurCoordinates[2]).rgb * 0.12;
sum += texture2D(inputImageTexture, blurCoordinates[3]).rgb * 0.15;
sum += texture2D(inputImageTexture, blurCoordinates[4]).rgb * 0.18;
sum += texture2D(inputImageTexture, blurCoordinates[5]).rgb * 0.15;
sum += texture2D(inputImageTexture, blurCoordinates[6]).rgb * 0.12;
sum += texture2D(inputImageTexture, blurCoordinates[7]).rgb * 0.09;
sum += texture2D(inputImageTexture, blurCoordinates[8]).rgb * 0.05;

gl_FragColor = vec4(sum,fragColor.a);
}


This produces an image with a lot of blurred squares.

But. How to get something like this?

• You need to blur in both X and Y directions, yet your code seem to blur only along one diagonal. Nov 18, 2015 at 13:56
• How can I do it? Nov 18, 2015 at 14:00
• Basically your code should sample by X and by Y axis. for i = 0 to N-1 do for k = 0 to N - 1 do sum += sample[i,k] * multiplier. Don't do this like that though, use 2 pass blur, it's faster cos of sequential memory access. Nov 18, 2015 at 14:03
• @ Semyon Tikhonenko had you get the right way for blur? i.stack.imgur.com/Bc8fM.jpg Sep 27, 2017 at 9:53