The closest we’ve gotten is a post process material hooked into the blendable slot on a post process volume which blurs the scene using an alpha mask in the shape of our HUD. The code is pretty much exactly the same as this post. This achieves the desired effect for the most part but if any UMG elements move or the viewport gets resized it falls apart.
Does anybody have any ideas on how we could do this?
The way I would try it is to render a blurry version of the game view onto a rendertarget, as you have already done. Now that you have a blurry texture the rest is easy. You simply need to create a material that takes the vertex position in screen space and samples the corresponding color from the blurry scene texture. If you apply this material to an UMG element it should give you the desired effect. No need for multiple different UI masks.
The way Unreal is setup, each material has a domain. Each domain has a specific responsibility with a lot of plumbing in the renderer, so for example, the post process material domain, is able to access final scene color and such so that it can do post processing on it. Unfortunately Slate isn’t yet well integrated with this pipeline. We’ve setup the UI material domain for UMG, but it will need a lot more work to gain access to the right rendering bits in the pipeline. Additionally, it has added complexity if you want to blur multiple layers, essentially every time you want to blur a new layer, a new resolve step and intermediary Render Target is necessary. Lots of complexity, lots of thought will be needed to evolve UMG/Slate to handle that case well. Probably when we attempt to tackle general post processing for widgets.
For the time being, if you only need to blur directly behind the widgets, and do not need to also blur the widgets, there is a solution, but it’s tricky. The trick is to make a standard post process material, that blurs some set of quads you specify dynamically. You’d make a set of special ‘blurry widgets’ that communicate with this single post process material and keep it updated with the rects needed to be blurred.
Hey Nick, if you dont mind, can you provide us a quick blueprint, so we can start with it. Thank you. We are trying to achieve the effect for about a week using radial blur, But failed to get it. Here is an example that our artists want us to achieve
The closest we got was a second camera (a duplicate of the player’s) that captured a blurry version of the scene and wrote it to a fairly low-res texture. From there we were able to add it to the UI but weren’t able to properly subtract anything from it. It was bad for performance so we abandoned the idea.
I would almost say don’t even do this in UMG then and just have floating geometry attached to the camera with a proper full material. The only challenge then comes in with making it reposition itself to fit variable aspect ratios. If someone can figure that out, that might be the solution to all this. Doing it like that would give you access to the full range of material controls, including the blurring effect that some people have done on various glass materials. I’ve been working on something where I wanted a refraction effect on the UI, and that was the only way I could find that would let me do it.
I think that’s what they tried first, but understandably, the resulting code is a mess. I can’t imagine the issues between the Slate-to-world units conversion, aspect ratio troubles, performance hits…
Would Canvas drawing code (functions available from the HUD class) work for that, by the way ? Or would it still be UI domain ?
Is this the effect you are looking for? (See the attached screenshot)
If Yes, then it’s simple.
Add an Image as background for the area required to be blurred in the UMG. Use a normal image (you can chose any color depending on other elements of UMG). Now, play with the Alpha value of the image to give a blur effect. With higher value blur will also increase.
If you want to add more effects make a png image with different filters in Photoshop and use that as background image. Play with Alpha as above.
No. Please read the thread : we’re talking about blurring, not transparency. We want the ability to apply a full post-processing chain to the scene underneath UMG/Slate widgets.
Basically I blur inside a quad defined by a position and size, and feed that from a special (unique) widget. It’s not very scalable (no way to have 10 widgets for example), the more scalable version would be to use a render target.
