1. Wilf LaLonde ©2012 Comp 4501 95.4501 Filters

2. Wilf LaLonde ©2012 Comp 4501 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? [ 0 0 0 ] [ 0 1 0 ] [ 0 0 0 ] 3x3 identity filter

3. Wilf LaLonde ©2012 Comp 4501 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?

4. Wilf LaLonde ©2012 Comp 4501 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 Unroll Filter result is the answer: assuming normalized weights

5. Wilf LaLonde ©2012 Comp 4501 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 Yourself Filter result is the answer: assuming normalized weights

6. Wilf LaLonde ©2012 Comp 4501 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 Observations 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

7. Wilf LaLonde ©2012 Comp 4501 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 Observations

8. Wilf LaLonde ©2012 Comp 4501 A Blur Filter (Minimal Blur) [ 0 1 0 ] [ 1 1 1 ] [ 0 1 0 ] 3x3 blur filter from LODEV.org Use normalizing factor 1/5 = 0.2 1 5

9. Wilf LaLonde ©2012 Comp 4501 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 1 13 Use normalizing factor 1/13 = 0.077

10. Wilf LaLonde ©2012 Comp 4501 A 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 Use normalizing factor 1/9 = 0.111 1 9

11. Wilf LaLonde ©2012 Comp 4501 A 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

12. Wilf LaLonde ©2012 Comp 4501 A 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 dark since weights sum to 0

13. Wilf LaLonde ©2012 Comp 4501 A 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 dark since weights sum to 0

14. Wilf LaLonde ©2012 Comp 4501 An Edge Detection Filter [-1 -1 -1] [-1 8 -1] [-1 -1 -1] 3x3 edge detection filter from LODEV.org dark since weights sum to 0

15. Wilf LaLonde ©2012 Comp 4501 A Sharpening Filter [-1 -1 -1] [-1 9 -1] [-1 -1 -1] 3x3 sharpening filter from LODEV.org note that sum is 1

16. Wilf LaLonde ©2012 Comp 4501 A 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

17. Wilf LaLonde ©2012 Comp 4501 An Excessive Sharpening Filter [1 1 1] [1 -7 1] [1 1 1] 3x3 excessive sharpening filter from LODEV.org note that sum is 1

18. Wilf LaLonde ©2012 Comp 4501 A 45 Degree Embossing Filter [-1 -1 0] [-1 0 1] [ 0 1 1] 3x3 45 degree embossing filter from LODEV.org 0.5 +

19. Wilf LaLonde ©2012 Comp 4501 A 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 +

20. Wilf LaLonde ©2012 Comp 4501 A 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 +

21. Wilf LaLonde ©2012 Comp 4501 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

22. Wilf LaLonde ©2012 Comp 4501 A Median Filter (Uses Middle in Sorted Result) [ 1 1 1 ] [ 1 1 1 ] [ 1 1 1 ] Slightly better looking de-PEPPERING and blurring (I can’t see it) from LODEV.org the middle value after x-sorting and y-sorting 1 9

23. Wilf LaLonde ©2012 Comp 4501 A Median Filter 3x35x5 9x915x15

24. Wilf LaLonde ©2012 Comp 4501 Gaussian Filters Based on the gaussian distribution

25. Wilf LaLonde ©2012 Comp 4501 1 80 A Crude Approximation of A Gaussian Filter

26. Wilf LaLonde ©2012 Comp 4501 Another One Source:Stephen Chenney University of Wisconsin

27. Wilf LaLonde ©2012 Comp 4501 A More Exact Gaussian Filter For  = 0.84 0.000000670.000022920.000191170.000387710.000191170.000022920.00000067 0.000022920.000786330.006559650.013303730.006559650.000786330.00002292 0.000191170.006559650.054721570.110981640.054721570.006559650.00019117 0.000387710.013303730.110981640.225083520.110981640.013303730.00038771 0.000191170.006559650.054721570.110981640.054721570.006559650.00019117 0.000022920.000786330.006559650.013303730.006559650.000786330.00002292 0.000000670.000022920.000191170.000387710.000191170.000022920.00000067

28. Wilf LaLonde ©2012 Comp 4501 Gaussian Filter Uses Noise reduction blur...

29. Wilf LaLonde ©2012 Comp 4501 Provides random sample points where each point is at least distance r apart... Poisson Filter (Randomized Points)

30. Wilf LaLonde ©2012 Comp 4501 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 x 0, add x 0 to samples, and 0 to indices. Algorithm To Build Random 2D Samples continued on next slide

31. Wilf LaLonde ©2012 Comp 4501 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 x i. 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 Samples Fast Poisson Disk Sampling in Arbitrary Dimensions, Bridson, R., ACM SIGGRAPH 2007 Sketches Program Wilf: There’s a better way to present this (see filter tutorial)...

32. Wilf LaLonde ©2012 Comp 4501 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 Internet Heat and Haze Post-Processing Effects, Oat and Tatarchuk, Game Programming Gems 4, 2004 next slide

33. Wilf LaLonde ©2012 Comp 4501 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 Function

34. Wilf LaLonde ©2012 Comp 4501 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 Terminology

35. Wilf LaLonde ©2012 Comp 4501 Source:Stephen Chenney University of Wisconsin Box 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) Spatial domain: boxfrequency domain: sinc

36. Wilf LaLonde ©2012 Comp 4501 Bartlett 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). spatial domain: trianglefrequency domain: sinc 2 Source:Stephen Chenney University of Wisconsin

37. Wilf LaLonde ©2012 Comp 4501 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... Conclusion