How to go about transferring a post process material to surface?

Development Rendering
1

Hi there!
I’m a bit of a newbie when it comes to materials in UE so I hoped one of you shader gods might be able to enlighten me a little here :raised_hands:
I have been following this tutorial on how to implement Gaussian blur post process material in UE4: Unreal Engine 4 Custom Shaders Tutorial | raywenderlich.com

It all works as intended but I would really like to make it into a surface domain material so it can be applied directly to objects in the world and be rendered at the same time as the rest of the frame. Is something like that possible?
I have attempted to change the domain to surface and blend mode to translucent, but then I get an error saying I can’t use PostProcessInput0 in the scenetexture on surface materials. Maybe there is an alternative node?

I have attached an image of the setup below.
The code inside the Gaussian Blur and Global custom nodes can also be found below.

Thank you in advance!
Rasmus

image
image2058×1041 355 KB

Gaussian Blur custom node:

static const int SceneTextureId = 14;
float2 TexelSize = View.ViewSizeAndInvSize.zw;
float2 UV = GetDefaultSceneTextureUV(Parameters, SceneTextureId);
float3 PixelSum = float3(0, 0, 0);
float WeightSum = 0;

for (int x = -SD; x <= SD; x++)
{
for (int y = -SD; y <= SD; y++)
{
float2 Offset = UV + float2(x, y) * TexelSize;
float3 PixelColor = SceneTextureLookup(Offset, SceneTextureId, 0).rgb;
float Weight = Calculate1DGaussian(x / SD) * Calculate1DGaussian(y / SD);
PixelSum += PixelColor * Weight;
WeightSum += Weight;
}
}

return PixelSum/WeightSum;

Global custom node:

return 1;
}

float Calculate1DGaussian(float x)
{
return exp(-0.5 * pow(3.141 * (x), 2));
2

No. you are blurring the scene image. Not the object.

what is your end goal? A blurry object. or an object that blurs the rest of the scene?

A blurry object can be done on the object itself by using some sort of transparency shell - an item with 2 materials basically.

An object that blurs the rest of the scene like what you have needs to remain a post process as it has to modify the scene image to achieve the effect.

3

Okay, thanks for the quick reply!
The end goal is an object or a UI element that blurs the rest of the scene.
Any tips on how I might go about doing that with a post-process material? Using Scene Capture 2d maybe?

4

If you get a mask of those given meshes then you can use a simple lerp to stop bluring them. I haven’t done this, but try to get a mask with Unreal’s custom depth system.

Also, if this object is always closer to the camera, you can do a camera distance-based mask.

Ah, you can also feed the position of those objects via a blueprint. So, that’s another way to do that.

1 Like
5

For UI element, you have a blur planel thing you can use.

Doing so while thee object is on screen… well, I would set up a camera trace in a fustrum shape, detect the overlaps from that object, and turn on the PP material for it… a bit of work, but probably what you need.

6

Thanks alot, both of you! I ended up actually getting a great result using a post-process material similar to what @arunoda suggested, by moving a mask around through Blueprint.

The effect is used for dialogue bubbles, so I need to be able to use the material on multiple bubbles at the same time. I have tried to simply add a post-process component with a dynamic instance of the material to every character, but this of course does not work, as the most recently added post-process material will simply override existing ones.

Does anyone know if there is a way to make post-process materials “add” on top of each other instead of override?

1 Like
7

Add probably doesn’t do what you think since you’ll end up with values above the 0 to 1 range.

But. You would need a material in which you paste the other materials code anyway.
So its kind of an impossibility.

Why not just use te ui blur components to handle this? Or a transparent image that causes the blur?

8

Hmm… Then I guess a solution could be to have multiple masks in the same post-process material, but it does seem a little limiting.

As far as I know, the problem with the UI blur component is that it can’t be masked, so it can only have the shape of a rectangle, which can’t suffice what I need in this case.

9

What is the problem with just using a custom image with transparency?
Ever made a glossy glass in photoshop?
Similar idea here.

If the issue is that you want to achieve it via material shader, then it’s as simple as making a transparent material that fogs however you need it to.

Remember that it doesn’t work by messing up (also known as gaussian blur) the underlying image. It works by overlaying a transparent material that has a similar end result.

I’m also fairly sure that if you place the gaussian blur from the widgets inside an image component you can mask it out the way you need to…
The component itself is screen wide.
Where the component shows however can probably be controlled in a ton of ways since it factually acts as a transparent glass placed in front of the screen…

10

So far I have the effect working by using the gaussian blur shader, and just moving around masks through blueprint to have it only affect the parts of the screen I need. (See attached image) It works, but performance is not amazing…
I’m not sure I understand how you would achieve any blur through a custom image with transparency - could you elaborate?

I’ve searched around a lot, and as far as I can tell, there is in fact no way to mask or change the shape of the UMG background blur, so this is the only way right now I can think of.

This is certainly a tricky effect to achieve in UE4, it would seem :grimacing:

DialogueBlur.PNG
DialogueBlur.PNG1288×812 152 KB

11

Same as frosted glass.
Make a hazy 50% or more transparent png and stick it in there.

You can also modify the shape and pan the texture via the material. The umg images do use all of the material features if set up properly.

The blur function for the UMG is expensive by nature. Blurring isn’t a cheap operation to begin with…