Wilf LaLonde ©2012 Comp 4501 95.4501 Filters. Wilf LaLonde ©2012 Comp 4501 A filter is a matrix of weights centered on a specific pixel in an image and

Wilf LaLonde ©2012Comp 4501

95.450195.4501

Filters


• A filter is a matrix of weights centered on a specific pixel in an image and used to produce a weighted average as follows.

• The center weight is multiplied with the pixel, the other weights are multiplied with corresponding neighbor pixels.

• The results are added and divided by the sum of the weights (or, avoid the divide by using normalized weights; i.e., pre-divided).

What’s a Filter?What’s a Filter?

[ 0 0 0 ][ 0 1 0 ][ 0 0 0 ]

3x3 identity filter


• This filtering operation applied to each pixel of an image is called a convolution (if the filter is symmetrical) or correlation otherwise.

• More complex filters, that can use fancier functions, exist as well.

What’s a Filter?What’s a Filter?


If the sampler can be indexed via image sized texture coordinates (otherwise, *pixelSize ).

float3 fillterResult = float4 (0.0, 0.0, 0.0);for (int i = -1; i <= 1; i++) {

for (int j = -1; j <= 1; j++) { fillterResult +=

sampler (uv.xy + float2 (i,j) ).xyz *filterWeight [i,j];

}}

How filters Get Used: Let Compiler Loop UnrollHow filters Get Used: Let Compiler Loop Unroll

Filter result is the answer: assuming normalized weights


If the sampler can be indexed via image sized texture coordinates (otherwise, *pixelSize ).

float3 fillterResult = sampler (uv.xy + float2 (-1,-1)).xyz * filterWeight [-1,-1] +sampler (uv.xy + float2 (-1, 0)).xyz * filterWeight [-1, 0] +sampler (uv.xy + float2 (-1,+1)).xyz * filterWeight [-1,+1] +sampler (uv.xy + float2 ( 0,-1)).xyz * filterWeight [ 0,-1] +sampler (uv.xy + float2 ( 0, 0)).xyz * filterWeight [ 0, 0] +sampler (uv.xy + float2 ( 0,+1)).xyz * filterWeight [ 0,+1] +sampler (uv.xy + float2 (+1,-1)).xyz * filterWeight [+1,-1] +sampler (uv.xy + float2 (+1, 0)).xyz * filterWeight [+1, 0] +sampler (uv.xy + float2 (+1,+1)).xyz * filterWeight [+1,+1];

How filters Get Used: Unroll Loop YourselfHow filters Get Used: Unroll Loop Yourself

Filter result is the answer: assuming normalized weights


• An odd size filter looks cleaner but even size works too (consistently applying right and down, for example)...

• sum of normalized weights 1 brighter image• sum of normalized weights 1 darker image

A Few ObservationsA Few Observations

Weight 0.25 Weight 0.25

Weight 0.25 Weight 0.25

[x, y] [x+1, y]

[x, y+1] [x+1, y+1] right and up for OpenGL

right and down for DirectX


• Indexing off the end is can be handled with

• 0 weight

• automatically via a clamping sampler• Filtered results are sometimes clamped to

the bounds of the application; e.g., 0 and 1 for color.

A Few ObservationsA Few Observations


A Blur Filter (Minimal Blur)A Blur Filter (Minimal Blur)

[ 0 1 0 ][ 1 1 1 ][ 0 1 0 ]

3x3 blur filter

from LODEV.org

Use normalizing factor1/5 = 0.2

1 5


A Blur Filter (More Noticeable Blur)A Blur Filter (More Noticeable Blur)

[ 0 0 1 0 0 ][ 0 1 1 1 0 ] [ 1 1 1 1 1 ] [ 0 1 1 1 0 ][ 0 0 1 0 0 ] 5x5 blur filter

from LODEV.org

113



A 45 Degree Motion Blur FilterA 45 Degree Motion Blur Filter

[ 1 0 0 0 0 0 0 0 0 ][ 0 1 0 0 0 0 0 0 0 ] [ 0 0 1 0 0 0 0 0 0 ] [ 0 0 0 1 0 0 0 0 0 ] [ 0 0 0 0 1 0 0 0 0 ] [ 0 0 0 0 0 1 0 0 0 ][ 0 0 0 0 0 0 1 0 0][ 0 0 0 0 0 0 0 1 0 ][ 0 0 0 0 0 0 0 0 1 ] 9x9 motion blur filter

