If you want your post process effect to take place on the UI / UMG widget, how do you do that? Is it even possible?
2 Likes
From the research I’ve done, 2D widgets cannot accept camera post processing. 3D widgets, however, do. I too, would like to see this in UMG. e.g. after clicking a button that will display a prompt of sorts, blur the UI behind the prompt, or Vignette around the viewport, etc…
yeah, I want to do this full screen effect, that affects the UI too but its currently not possible it seems.
Any updates on this?
I know it’s possible to get around this by using a 3D widget attached to the camera, but the issue with this method is something in the game world can get in front of the 3D widget. I don’t think the 3D widget would be able to resize itself automatically based on the screen resolution, either. Maybe a UE4 developer can comment on this? Or maybe we should ask for a feature request to add a post processing option to 2D widgets? I think it would just require moving the render order of the 2D widget to before the post processing gets applied.
For now I am doing the attach to camera trick. It behaves well once you make the UI’s scale adapt to the FOV. Another idea is to render the 3D widgets to a render target and then use the created texture in a post-process material. As I did not test this, there might be a catch.
1 Like
There is a lot of rendering limitations in the current state of Unreal and I would have to run some proper testing to answer this properly. My intuition tells me that if you render your UI to a render target with alpha, you might be able to stick that UI texture on a 3D card in front of your camera. Since you’ll need a material to do this, you can take this opportunity to plug something in the emissive channel. Like a color corrected version of your UI texture for instance.
Are you able to control the amount of bloom you get on your widgets? The user interface material domain only has a color, opacity, and screen position output. There’s no emissive color output, so I can’t crank up the color output to create a bloom effect. Without it, my widgets look pretty dull. I suppose I could render the bloom out to a texture, but that would make my textures much larger than necessary, and then I wouldn’t be able to directly use the image as a button (since it’s too large).
Wouldn’t the render target just clamp the color values between 0 and 1, though? There wouldn’t be any way to store the emissive color information, so it wouldn’t be possible to adjust the emissive levels of different images in the UI separately.
I think the only solution right now is just to not use widgets to render anything that requires post processing. Instead, it’s better just to spawn 2D sprites into the game world in front of the camera. This is quite a shame, since UMG is quite nice for editing a HUD or touch controls. Maybe if enough of us request for this feature to be added, Epic Games would get around to improving UMG and widgets. I know there’s another post (3D widgets affected by lighting - Rendering - Unreal Engine Forums) requesting for more control over post processing on 3D widgets, but it’s been years and they still haven’t added the feature.
Hey there. I was able to prove that it is in fact possible to post-process a UMG UI as if it were a 2D widget, however this only really works if your game is fully UI-based or 2D and doesn’t require a perspective camera (so… no 3D games can do this.)
For those who are wondering if it’s possible to post-process a UMG widget and make it look as if it were still in 2D space, I posted a tutorial over on the forums: Post-Processing a UMG User Interface - Programming & Scripting - Epic Developer Community Forums
It is possible! Take a look at the “Retainer box” widget in umg, everything inside of it will have an “Effect material” applied to it.
Here is a tutorial to use this : Using the RetainerBox Widget · ben🌱ui
Then you have to make your own post process from nodes, but it’s already an excellent start!
2 Likes
RetainerBox adds effects for its contained widgets. If you want to add post-process effects for a widget’s covered region, you can try this: