<p>It would be helpful if you posted some more information about what you're trying to do (rather than problem links) and some screenshots of what is actually happening. Being here I basically see "My code doesn't work, fix it.", which is not motivating to answer your question...</p>

<p>That being said, you calculate an offset for reading out from your texture. </p>

<pre><code>texture2D(sampler, tex_coords+vec2(horizontalOffset, verticalOffset))
</code></pre>

<p>Texture coordinates are $u, v \in \left[0, 1\right]$, otherwise they will stay on the edge, border, go back to the opposite side or start from the opposide side again (depending on your set up). So this is offset is a problem at the borders in any case, but that is normal. If we now look at your offset</p>

<pre><code>float radius = 2.0;
for(horizontalOffset = -radius; horizontalOffset&lt;radius; horizontalOffset  += step)
</code></pre>

<p>So you start with an offset of <code>-2.0</code>, which far exceeds the texture coordinate interval and go up to <code>2.0</code> which again exceeds the interval. This is probably the biggest problem you have in your code, calculation wise.</p>

<p>Furthermore, you use a variable <code>step</code> to increase your <code>horizontalOffset</code> and your <code>verticalOffset</code> variables, but this <code>step</code> has never been created. This should not even compile. </p>

<p>Since your <code>horizontalOffset</code> and <code>verticalOffset</code>are meant for the gaussian blur, I guess a new variable is needed.</p>

<p>Your next problem is, that iirc a gaussian blur should offset the texture coordinates, not the color. You multiply the readout color though, with your <code>gaussFactorForOffset</code> method, which may be wrong. In any case, you don't even have the method, and it is not a standard <a href="https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.4.60.pdf" rel="nofollow noreferrer">glsl</a> method. Again this should not compile. </p>

<hr>

<p>What you need is to think about what your kernel must look like. In a simple box filter, you would sample a texel and every neighbouring texel, giving you 9 values. You add up the 9 values, divide by 9 to normalize and write the output. Your gauss blur can work the same way, only that you have to properly weigh the individual values depending on their position. You can also sample more pixels, than the direct neighbour, say the second neighbour as well - this will give you a nicer blur but will also be a lot slower since you have to do more texture look ups.</p>

<p>In any case, start with hardcoding that, like you did in your old code. </p>

<p>In image processing, <a href="https://stackoverflow.com/questions/20746172/blur-an-image-using-3x3-gaussian-kernel">they also use these kernels</a>, so you can look at them. The linked one would translate to your problem thus:</p>

<pre><code>float verticalStep = 1/numberOfVerticalPixels;
float horizontalsteps = 1/numberOfHorizontalPixels; //these two variables you have to set yourself
//top row of kernel
sum += texture2D(sampler, vec2(tc.x - horizontalstep, tc.y - verticalStep)) * (1/16);
sum += texture2D(sampler, vec2(tc.x, tc.y - verticalStep)) * (1/8);
sum += texture2D(sampler, vec2(tc.x + horizontalstep, tc.y - verticalStep)) * (1/16);
//middle row
sum += texture2D(sampler, vec2(tc.x - horizontalstep, tc.y)) * (1/8);
sum += texture2D(sampler, vec2(tc.x, tc.y)) * (1/4);
sum += texture2D(sampler, vec2(tc.x + horizontalstep, tc.y)) * (1/8);
//bottom row
sum += texture2D(sampler, vec2(tc.x - horizontalstep, tc.y + verticalStep)) * (1/16);
sum += texture2D(sampler, vec2(tc.x, tc.y + verticalStep)) * (1/8);
sum += texture2D(sampler, vec2(tc.x + horizontalstep, tc.y + verticalStep)) * (1/16);
return sum;
</code></pre>

<p>Now once you get this to work, then you can start optimizing. and cleaning up your code.</p>

CC BY-SA 3.0
2018-04-18T06:33:36.040Z
2018-04-18T06:33:36.040Z
Tare
<p>Crossposted here <a href="http://forum.lwjgl.org/index.php?topic=6724" rel="nofollow noreferrer">http://forum.lwjgl.org/index.php?topic=6724</a></p>

<p>Hello guys I am trying to blur image using fragment shader but it is not smooth.. I search the internet and I found similar problem... some one answer his question but unfortunately I cannot fallow it.. </p>

<p>The question here are similar to my problem. this one <a href="https://stackoverflow.com/questions/33778381/how-to-blur-image-using-glsl-shader-without-squares">https://stackoverflow.com/questions/33778381/how-to-blur-image-using-glsl-shader-without-squares</a> and this one 
<a href="https://stackoverflow.com/questions/44829671/smooth-blur-gaussian-in-opengl-es-2-0">https://stackoverflow.com/questions/44829671/smooth-blur-gaussian-in-opengl-es-2-0</a></p>

<p>Now I am trying this code but I got error. cannot call a non-function</p>

<pre><code>#version 120

uniform sampler2D sampler;
varying vec2 tex_coords;

