Page 1 of 1

Help with a blur filter and GLSL?

Posted: Sat Mar 14, 2015 5:34 am
by dizzykiwi3
I'm not at all versed in OpenGL, but I really love the concept of blur and focus, and would love to be able to use it in my game.

As I understand it, for a standard box blur (or should I be trying for gaussian instead?) I need to make the value the average of all the neighboring values, weighted for distance, so I'd need a nested for loop to get the square of neighboring pixels?
I'm just a little unsure on how to access those values.

Re: Help with a blur filter and GLSL?

Posted: Sat Mar 14, 2015 11:16 am
by s-ol
Here's a typical GLSL gaussian blur shader:

Code: Select all

#version 120
 
uniform sampler2D uTexture;
uniform vec2 uShift;
 
const int gaussRadius = 11;
const float gaussFilter[gaussRadius] = float[gaussRadius](
	0.0402,0.0623,0.0877,0.1120,0.1297,0.1362,0.1297,0.1120,0.0877,0.0623,0.0402
);
 
void main() {
	vec2 texCoord = gl_TexCoord[0].xy - float(int(gaussRadius/2)) * uShift;
	vec3 color = vec3(0.0, 0.0, 0.0); 
	for (int i=0; i<gaussRadius; ++i) { 
		color += gaussFilter[i] * texture2D(uTexture, texCoord).xyz;
		texCoord += uShift;
	}
	gl_FragColor = vec4(color,1.0);
}
This shader is applied once with a uShift of (x,0) (x is the blur distance) and once with (0,x).

A box blur looks the same, but the values in gaussFilter are differenr (and gaussRadius usually is smaller).

Re: Help with a blur filter and GLSL?

Posted: Sat Mar 14, 2015 3:57 pm
by dizzykiwi3
So in terms of adding it to love I would use love.graphics.newShader and bracket that code like this?

Code: Select all

gshader = love.graphics.newShader [[
uniform sampler2D uTexture;
uniform vec2 uShift;

const int gaussRadius = 11;
const float gaussFilter[gaussRadius] = float[gaussRadius](
  0.0402,0.0623,0.0877,0.1120,0.1297,0.1362,0.1297,0.1120,0.0877,0.0623,0.0402
);

void main() {
  vec2 texCoord = gl_TexCoord[0].xy - float(int(gaussRadius/2)) * uShift;
  vec3 color = vec3(0.0, 0.0, 0.0); 
  for (int i=0; i<gaussRadius; ++i) { 
    color += gaussFilter[i] * texture2D(uTexture, texCoord).xyz;
    texCoord += uShift;
  }
  gl_FragColor = vec4(color,1.0);
}

]]
I seem to be getting an error from doing that

Re: Help with a blur filter and GLSL?

Posted: Sat Mar 14, 2015 7:08 pm
by s-ol
dizzykiwi3 wrote:So in terms of adding it to love I would use love.graphics.newShader and bracket that code like this?

Code: Select all

gshader = love.graphics.newShader [[
uniform sampler2D uTexture;
uniform vec2 uShift;

const int gaussRadius = 11;
const float gaussFilter[gaussRadius] = float[gaussRadius](
  0.0402,0.0623,0.0877,0.1120,0.1297,0.1362,0.1297,0.1120,0.0877,0.0623,0.0402
);

void main() {
  vec2 texCoord = gl_TexCoord[0].xy - float(int(gaussRadius/2)) * uShift;
  vec3 color = vec3(0.0, 0.0, 0.0); 
  for (int i=0; i<gaussRadius; ++i) { 
    color += gaussFilter[i] * texture2D(uTexture, texCoord).xyz;
    texCoord += uShift;
  }
  gl_FragColor = vec4(color,1.0);
}

]]
I seem to be getting an error from doing that
you need to change it a little to match löve's shader syntax: https://love2d.org/wiki/love.graphics.n ... r_Language

Re: Help with a blur filter and GLSL?

Posted: Sat Mar 14, 2015 9:11 pm
by dizzykiwi3
I have little to no idea how I would go about doing that, nor what I would pass into the shader for the externs.