from LODEV.org


1 9


A Horizontal Edge Finding FilterA Horizontal Edge Finding Filter

[ 0 0 0 0 0 ][ 0 0 0 0 0 ] [-1 -1 2 0 0 ] [ 0 0 0 0 0 ][ 0 0 0 0 0 ] 5x5 horizontal edge finding filter

from LODEV.org

dark since weights sum to 0

deliberately non-symmetric just to see


A Vertical Edge Finding FilterA Vertical Edge Finding Filter

[ 0 0 -1 0 0 ][ 0 0 -1 0 0 ] [ 0 0 4 0 0 ] [ 0 0 -1 0 0 ][ 0 0 -1 0 0 ] 5x5 vertical edge finding filter

from LODEV.org



A 45 Degree Edge Finding FilterA 45 Degree Edge Finding Filter

[-1 0 0 0 0 ][ 0 -2 0 0 0 ] [ 0 0 6 0 0 ] [ 0 0 0 -2 0 ][ 0 0 0 0 -1 ] 5x5 45 degree edge finding filter

from LODEV.org



An Edge Detection FilterAn Edge Detection Filter

[-1 -1 -1][-1 8 -1][-1 -1 -1]

3x3 edge detection filter

from LODEV.org



A Sharpening FilterA Sharpening Filter

[-1 -1 -1][-1 9 -1][-1 -1 -1]

3x3 sharpening filter

from LODEV.org

note that sum is 1


A More Subtle Sharpening FilterA More Subtle Sharpening Filter

[-1 -1 -1 -1 -1][-1 2 2 2 -1] [-1 2 8 2 -1] [-1 2 2 2 -1][-1 -1 -1 -1 -1] 5x5 subtle shapening filter

from LODEV.org

1 8

Use normalizing factor 1/8 = 0.125


An Excessive Sharpening FilterAn Excessive Sharpening Filter

[1 1 1][1 -7 1][1 1 1] 3x3 excessive sharpening filter

from LODEV.org

note that sum is 1


A 45 Degree Embossing FilterA 45 Degree Embossing Filter

[-1 -1 0][-1 0 1][ 0 1 1] 3x3 45 degree embossing filter

from LODEV.org

0.5 +


A 45 Degree Embossing GRAY SCALED FilterA 45 Degree Embossing GRAY SCALED Filter

[-1 -1 0][-1 0 1][0 1 1] 3x3 45 degree embossing filter

from LODEV.org

NO CHANGE IN FILTER BUT MAKE GREEN AND BLUE = RED 0.5 +


A More Exaggerated Emboss FilterA More Exaggerated Emboss Filter

[-1 -1 -1 -1 0][-1 -1 -1 0 1] [-1 -1 0 1 1] [-1 0 1 1 1][ 0 1 1 1 1] 5x5 exaggerated emboss filter

from LODEV.org

0.5 +


A Mean Filter (Average or blur removes PEPPER)A Mean Filter (Average or blur removes PEPPER)

[ 1 1 1 ][ 1 1 1 ][ 1 1 1 ] 3x3 mean filter

removes PEPPER by bluring

from LODEV.org

1 9

Use normalizing factor 1/9 = 0.111

Also called a BOX FILTER


A Median Filter (Uses Middle in Sorted Result)A Median Filter (Uses Middle in Sorted Result)

[ 1 1 1 ][ 1 1 1 ][ 1 1 1 ]

Slightly better lookingde-PEPPERING and

blurring (I can’t see it)

from LODEV.org

the middle value after x-sorting and y-sorting

1 9


A Median FilterA Median Filter

3x3 5x5

9x9 15x15


Gaussian FiltersGaussian Filters

• Based on the gaussian distribution


180

A Crude Approximation of A Gaussian FilterA Crude Approximation of A Gaussian Filter


Another OneAnother One

14641

41624164

62436246

41624164

14641

256

1

Source:Stephen Chenney University of Wisconsin


A More Exact Gaussian Filter For = 0.84 A More Exact Gaussian Filter For = 0.84

0.00000067 0.00002292 0.00019117 0.00038771 0.00019117 0.00002292 0.00000067