vec4 funcBlurTexture() {
    float blur = 1.0/387.; //?? original settings: 2.0/720.; 
    //float blur = 1.0/1280.;

     vec4 sum = vec4(0.0);
     vec2 tc = tex_coords;

     float hstep = tex_coords.x;
     float vstep = tex_coords.y;

     float horizontalOffset = 2.0;
     float radius = 2.0;
     float verticalOffset = 2.0;
     float gaussFactorForOffset = 1.0;

     //Trying to use this
     for(horizontalOffset = -radius; horizontalOffset&lt;radius; horizontalOffset  += step) {
        for(verticalOffset = -radius; verticalOffset&lt;radius; verticalOffset += step) {
            sum += texture2D(sampler, tex_coords+vec2(horizontalOffset, verticalOffset))*gaussFactorForOffset(sqrt(horizontalOffset*horizontalOffset + verticalOffset*verticalOffset)/radius);
        }
     }

     /*
    //Old Code
     sum += texture2D(sampler, vec2(tc.x - 4.0*blur*hstep, tc.y)) * 0.0162162162;
     sum += texture2D(sampler, vec2(tc.x - 3.0*blur*hstep, tc.y)) * 0.0540540541;
     sum += texture2D(sampler, vec2(tc.x - 2.0*blur*hstep, tc.y)) * 0.1216216216;
     sum += texture2D(sampler, vec2(tc.x - 1.0*blur*hstep, tc.y)) * 0.1945945946;
     sum += texture2D(sampler, vec2(tc.x, tc.y)) * 0.2270270270;
     sum += texture2D(sampler, vec2(tc.x + 1.0*blur*hstep, tc.y)) * 0.1945945946;
     sum += texture2D(sampler, vec2(tc.x + 2.0*blur*hstep, tc.y)) * 0.1216216216; 
     sum += texture2D(sampler, vec2(tc.x + 3.0*blur*hstep, tc.y)) * 0.0540540541;
     sum += texture2D(sampler, vec2(tc.x + 4.0*blur*hstep, tc.y)) * 0.0162162162;
     */

        vec4 vColor = texture2D(sampler, tex_coords); 
        vec4 bluredTexture = vColor * vec4(sum.rgb, 1.0);
    return bluredTexture;
}

void main() {
    gl_FragColor = funcBlurTexture();
}
</code></pre>

<p>How to apply this code in my shader?</p>

<pre><code>for(horizontalOffset = -radius; horizontalOffset&lt;radius; horizontalOffset  += step) {
    for(verticalOffset = -radius; verticalOffset&lt;radius; verticalOffset += step) {
        sum += texture2D(texture, textureCoordinate+vec2(horizontalOffset, verticalOffset))*gaussFactorForOffset(sqrt(horizontalOffset*horizontalOffset + verticalOffset*verticalOffset)/radius);
    }
}
</code></pre>

<p>Any Help?</p>

<fragment-shader><gaussian-blur><blur>
gaussFactorForOffset cannot call a non-function how to fixed this code?
Jhovarie Guiang
# gaussFactorForOffset cannot call a non-function how to fixed this code?

(Asked by: username_0 on 2018-04-18)

Crossposted here <http://forum.lwjgl.org/index.php?topic=6724>

Hello guys I am trying to blur image using fragment shader but it is not smooth.. I search the internet and I found similar problem... some one answer his question but unfortunately I cannot fallow it..

The question here are similar to my problem. this one <https://stackoverflow.com/questions/33778381/how-to-blur-image-using-glsl-shader-without-squares> and this one
<https://stackoverflow.com/questions/44829671/smooth-blur-gaussian-in-opengl-es-2-0>

Now I am trying this code but I got error. cannot call a non-function

```
#version 120

uniform sampler2D sampler;
varying vec2 tex_coords;

vec4 funcBlurTexture() {
    float blur = 1.0/387.; //?? original settings: 2.0/720.; 
    //float blur = 1.0/1280.;

     vec4 sum = vec4(0.0);
     vec2 tc = tex_coords;

     float hstep = tex_coords.x;
     float vstep = tex_coords.y;

     float horizontalOffset = 2.0;
     float radius = 2.0;
     float verticalOffset = 2.0;
     float gaussFactorForOffset = 1.0;

     //Trying to use this
     for(horizontalOffset = -radius; horizontalOffset<radius; horizontalOffset  += step) {
        for(verticalOffset = -radius; verticalOffset<radius; verticalOffset += step) {
            sum += texture2D(sampler, tex_coords+vec2(horizontalOffset, verticalOffset))*gaussFactorForOffset(sqrt(horizontalOffset*horizontalOffset + verticalOffset*verticalOffset)/radius);
        }
     }

     /*
    //Old Code
     sum += texture2D(sampler, vec2(tc.x - 4.0*blur*hstep, tc.y)) * 0.0162162162;
     sum += texture2D(sampler, vec2(tc.x - 3.0*blur*hstep, tc.y)) * 0.0540540541;
     sum += texture2D(sampler, vec2(tc.x - 2.0*blur*hstep, tc.y)) * 0.1216216216;
     sum += texture2D(sampler, vec2(tc.x - 1.0*blur*hstep, tc.y)) * 0.1945945946;
     sum += texture2D(sampler, vec2(tc.x, tc.y)) * 0.2270270270;
     sum += texture2D(sampler, vec2(tc.x + 1.0*blur*hstep, tc.y)) * 0.1945945946;
     sum += texture2D(sampler, vec2(tc.x + 2.0*blur*hstep, tc.y)) * 0.1216216216; 
     sum += texture2D(sampler, vec2(tc.x + 3.0*blur*hstep, tc.y)) * 0.0540540541;
     sum += texture2D(sampler, vec2(tc.x + 4.0*blur*hstep, tc.y)) * 0.0162162162;
     */

        vec4 vColor = texture2D(sampler, tex_coords); 
        vec4 bluredTexture = vColor * vec4(sum.rgb, 1.0);
    return bluredTexture;
}

void main() {
    gl_FragColor = funcBlurTexture();
}

```

