User Tag List

Page 1 of 2 12 LastLast
Results 1 to 40 of 53

Thread: Radial Blur PostProcess Material

  1. #1
    0

    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.
    Name:  RadialBlur01.jpg
Views: 14683
Size:  141.6 KB

    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:
    Name:  RadialBlurScreen.jpg
Views: 14898
Size:  547.3 KB

    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 at 02:40 PM.

  2. #2
    0
    Thats pretty cool, thanks for sharing .

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

  4. #4
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    21
    Name:  56.PNG
Views: 12784
Size:  221.8 KB

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

  5. #5
    0
    Quote Originally Posted by simpple View Post

    Thanks for the tutorial.
    I have one question.
    In the screenshot, an error occurred.
    What's the problem?
    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.

  6. #6
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    21
    Name:  58.PNG
Views: 12352
Size:  184.5 KB

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

  7. #7
    0
    Quote Originally Posted by simpple View Post
    Thanks for your answer.
    I tried to change the value to float4 are still errors.
      Can l apply to post-process does not work.
    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
    Code:
    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.
    Last edited by Tomura; 02-01-2015 at 11:11 AM.

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

  9. #9
    0
    Good stuff! Thanks for sharing
    Game Developer @ LODZERO - My Twitter | tomlooman.com UE4 samples & tutorials | C++ Survival Game (Open-source template)

  10. #10
    0
    Infiltrator
    Join Date
    Apr 2014
    Posts
    21
    Thank you for answers.
    Unfortunately, my version is 4.5.

    The 4.6 version is probably going to be normal.

  11. #11
    0
    Infiltrator
    Join Date
    Sep 2014
    Posts
    15
    Nice tip !!!

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

  12. #12
    0
    Quote Originally Posted by Meian View Post
    Nice tip !!!

    is there a way to "adapt" this hlsl shader to a transparant material in order to make a frosted glass -ish ?
    Should be possible to some extend. What exactly do you have in mind?

  13. #13
    0
    Infiltrator
    Join Date
    Sep 2014
    Posts
    15
    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 ?

  14. #14
    0
    Name:  frostedglass.png
Views: 13014
Size:  674.7 KB

    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.

  15. #15
    0
    Infiltrator
    Join Date
    Sep 2014
    Posts
    15
    Wow, that's almost what it should be !
    it's great and very promising !
    nice work

  16. #16
    0
    Infiltrator
    Join Date
    Sep 2014
    Posts
    15
    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

  17. #17
    0
    Quote Originally Posted by Meian View Post
    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
    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.

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

  19. #19
    0
    HI I saw the topic https://answers.unrealengine.com/que...materials.html , I got interested in whether you have blured glass on material?

  20. #20
    0
    I learned in this thread that you can use Scene Color with Translucent Materials. https://forums.unrealengine.com/show...els-separately

    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.

  21. #21
    0
    Hi, View.ViewSizeAndSceneTexelSize is not avaible with UE4.9 , can anyone point me to the documentation of the 4.9 shaders ? thanks.

  22. #22
    0
    Supporter
    Join Date
    Mar 2015
    Posts
    4
    Quote Originally Posted by NomadMonkey View Post
    Hi, View.ViewSizeAndSceneTexelSize is not avaible with UE4.9 , can anyone point me to the documentation of the 4.9 shaders ? thanks.
    Use this isntead:
    GetPostProcessInputSize(0)

  23. #23
    0
    thanks it works.

  24. #24
    0
    First of all thanks for the post. I'm a game dev nub so please forgive my ignorance. I manage to get the material to parse without errors thanks to you all with the recent updates to this post however when implementing this in the PostProcessVolume under the blendables all it does is apply a tinted vignette which appears dark blue and changes to black as I approach meshes. Nothing at all as shown in the screenshot. Please help me out UE Yodas. I appreciate any help that can be given.

  25. #25
    0
    This is really very nice. I've been looking at making this effect for a speed boost

  26. #26
    0
    People may also try this custom node for a soft guassian like appearance. lower-cased uv and no extra parameter to adjust weight.
    Code:
    float3 res = 0;
    float2 invSize = GetPostProcessInputSize(0).zw;
    int TexIndex = 14;
    float weights[] =
    {
      0.01, 0.02, 0.04, 0.02, 0.01,
      0.02, 0.04, 0.08, 0.04, 0.02,
      0.04, 0.08, 0.16, 0.08, 0.04,
      0.02, 0.04, 0.08, 0.04, 0.02,
      0.01, 0.02, 0.04, 0.02, 0.01
    };
    float offsets[] = { -2, -1, 0, 1, 2 };
    
    uv *= 0.5;
    for (int i = 0; i < 5; ++i)
    {
      float v = uv.y + offsets[i] * invSize.y;
      int temp = i * 5;
      for (int j = 0; j < 5; ++j)
      {
        float u = uv.x + offsets[j] * invSize.x;
        float2 uvShifted = uv + float2(u, v);
        float weight = weights[temp + j];
        float3 tex = SceneTextureLookup(uvShifted, TexIndex, false);
        res += tex * weight;
      }
    }
    
    return float4(res, 1);

  27. #27
    0
    Infiltrator
    Join Date
    Mar 2014
    Posts
    13
    Quote Originally Posted by Kory View Post
    People may also try this custom node for a soft guassian like appearance. lower-cased uv and no extra parameter to adjust weight.
    Code:
    float3 res = 0;
    float2 invSize = GetPostProcessInputSize(0).zw;
    int TexIndex = 14;
    float weights[] =
    {
      0.01, 0.02, 0.04, 0.02, 0.01,
      0.02, 0.04, 0.08, 0.04, 0.02,
      0.04, 0.08, 0.16, 0.08, 0.04,
      0.02, 0.04, 0.08, 0.04, 0.02,
      0.01, 0.02, 0.04, 0.02, 0.01
    };
    float offsets[] = { -2, -1, 0, 1, 2 };
    
    uv *= 0.5;
    for (int i = 0; i < 5; ++i)
    {
      float v = uv.y + offsets[i] * invSize.y;
      int temp = i * 5;
      for (int j = 0; j < 5; ++j)
      {
        float u = uv.x + offsets[j] * invSize.x;
        float2 uvShifted = uv + float2(u, v);
        float weight = weights[temp + j];
        float3 tex = SceneTextureLookup(uvShifted, TexIndex, false);
        res += tex * weight;
      }
    }
    
    return float4(res, 1);
    With that setup how would I adjust the strength of the blur?

  28. #28
    0
    Thanks a lot Tomura for this post and jbg for the suggestion to use "GetPostProcessInputSize(0)" instead of "View.ViewSizeAndSceneTexelSize"!

  29. #29
    0
    SceneTexture is not supported in Mobile (ES2)
    Is there any replacement? Thank you

  30. #30
    0
    Samaritan
    Join Date
    Jan 2015
    Posts
    135
    Thanks to everyone!

  31. #31
    0
    Sick work mate! Been wanting something like that to use along with a dash mechanic!!!

  32. #32
    0
    Quote Originally Posted by Kory View Post
    People may also try this custom node for a soft guassian like appearance. lower-cased uv and no extra parameter to adjust weight.
    Code:
    float3 res = 0;
    float2 invSize = GetPostProcessInputSize(0).zw;
    int TexIndex = 14;
    float weights[] =
    {
      0.01, 0.02, 0.04, 0.02, 0.01,
      0.02, 0.04, 0.08, 0.04, 0.02,
      0.04, 0.08, 0.16, 0.08, 0.04,
      0.02, 0.04, 0.08, 0.04, 0.02,
      0.01, 0.02, 0.04, 0.02, 0.01
    };
    float offsets[] = { -2, -1, 0, 1, 2 };
    
    uv *= 0.5;
    for (int i = 0; i < 5; ++i)
    {
      float v = uv.y + offsets[i] * invSize.y;
      int temp = i * 5;
      for (int j = 0; j < 5; ++j)
      {
        float u = uv.x + offsets[j] * invSize.x;
        float2 uvShifted = uv + float2(u, v);
        float weight = weights[temp + j];
        float3 tex = SceneTextureLookup(uvShifted, TexIndex, false);
        res += tex * weight;
      }
    }
    
    return float4(res, 1);
    Hi Kory, the effect does not seem to be resolution independent. It seems to be always a fixed pixel size. I tried to multiply this out by again multiplying/dividing by invSize.x/y, but it still is resolution dependent.

  33. #33
    0
    Quote Originally Posted by isgoed View Post
    Hi Kory, the effect does not seem to be resolution independent. It seems to be always a fixed pixel size. I tried to multiply this out by again multiplying/dividing by invSize.x/y, but it still is resolution dependent.
    OK, I found it myself, when trying to find the center for the radial blur: Seems the input ScreenPosition or TexCoord (the UV) are with respect to the wrong port (probably the offscreen). To correct it you need to multiply them with View.RenderTargetSize/ViewSize. See attached screenshot to determine the center:

    Name:  2016-04-08-Correct Center PostProcess Blur.png
