Announcement

Collapse
No announcement yet.

Radial Blur PostProcess Material

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • started a topic Radial Blur PostProcess Material

    Radial Blur PostProcess Material

    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.
    Click image for larger version

Name:	RadialBlur01.jpg
Views:	1
Size:	141.6 KB
ID:	1143512

    The HLSL Code for this Node is:
    Code:
    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[i] * 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:
    Click image for larger version

Name:	RadialBlurScreen.jpg
Views:	1
Size:	547.3 KB
ID:	1143513

    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.
    Last edited by Tomura; 01-29-2015, 02:40 PM.

  • replied
    Has anyone managed to get this working on UE4.22?

    Leave a comment:


  • replied
    I was able to solve right and bottom edges.
    Use "ViewportUVToSceneTextureUV"
    https://answers.unrealengine.com/que...stom-node.html

    Code:
    const float2 ScreenMult = View.ViewSizeAndInvSize.xy * View.BufferSizeAndInvSize.zw;
    
    const int TexIndex = 14;
    const float Samples[11] = {-0.08,-0.05,-0.03,-0.02,-0.01,0,0.01,0.02,0.03,0.05,0.08};
    
    float2 dir = float2(0.5,0.5) - ViewportUV;
    float4 sum = float4(0.0, 0.0, 0.0, 0.0);
    for(int i = 0; i<11; i++)
    {
        float2 pos = ViewportUV + dir * Samples[i] * BlurDist;
        pos = clamp(pos, float2(0.0,0.0), float2(1.0, 1.0));
        sum += SceneTextureLookup(ViewportUVToSceneTextureUV(pos * ScreenMult, TexIndex), TexIndex, false);
    }
    
    return sum / 11.0;

    Leave a comment:


  • replied
    Originally posted by Bevman00 View Post
    I've got the material working in a slightly different way using moadib's code in 4.20.3, here's the material, and a video workflow: https://www.youtube.com/watch?v=4ccBjlAFt0s

    Just in case anyone is interested
    I tried your sollution but it doesn't work on 4.21
    is there any change required ?

    Leave a comment:


  • replied
    does it work in 4.20, i heard there are problems with hlsl in ue4.20

    Leave a comment:


  • replied
    Does any of you have a version of this that just blurs ? With no radial involved

    Leave a comment:


  • replied
    Originally posted by WardVanBever View Post
    Im having troubles making this work on mobile ES2.
    Some comment in this thread from 2015 says ES2 does not support SceneTextures while the documentations states PostProcessInput0 is supported. (see screenshot + link)
    https://docs.unrealengine.com/en-us/...ProcessEffects -> just CTRL+F "PostProcessInput0" or look below
    Click image for larger version  Name:	PostProcessInput0Supported.PNG Views:	1 Size:	220.7 KB ID:	1522014

    Any idea how what the problem could be?

    If have tried only using the PostProcessInput0 and multipling it by some float4 to give it a tint and that did work.
    I assume the problem is the "SceneTextureLookup()", I could be wrong.
    Mobile HDR is enabled and other Post Processing effects (like DoF) work on mobile.

    Thanks!
    To use "MobileSceneTextureLookup()" instead of "SceneTextureLookup()".

    For Mobile Example:
    Code:
    const float2 ScreenMult = View.ViewSizeAndInvSize.xy * View.BufferSizeAndInvSize.zw;
    
    const int TexIndex = 14;
    const float Samples[11] = {-0.08,-0.05,-0.03,-0.02,-0.01,0,0.01,0.02,0.03,0.05,0.08};
    
    float2 dir = float2(0.5,0.5) - ScreenUV;
    float4 sum = float4(0.0, 0.0, 0.0, 0.0);
    for(int i = 0; i<11; i++)
    {
        float2 pos = ScreenUV + dir * Samples[i] * BlurDist;
        pos = clamp(pos, float2(0.0,0.0), float2(1.0, 1.0));
    #if (ES2_PROFILE || ES3_1_PROFILE || MOBILE_EMULATION)
        sum += MobileSceneTextureLookup(Parameters, TexIndex, pos * ScreenMult);
    #else
        sum += SceneTextureLookup(pos * ScreenMult, TexIndex, false);
    #endif
    }
    
    return sum / 11.0;
    Works fine

    Leave a comment:


  • replied
    I've got the material working in a slightly different way using moadib's code in 4.20.3, here's the material, and a video workflow: https://www.youtube.com/watch?v=4ccBjlAFt0s

    Just in case anyone is interested
    Attached Files

    Leave a comment:


  • replied
    Im having troubles making this work on mobile ES2.
    Some comment in this thread from 2015 says ES2 does not support SceneTextures while the documentations states PostProcessInput0 is supported. (see screenshot + link)
    https://docs.unrealengine.com/en-us/...ProcessEffects -> just CTRL+F "PostProcessInput0" or look below
    Click image for larger version

Name:	PostProcessInput0Supported.PNG
Views:	1
Size:	220.7 KB
ID:	1522014

    Any idea how what the problem could be?

    If have tried only using the PostProcessInput0 and multipling it by some float4 to give it a tint and that did work.
    I assume the problem is the "SceneTextureLookup()", I could be wrong.
    Mobile HDR is enabled and other Post Processing effects (like DoF) work on mobile.

    Thanks!

    Leave a comment:


  • replied
    This was very useful. Many thanks.

    I'm currently using a modified version of the script which allows control of the radial center, as well as the gain and number of samples. It works in 4.19.

    Code:
    int TexIndex = 14;                               // Equivalent to the index of the PostProcessInput0 on the SceneTexture node
    float2 dir = (ScreenMult * Center - UV) * -1;  // Directon of the blur
    float4 sum = SceneTextureLookup(ViewportUVToSceneTextureUV(UV,TexIndex), TexIndex, false);  // Initial lookup of the seen, unaffected by blur
    float2 pos = float2(0.0,0.0);                  // Initializing variable 'pos'
    float currentValue = 0;                           // Initializing variable 'currentValue'
    float delta = sampleDist/Samples;              // The distance of each sampling step. The more steps, the smaller the distance
    
    // Loop for each sample
    for(int i = 0; i<Samples; i++)
    {
        // new sample position
        pos = UV + dir * currentValue;
        pos = max(min(pos, ScreenMult * float2(1.0, 1.0)), float2(0.0,0.0));
    
        // Look up and add. The higher 'i', the lower the strength of the addition
        sum += SceneTextureLookup(ViewportUVToSceneTextureUV(pos,TexIndex), TexIndex, false)* (Samples - i)*2/Samples ;
    
        currentValue -= delta;
    }
    
    // Gain control
    sum *= 1.0/((Samples/Gain)+1);
    
    return sum;

    Attached Files

    Leave a comment:


  • replied
    Hi. I'm fairly new to blue printing and was wondering if you would be willing to show me how to replicate this in 4.19. I've tried myself but cant seem to make it work.

    Leave a comment:


  • replied
    Cool!
    Thank you, I was looking for a tutorial on this.

    Leave a comment:


  • replied
    Anyone got this material working in 4.19 after enabled "Temporal Upsampling" ?

    Leave a comment:


  • replied
    Yep, that worked great in my 4.19 project, thanks for the help!

    Leave a comment:


  • replied
    Originally posted by melonFury View Post
    Has anyone got this material working in 4.19?
    Try this:
    Code:
    const float2 ScreenMult = View.ViewSizeAndInvSize.xy * View.BufferSizeAndInvSize.zw;
    
    const int TexIndex = 14;
    const float Samples[11] = {-0.08,-0.05,-0.03,-0.02,-0.01,0,0.01,0.02,0.03,0.05,0.08};
    
    float2 dir = float2(0.5,0.5) - ViewportUV;
    float4 sum = float4(0.0, 0.0, 0.0, 0.0);
    for(int i = 0; i<11; i++)
    {
        float2 pos = ViewportUV + dir * Samples[i] * BlurDist;
        pos = clamp(pos, float2(0.0,0.0), float2(1.0, 1.0));
        sum += SceneTextureLookup(pos * ScreenMult, TexIndex, false);
    }
    
    return sum / 11.0;
    Last edited by moadib; 03-19-2018, 06:26 AM.

    Leave a comment:

Working...
X