How to apply this code in my shader?

```
for(horizontalOffset = -radius; horizontalOffset<radius; horizontalOffset  += step) {
    for(verticalOffset = -radius; verticalOffset<radius; verticalOffset += step) {
        sum += texture2D(texture, textureCoordinate+vec2(horizontalOffset, verticalOffset))*gaussFactorForOffset(sqrt(horizontalOffset*horizontalOffset + verticalOffset*verticalOffset)/radius);
    }
}

```

Any Help?

**Tags:** fragment-shader, gaussian-blur, blur


---

## 1 answers

### Answer by username_1 on 2018-04-18. Score: 1

It would be helpful if you posted some more information about what you're trying to do (rather than problem links) and some screenshots of what is actually happening. Being here I basically see "My code doesn't work, fix it.", which is not motivating to answer your question...

That being said, you calculate an offset for reading out from your texture.

```
texture2D(sampler, tex_coords+vec2(horizontalOffset, verticalOffset))

```

Texture coordinates are $u, v \in \left[0, 1\right]$, otherwise they will stay on the edge, border, go back to the opposite side or start from the opposide side again (depending on your set up). So this is offset is a problem at the borders in any case, but that is normal. If we now look at your offset

```
float radius = 2.0;
for(horizontalOffset = -radius; horizontalOffset<radius; horizontalOffset  += step)

```

So you start with an offset of `-2.0`, which far exceeds the texture coordinate interval and go up to `2.0` which again exceeds the interval. This is probably the biggest problem you have in your code, calculation wise.

Furthermore, you use a variable `step` to increase your `horizontalOffset` and your `verticalOffset` variables, but this `step` has never been created. This should not even compile.

Since your `horizontalOffset` and `verticalOffset`are meant for the gaussian blur, I guess a new variable is needed.

Your next problem is, that iirc a gaussian blur should offset the texture coordinates, not the color. You multiply the readout color though, with your `gaussFactorForOffset` method, which may be wrong. In any case, you don't even have the method, and it is not a standard [glsl](https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.4.60.pdf) method. Again this should not compile.

---

What you need is to think about what your kernel must look like. In a simple box filter, you would sample a texel and every neighbouring texel, giving you 9 values. You add up the 9 values, divide by 9 to normalize and write the output. Your gauss blur can work the same way, only that you have to properly weigh the individual values depending on their position. You can also sample more pixels, than the direct neighbour, say the second neighbour as well - this will give you a nicer blur but will also be a lot slower since you have to do more texture look ups.

In any case, start with hardcoding that, like you did in your old code.

In image processing, [they also use these kernels](https://stackoverflow.com/questions/20746172/blur-an-image-using-3x3-gaussian-kernel), so you can look at them. The linked one would translate to your problem thus:

```
float verticalStep = 1/numberOfVerticalPixels;
float horizontalsteps = 1/numberOfHorizontalPixels; //these two variables you have to set yourself
//top row of kernel
sum += texture2D(sampler, vec2(tc.x - horizontalstep, tc.y - verticalStep)) * (1/16);
sum += texture2D(sampler, vec2(tc.x, tc.y - verticalStep)) * (1/8);
sum += texture2D(sampler, vec2(tc.x + horizontalstep, tc.y - verticalStep)) * (1/16);
//middle row
sum += texture2D(sampler, vec2(tc.x - horizontalstep, tc.y)) * (1/8);
sum += texture2D(sampler, vec2(tc.x, tc.y)) * (1/4);
sum += texture2D(sampler, vec2(tc.x + horizontalstep, tc.y)) * (1/8);
//bottom row
sum += texture2D(sampler, vec2(tc.x - horizontalstep, tc.y + verticalStep)) * (1/16);
sum += texture2D(sampler, vec2(tc.x, tc.y + verticalStep)) * (1/8);
sum += texture2D(sampler, vec2(tc.x + horizontalstep, tc.y + verticalStep)) * (1/16);
return sum;

```

Now once you get this to work, then you can start optimizing. and cleaning up your code.


---