0.00002292 0.00078633 0.00655965 0.01330373 0.00655965 0.00078633 0.00002292

0.00019117 0.00655965 0.05472157 0.11098164 0.05472157 0.00655965 0.00019117

0.00038771 0.01330373 0.11098164 0.22508352 0.11098164 0.01330373 0.00038771

0.00019117 0.00655965 0.05472157 0.11098164 0.05472157 0.00655965 0.00019117

0.00002292 0.00078633 0.00655965 0.01330373 0.00655965 0.00078633 0.00002292

0.00000067 0.00002292 0.00019117 0.00038771 0.00019117 0.00002292 0.00000067


Gaussian Filter UsesGaussian Filter Uses

• Noise reduction blur...


• Provides random sample points where each point is at least distance r apart...

Poisson Filter (Randomized Points)Poisson Filter (Randomized Points)


• Provide image size nxn, the minimum distance r between samples (e.g., r = 1.8 pixels), and the maximum number of attempts k per sample (e.g., k = 30).

• Initialize a 2D nxn grid with -1, a list of samples initially empty, and a stack of unprocessed indices.

• Randomly choose a sample x0, add x0 to samples, and 0 to indices.

Algorithm To Build Random 2D SamplesAlgorithm To Build Random 2D Samples

continued on next slide


While indices is not empty

Remove i from indices.for (j = 0; j < k; j++) {

p = generate random point between radius r and 2r around xi.

if (p is further than r from each point in samples) {

Add p to samples and its index to indices}

}

Algorithm To Build Random 2D SamplesAlgorithm To Build Random 2D Samples

Fast Poisson Disk Sampling in Arbitrary Dimensions, Bridson, R., ACM SIGGRAPH 2007 Sketches Program

Wilf

: Ther

e’s a

bet

ter w

ay

to p

rese

nt this

(see

filte

r tuto

rial).

..


float3 poissonSample (sampler texture, float2 uv, float2 pixelSize, float discRadius) {

float2 offsets = {float2 (...), float2 (...), ...};float average = tex2D (texture, uv);for (int tap = 0; tap < 12; tap++) {

average += tex2D (texture, uv + offsets [tap] * (discRadius *

pixelSize);}return average / 13.0;

}

Can Find Prebuilt Poisson Filters on InternetCan Find Prebuilt Poisson Filters on Internet

Heat and Haze Post-Processing Effects, Oat and Tatarchuk, Game Programming Gems 4, 2004

next slide


float2 offsets = {float2 (-0.326212, -0.40581), float2 (-0.840144, -0.07358), float2 (-0.695914, 0.457137), float2 (-0.203345, 0.620716), float2 (0.96234, -0.194983), float2 (0.473434, -0.480026), float2 (0.519456, 0.767022), float2 (0.185461, -0.893124), float2 (0.507431, 0.064425), float2 (0.89642, 0.412458), float2 (-0.32194, -0.932615), float2 (-0.791559, -0.59771),

};

Rest of poissonSample Shader FunctionRest of poissonSample Shader Function


• Relates the filter capability to what happens in the frequency domain (fourier transforms)

• Low-pass filter lets low frequencies through which eliminates speckles and sharp discontinuities.

• High-pass filter lets high frequencies through, an edge detector.

Engineering TerminologyEngineering Terminology



Box FilterBox Filter

• Box filters by averaging neighbors (so it smooths)

• In frequency domain, keeps low frequencies and attenuates high frequencies (so it’s a low-pass filter)

111

111

111

9

1

Spatial domain: box frequency domain: sinc


Bartlett FilterBartlett Filter

• Triangle shaped filter in spatial domain (attenuates high frequencies less than a gaussian filter).

• In frequency domain, product of two box filters (so attenuates high frequencies more than a box).

12321

24642

36963

24642

12321

81

1

spatial domain: triangle frequency domain: sinc2



• A filter is a matrix of weights centered on a specific pixel in an image and used to produce some sort of weighted average.

• A host of different effects result from weighting the filters differently...

ConclusionConclusion

Documents

Wilf LaLonde ©2012 Comp 4501 95.4501 Filters. Wilf LaLonde ©2012 Comp 4501 A filter is a matrix of weights centered on a specific pixel in an image and