Radial Blur PostProcess Material

Tomura · January 29, 2015, 3:35pm

I thought I’d share my Radial Blur Post Process Material.

This simplest Version of it:
Radial Blur with fixed number of equally weighted samples

This is the setup of the Material in der Material Editor. The Node named “Radial Blur” is actually just a Custom Node with HLSL code.

The HLSL Code for this Node is:


float2 ScreenMult = View.ViewSizeAndSceneTexelSize.xy / View.RenderTargetSize;
int TexIndex = 14;
float samples[10] = {-0.08,-0.05,-0.03,-0.02,-0.01,0.01,0.02,0.03,0.05,0.08};
float2 dir = ScreenMult * float2(0.5,0.5) - UV; 
float4 sum = SceneTextureLookup(UV, TexIndex, false);
float2 pos = float2(0.0,0.0);
for(int i = 0; i<10; i++)
{
    pos = UV + dir * samples* * sampleDist;
    max(min(pos, ScreenMult * float2(1.0, 1.0)), float2(0.0,0.0));
    sum += SceneTextureLookup(pos, TexIndex, false);
}
sum *= 1.0/11.0;
return sum;

A couple of explanations:
ScreenMult is a factor that is needed to convert the 0-1 range UVs that go into the UV Input to the range that is needed to Align the effect properly on the screen.
TexIndex is the index that corresponds PostProcessInput0 in SceneTextureLookup().
After that the lookup-distances are defined in the samples array and the direction of the lookup (line from the current UV coordinate and the center). The loop then iterates though all of the samples. Basically it just calculates the average of the looked up values and the original value.

The Scene Texture Node in the Material is needed to have access to the SceneTextureLookup function. The “Tex” Input of my CustomNode is actually not needed, but I kept it to remind myself that I need to create a SceneTexture Node in order to make it work.

This is the result of this effect:

I also have a version of this effect where I have weighted the samples and added the functionality to have a dynamic amount of them and a dynamic center coodinate. But since it’s just a matter of adding more parameters to this code and some simple changes, I don’t think it’s necessary to post it here. It’s also very unoptimzed because of the limitations I experienced with the current Custom Node’s functionality.
I’m also not very proficient in HLSL coding, so there might be a lot of points to improve on this effect.

anonymous_user_f41e01c1 · January 29, 2015, 5:31pm

Thats pretty cool, thanks for sharing :D.

zerofiftyone · January 29, 2015, 5:46pm

Thanks. Still wrapping my head around post process stuff so seeing examples is always useful.

SimppleGames · February 1, 2015, 5:12am

Thanks for the tutorial.
I have one question.
In the screenshot, an error occurred.
What’s the problem?

Tomura · February 1, 2015, 1:33pm

The Color output of the Scene Texture node has 4 components (RGBA) your Custom Node is setup to return float3 (RGB). Change the return type of your Custom Node to float4 and everything should be fixed.

SimppleGames · February 1, 2015, 2:50pm

Thanks for your answer.
I tried to change the value to float4 are still errors.
Can l apply to post-process does not work.

Tomura · February 1, 2015, 3:09pm

Hmmm which engine version are you using. It could be that the definition of SceneTextureLookup changed.

If you go to Window -> HLSL Code in the menu. You can see the Materials HLSL code. In there you can find the definition of the SceneTextureLookup function. (Copy the contents of that window to a text editor to make searching easier.)
This should give in my Engine Version (4.6.1) it’s defined as


float4 SceneTextureLookup(float2 UV, int SceneTextureIndex, bool bFiltered)
{ ....  }

That may have changed. I suspect that the last bool Parameter is not there in your Version.
Change the SceneTextureLookup-function calls accordingly and it should work.

If you need a reference. There is a GetMaterialEmissiveRaw(FMaterialPixelPArameters Parameters) function in you Materials HLSL code that should also call the SceneTextureLookup function.

I kind of feared that there would be differences in previous and futures engine versions that would break this (just like most C++ code needs changes with every update). But it seems like something you can fix.

Kenomica · February 1, 2015, 5:16pm

This is really nice. I’ve been looking at making this effect for a speed boost in my game - Very nice

Tom_Looman · February 1, 2015, 10:25pm

Good stuff! Thanks for sharing

SimppleGames · February 3, 2015, 11:44am

Thank you for answers.
Unfortunately, my version is 4.5.

The 4.6 version is probably going to be normal.

Meian · February 3, 2015, 1:36pm

Nice tip !!!

is there a way to “adapt” this hlsl shader to a transparant material in order to make a frosted glass -ish ?

Tomura · February 3, 2015, 2:01pm

Should be possible to some extend. What exactly do you have in mind?

Meian · February 3, 2015, 2:42pm

Recreate a blurred transparent surface like this

This kind of material/shader is really needed/used in archviz projects
Do you think this is doable ?

Tomura · February 3, 2015, 3:22pm

This is what I have come up with (didn’t take a lot of time). Very inefficient and also not lit, since I have to use the emissive color of the Material.
I’ll probably post it later or a better version if I find a solution to make it properly react to lighting.

Meian · February 3, 2015, 3:42pm

Wow, that’s almost what it should be !
it’s great and very promising !
nice work

Meian · February 11, 2015, 9:56am

You sir are for the time being the only one who made a frosted transparent shader so far (that I’am aware of)
I hope you didn’t stop thinking about a better way and maybe sharing this

Tomura · February 11, 2015, 8:07pm

Well I didn’t really do any more work on it, since University is eating up quite some time.
I might write a bit about the problems I’m having with this later this week and show what I have so far.

Sotalo · February 14, 2015, 2:39am

This is brilliant! Are you doing this in-shader, or as a post process?

msSteel · March 1, 2015, 7:49pm

HI I saw the topic https://answers.unrealengine.com/questions/140541/postprocessmaterials.html , I got interested in whether you have blured glass on material?

Tomura · March 1, 2015, 8:36pm

I learned in this thread that you can use Scene Color with Translucent Materials. Can Refraction operate on colour channels separately? - Rendering - Unreal Engine Forums

So with the blurred glass materials I took a similar approach to the Radial Blur Post Process effect. With this what is needed is something like a gaussian blur, so I just picked some samples around the pixel that was processed calculated a weighted average. Samples that are close to the UV coordinate have more weight than samples that are far away. The one in the picture doesn’t use a lot of samples, that’s why you can see those strange circles in it.
If you want to make it perfect you would need to use the TexelSize to make it pixel-perfect and pick all pixels in a radius (depending on how blurry you want it) around the UV coordinate.
This is what you can do in the material editor.

If you want a more efficient method you would probably implement a custom shader or shader node with HLSL and C++ directly for the renderer, afaik. If you do that you can make use of some faster blur/low pass filter algorithms.
For the Radial blur Post Process I didn’t really care, because there will only be one on the screen and I didn’t notice a significant drop in framerate even with more complex versions of it. The samples are also just taken in a line and not a circle, that means that less iterations per pixel are needed.

The other problem with the blurred glass material that I can’t solve is that I have to use the emissive output of the material. This means that any shading on the glass would not be visible. So I have put it on hold for now as I have to concetrate on more important tasks. I also don’t have ideas how to solve this problem. This might also require some modifications to the renderer.

As said in one of the posts above, this isn’t really my field, so there might be someone smarter than me in this area, who knows better.