Views: 6957
Size:  310.8 KB

  34. #34
    0

    How to Adjust the Vanishing Point

    Hi guys, i'm trying to use this PP material in my 4.11 project

    This is the material setup: Name:  MaterialRadialBlur.JPG
Views: 5710
Size:  269.2 KB


    This is the result: Name:  VanishingPoint.jpg
Views: 5753
Size:  368.6 KB


    How do i adjust the radial blur vanishing point?

    Thanks!

  35. #35
    3
    How do i adjust the radial blur vanishing point?
    I have modified this node to be compatible with 4.12.4. Upon compiling the original HLSL code, the editor threw an undeclared identifier for both View.ViewSizeAndSceneTexelSize and View.RenderTargetSize leading me to believe that Epic has recently renamed these identifiers. You could replace the first line to GetPostProcessInputSize(0).wz; however for the radial blur is then vanishing at the top left corner of the viewport rather than the center of the screen.

    I'm not savvy enough in HLSL or UE4's specific variables and names to know what these have been changed to, however I have produced the same results using the nodes that return those values:

    Name:  Radial Blur.PNG
Views: 5662
Size:  336.5 KB

    I have simply added a new pin to the custom HLSL node named "ScreenMult" (case-sensitive) and removed the first line of code declaring that variable:
    Code:
    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;
    Then simply input the ViewSize / RenderTargetSize math using their nodes.

    The result is a proper vanishing point:



    In theory, I think setting the ScreenMult variable in the blueprint editor will also allow the user to change the position of the vanishing point manually by changing that value. This would work well if you decide to also move the CenterPosition (V2) on the RadialGradientExponential node.
    Last edited by Zarrashi; 07-04-2016 at 07:31 AM.

  36. #36
    0
    Infiltrator
    Join Date
    Aug 2016
    Posts
    19
    I copy from above,but it didn't work in 12.5.Nothing happened.I put it into a post process volume/blend,tick the unbound on.Do some one experienced it too?

  37. #37
    0
    Thanks for this great tutorial! It works well in my project, but when I tried to use it in a VR project , there are something wrong with the right eye display. Any suggestions for me? Thank you very much!

  38. #38
    0
    Quote Originally Posted by Huolynn View Post
    Thanks for this great tutorial! It works well in my project, but when I tried to use it in a VR project , there are something wrong with the right eye display. Any suggestions for me? Thank you very much!
    Possibly see my post #33

  39. #39
    0
    Quote Originally Posted by isgoed View Post
    Possibly see my post #33
    It seems that in my situation, it is not about the center, it is the display in right eye has a left and right reversed problem (sorry for my poor English, hope you can understand what I mean)

  40. #40
    0
    Yes, but it might be the same viewport-renderport issue. Your renderport most likely uses an offset for the right eye. by using the postprocess material of my post #33, you can visualize the coordinates. You should have a cross in the center. Else you need to correct for the renderport or viewport-coordinates.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •