Variable size blur

Hello!

Made an effect. This here is the first draft, will be *vastly* improved soon.

Things I'm looking into:

choosing number of samples.

Proper placement of samples.

Time-based randomization of samples.

Size of effect (don't understand it yet).

Things that are working:

-blur amount

Blur.fx:

// Variable Blur
// Jorge Fuente-Alba
// PS 2.0

//#CROSS-SAMPLING : reads pixels it may be writing.
//#BORDER-MODE : samples pixels outside bounding box
//#PARAM float blur 2.5 : Blur : amount of blur.

// Foreground texture
texture ForegroundTexture;

// Foreground sampler
sampler2D foreground = sampler_state {
    Texture = (ForegroundTexture);
    MinFilter = Linear;
    MagFilter = Linear;
    MipFilter = Linear;
};

// Parameter variables
float pixelWidth;
float pixelHeight;
float blur;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{
    // Add the front and back pixels
    float4 here = tex2D(foreground, Tex.xy)*0.25;
    float4 left = tex2D(foreground, float2(Tex.x - (pixelWidth*blur), Tex.y))*0.1875;
    float4 right = tex2D(foreground, float2(Tex.x + (pixelWidth*blur), Tex.y))*0.1875;
    float4 top = tex2D(foreground, float2(Tex.x, Tex.y - (pixelHeight*blur)))*0.1875;
    float4 bottom = tex2D(foreground, float2(Tex.x, Tex.y + (pixelHeight*blur)))*0.1875;

    return here + left + right + top + bottom;
    //float4 src = tex2D(foreground, Tex.xy);
    
    //return result * (1-src.a) + src;

}

// ConstructEffect
technique ConstructEffect
{
    pass p0
    {
        VertexShader = null;
        PixelShader = compile ps_2_0 EffectProcess();
    }
}
[/code:dlvy8o5v]

Example .cap using it: [url]http://www.udec.cl/~jfuente_alba/blur_example.cap[/url]

Didn't dload yet, but does it support changing blur amount at runtime?

EDIT: It does! sweet! thanks for this madster, will definately come in handy. I also noticed it's not as smooth as the other blur shader, but you said it's vastly unfinished.... so improve it NOW!

I checked the horizontal and vertical blur and they're 12-tap. I thought they were 3-tap :O

so anyways, that means I should go with a 12-tap poisson disc filter.

Okay.

Turns out the horizontal and vertical blurs are in fact 13-tap gaussian kernels and gaussian is separable, so it's much better to do in two-pass where you end up with 13^2 taps.

So, I present thee Vertical and Horizontal blur plus. All I did was normalize the size then multiply the kernel by a size.

http://www.udec.cl/~jfuente_alba/Blur%20Horizontal%20Plus.fx

http://www.udec.cl/~jfuente_alba/Blur%20Vertical%20Plus.fx

Also, I made a 13-tap Poisson disc blur kernel. You can see how it looks less smooth. Apply twice and it looks just like gaussian (but distributed as Poisson, natch). Weights are the same as Gaussian right now, I need to do some research and get the right coefficients for a Poisson distribution.

Meanwhile, the unfinished Poisson disc:

http://www.udec.cl/~jfuente_alba/Blur%20Disc.fx

Hope I'm not getting annoying, but I was really lacking several blur types.

So, here's yet another variable size gaussian blur, only this time you can choose the ANGLE.

Very useful for motion blurring, its faster than doing the fullscreen thing.

Good for ninjas. And stuff.

http://www.udec.cl/~jfuente_alba/Blur%20Motion.fx

It's almost just as fast as horizontal and vertical plus, so I guess it replaces them (just do two passes, one with angle 0 and another with angle 90).

Included example: scirra logo moving with per-sprite motion blur.

http://www.udec.cl/~jfuente_alba/blur_motion_example.cap

Edit: as per Shviller's request: a motion trail effect, similar to motion blur but only in the direction of the angle.

http://www.udec.cl/~jfuente_alba/Motion%20Trail.fx

http://www.udec.cl/~jfuente_alba/motion_trail_example.cap

Edit: bleh fudged the weights in the Motion Trail effect. Will fix tomorrow.

Only one blur type remaining in my list

Nice - I've been wanting an angle blur for a while! Thanks!

These are a good idea - but your algorithm is wrong, it's not a true blur. What it's really doing (and it's obvious from the shader code that it does this) is additively blending a set of offset images. This looks like a blur for low radius values, but doesn't work for high blur values. If the sampling points are more than one pixel apart, then a kind of stepped shadow becomes visible.

<img src="http://www.scirra.com/images/blurs.png">

This is why I haven't added variable blur radius to the existing blur horizontal and blur vertical: if the blur value goes too high, you get shadowing, and if it goes too low, you're sampling the same pixel more than once, which is inefficient. A true blur has to take in to account every single pixel over a range.

They're still useful though, and something like Motion Blur would be cool to adapt in a way like Blur Horizontal works

...is additively blending a set of offset images.

not additive, it's an average. It's just a blur with a low sample count, suitable for real time. This is how current games do it (CoD4, Bioshock, Far Cry 2, etc etc).

if the blur value goes too high, you get shadowing, and if it goes too low, you're sampling the same pixel more than once, which is inefficient. A true blur has to take in to account every single pixel over a range.

This *is* a true blur. It's just low quality. Also, Motion Blur at size 25 is *exactly* like Horizontal and Vertical blur, since I modified them (normalized the kernel and introduced a factor). Only now you can smoothly go back to focus... or push it to a larger size, risking it looking bad. Designer's call.

I'll be using it lots, at least. Already managed to cut down on assets on rocket-days by dropping the preblurred and decolored hills and replacing them with instances of the normal assets with shaders.

Do try out the Motion Blur demo. shows how it looks, and it's gooood, specially the pulsating text below:

<img src="http://www.udec.cl/~jfuente_alba/motionblur.png">

Yeah, fair enough. True blurs can be done faster by downsampling, blurring the smaller image, then linear filtering the small image up to the original size again, but the rendering engine in the runtime can't support this right now - it'll be included in 2.0 though.

I love the effect, but it still looks kinda separatey the way regular motion blur does on my machine. Not nearly as bad though, especially at lower settings.

stack the effect for more quality. Most commercial games do more than one blur pass.

However, if you stack any effect more than 2 times, construct crashes.

I've been meaning to report that bug but I have no freaking time for anything these days.

Will do. Next week.

Yeah, fair enough. True blurs can be done faster by downsampling, blurring the smaller image, then linear filtering the small image up to the original size again, but the rendering engine in the runtime can't support this right now - it'll be included in 2.0 though.

I just read this can be done sampling with tex2Dbias(s, t), where s is a sampler. t is a 4D vector. The mip level is biased by t.w before the lookup takes place.

I'll give it a whirl later, I'm just putting it up here so I don't forget

tex2Dbias made no difference.

Does Construct use mipmaps? if it doesn't, I guess it makes sense that it looks the same.

On a side note, I found this which could be helpful for other newcomers (like me) to DirectX HLSL and shaders in general:

http://msdn.microsoft.com/en-us/library/bb509611(VS.85).aspx

So I couldn't do preblurring based on mip.

Next up: texture-based blurring.

Can anyone explain how to do two-pass effects?

I see this p0 pass in the effect code, but how would I do two (or more) passes?

Multipass effects arent supported in Construct - I couldn't get them working with the D3DX library. Also, Construct does use mipmaps, but not for rendertargets (like canvas objects or layer effects).

but it uses mipmaps for sprites? 'cause that is what I was sampling.