Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

How do I perform a circular/rotational/spin blur on an image - using DirectX9.0 and HLSL?

For example:

Radial Blur - Courtesy Apple.com

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

You will need to work in Polar Coordinates. In order to convert Cartesian Coordinates into Polar you use the following:

r = sqrt(x * x + y * y);
theta = atan2(y, x);

This will get the coordinates around {0, 0} - so we need to change the Cartesian origin before converting:

float mx = x - 0.5;
float my = y - 0.5;
float r = sqrt(mx * mx + my * my);
float theta = atan2(y, x);

Once you have the polar coordinates you can use a typical multi-tap blur to perform the blur.

const int SAMPLES = 15;
extern float PARAM_RadialBlurLength = 0.01f; // In radians

float2 offsetCoord = inputTexCoord - float2(0.5, 0.5);
float r = length(offsetCoord);
float theta = atan2(offsetCoord.y, offsetCoord.x);

float4 sum = (float4)0;
float2 tapCoords = (float2)0;
for(float i = 0; i < SAMPLES; i++)
{
  float tapTheta = theta + i * (PARAM_radialBlurLength / SAMPLES);
  float tapR = r; // If you alter this according to 'i' you will get a swirl.

  // Remember we need to invert the origin offset we 
  // used to create the co-ordinates, the the + 0.5 on each.
  tapCoords.x = tapR * cos(tapTheta) + 0.5;
  tapCoords.y = tapR * sin(tapTheta) + 0.5;

  sum += tex2D(inputSampler, tapCoords);
}
sum /= SAMPLES;
return sum;
share|improve this answer
    
I don't have XNA here, so YMMV with that code - but it should be correct as far as pseudo-code goes. –  Jonathan Dickinson Nov 15 '11 at 13:45
    
Hi , This is perfect and mind blowing solution . Its work fine and exactly what I want. –  Emon Nov 16 '11 at 3:55
    
Thanks Jonathan Dickinson..... –  Emon Nov 16 '11 at 4:50
    
@Ajit remember to mark it as your chosen answer if it works. –  Jonathan Dickinson Nov 16 '11 at 8:13
add comment

A blur just uses temporal coherence. It doesn't really matter what technology you're using to implement it, so long as you know how to do alpha, you're all good to go.

loop
{
lastRotation = currentRotation
++currentRotation;

draw image texture at lastRotation with some degree of alpha (eg. 50%, this is the blur)
draw image texture at currentRotation with full alpha (the actual image that is spinning)
}

Of course, you needn't just have one lastRotation, you can have an array of them, such that you can have an extensive blur behind your actual spinning image. Each one will reflect the rotation as it was further back in time.

HTH.

share|improve this answer
    
He could also just accumulate the previous textures in a back buffer (this is how temporal blurring works). –  Jonathan Dickinson Nov 15 '11 at 13:28
    
@JonathanDickinson. I've kept the answer general rather than specific to be a useful resource for others. Not every graphics API uses the backbuffer paradigm. –  Nick Wiggill Nov 15 '11 at 13:48
2  
Maybe add it as a potential solution for the APIs that do (his one certainly does). –  Jonathan Dickinson Nov 15 '11 at 13:59
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.