[UMG] Is there a way to mask background blur widget?

Development Rendering
, , , , ,
1

Hey Guys! I’m trying to create an effect where the edges of the screen are blurred in a circular fashion something like this image.

I tried using retainer box to mask out the entire widget with a blur background in it. But I’m unable to setup a material successfully that can give me a desired result. So any ideas or solutions are much appreciated.

Thanks.

2

Just a gentle bump.

3

I found the way of making such effect, but I think it can be done more effective:

  • make a “sniper” camera and assign a dynamic render texture into it
  • make a material that accepts render texture (from camera), and apply all necessary masks
  • in umg: make a background blur, add image and assign that material

What is bad in this approach:

  • you will render a scene twice: from a main camera and from a sniper camera. In my tests, 4K main camera, and 1024x1024 sniper camera I have 10 FPS drop (from 70 to 60)
  • part of the blur (almost 50% of your screen) will be covered by the image from a sniper camera

What would be nice to have: masked blur, to eliminate sniper camera and unnecessary blur.

4

The background blur widget in UE5 supports adjusting Corner Radius.
If you want to apply a mask to control the blur region, see this plugin: Unreal BackgroundBlur With Mask - YouTube