Realtime Radial Blur Filter

Feymour

Welcome to the HowToDoRealtimeRadialBlurFilterInYourDemo tutorial! Let's get straight to the matter:

We have our 'screen' (a linear frame buffer of pixels). Let's divide it into four sectors:

                             ┌----------┬--------┐
                             │          │        │
                             │     a    │   b    │
                             │          │        │
                             ├----------*--------┤
                             │          │        │
                             │     c    │   d    │
                             │          │        │
                             └----------┴---------

 * = radial blur center

The lines divide the four sectors a, b, c, and d. We process each of them one after the other (order does not matter) in this fashion:

Each line will be processed horizontally, starting with the closest to the center. For example, in sector b it would look like the following (excerpt):

 │                                                        │
 │ABCDEFGHIJKLMNOP..                                      │
 *---------------------------------------------------------

 A = first pixel processed, B = second, and so on

For each pixel, we calculate a vector that points towards the center of the radial blur (*).

For pixel A, this will be e.g. V(-1;-1). Now we must scale this vector to some length (1 to 5 is fine). Different lengths result in different kinds (and intensities) of radial blur. Then we pick the pixel P at that position relative to A (i.e. we pick at P(A.x-V.x;A.y-V.y)), mix this pixel's color with the one at A (A=(A+P)/2) and write that to A. NOTE! I say into A! So source = destination. We always work on the same picture! Otherwise this method will not work!

For pixel B, the vector will be (-2,-1) before we scale it. We pick pixel P1 and blur into B. Because we already blurred A, we can use the result from that pixel to blur outwards if needed.

Once we have finished the line, we continue with the one above:

 │ABCDEFGHIJKLMNOP..                                      │
 │########################################################│
 *---------------------------------------------------------

 # = already processed

We do the same here in this line: find vector toward *, scale, pick pixel and blur; since we have already blurred the pixels below us, we can pick up the radial blur from there.

That's pretty much it. Of course there's room for **BiG!** optimizations aestetic enhancements (just think about bilinear filtering and so on). You must also know how to make a vector, scale it and how to calculate the average of the colors of two pixels. But I will not explain this here. If you have any question, my e-mail address is open to everyone.

Now it is time for some greetings: Echo/Fudge (hay! your explanations were essential for me to code my radial blur, and then for this article, you rule man!), Vipa/Purple (hiya, matey!), and I wanna greet you, reader, for reading this piece of crap!

Cya l8r guys,

- Feymour/JapoTek aka Simone Ghiaroni

PS: This document describes only a more or less mathematical way, in the implementation you can do many approximations to make the code run faster.

JapoTek's site: http://www.cis.it/japotek
Feymour's page: http://members.xoom.com/feymour