Motion Blur with Shaders

[Strikerklm96]

Here is my project in executable form in case you want to see it for yourself. It comes with a readme. The only shader that is used is test.frag, ignore the others. There are several main ways of implementing motion blur. I want to get one of them to work well. Right now, i'm looking at this method:

Blur the Texture for each object you draw.

I was going to post about the other method, but this post was getting too long, and I should address them one at a time.

Current Problems:
1. The blur effect cannot extend past the edge of the fragment/vertices/spritebox. Bounded Note that I would never need it to extend that far, it is just used to make the problem more apparent.
2. There is a strange coloration effect around some edges. Out of Game: Broken vs Normal In Game:Broken vs Normal
3. There is something wrong with the way the textures are being blurred, causing loss of color. BlendMode???

My Thoughts/Possible Solutions:
1a. Make the texture have a large amount of transparent space around it, and the sprite as large as it needs to be to extend the edge of it to allow blur to occur farther out. I don't like this because then I would have to add tons of transparent space between the tiles in a sprite sheet.
1b. I could draw the image onto a larger sprite that is only transparency. Then blur that, and then draw that. I tried this, but I was running into stranger problems. I will address this more if you think this looks like a good solution.
1c. Somehow use vertex Shaders (something I don't understand yet) to mess with the geometry of the fragment, and allow it to be enlarged, but still keep the texture the same size, and in the middle.
2. I have no idea why this is happening. The only way I was able to provide that messed up image was that I opened the image in Windows Media Player by accident with some sort of accidental keystroke (crazy coincidence), and you can see what it looks like there.
3. Is this caused by the blending mode? Notice the only place there is color is where ALL the skewed images overlap. Everywhere else there is no color.

Here is the fragment shader. test.frag The values added here are just so you can add it to a project to get an idea of what it looks like without having to use Shader::setParameter();

uniform sampler2D texture;

uniform vec2 velocity =(10,0);//the direction of travel and magnitude
uniform int samples = 2;//how many times should we create the effect(should be an even number)
uniform float strength = 0.1;//how intense should the effect be? 0.1 is large, just for testing
uniform float angle = 0;

void main()
{
        vec4 pixel = vec4(0,0,0,0);
        vec2 copy = velocity;

        copy.x = cos(-angle)*copy.x + sin(-angle)*copy.y;
        copy.y = -sin(-angle)*copy.x + cos(-angle)*copy.y;
 
        vec2 offset = vec2(copy.x*strength, -copy.y*strength);
        offset /= samples;//we divide so that by the time we have
       
        for(float i = 0; i < samples; ++i)//compute that many samples
        {
                pixel += texture2D(texture, gl_TexCoord[0].xy + offset*i);
                pixel += texture2D(texture, gl_TexCoord[0].xy - offset*i);
        }
        gl_FragColor = gl_Color*pixel/float(samples*2);
}

[Strikerklm96]

Revised Orignal Post with tons of new important information, and thought it deserved a second look.

[Strikerklm96]

For anyone finding this in the future. Problems 2 and 3 were resolved, while problem 1 will always occur when doing a fragment blur. If you refuse to deal with problem 1, you can either make your sprites with extra transparent space, or you need to choose another method.

FYI: Pixel is not actually the right word to use here. I'm not sure what the right word is though.

Problems 1 and two are solved the same way.
The problem is that transparent pixels in the image MIGHT still have color values. For instance, if your "background color" is white, then your transparent pixels may contain the value (1,1,1,0) rgba. This results in the following code

        pixel += texture2D(texture, gl_TexCoord[0].xy + offset*i);

blending that white color with the rest of the image, even though it is technically transparent and shouldn't be adding any color. This can be easily resolved by applying the color proportional to the alpha value of that pixel.

                pixel = texture2D(texture, gl_TexCoord[0].xy + offset*i);
                pixel *= pixel.a;
                pixelSum += pixel;

This resolves 2 and 3, because 3 is caused by transparent values that have (1,1,1,0), which washes out color, and 2 is caused by transparent pixels that have strange color values. I'm not sure how they got that strange color, but that doesn't really matter.