I’ve noticed a big difference in rendering quality between an image inside a UMG widget displayed in world space and the same image rendered as a sprite in world space.
I know the widget component is still experimental and didn’t know if this lower rendering quality is a bug or if there are special settings somewhere that can improve the quality. I think I read somewhere that the widget component is a render target of some kind and so there might be a resolution setting. When I change the widget to render to screen space instead of world space, the images look identical again, but then this makes it useless for in world displays.
So far I can’t find anyway to improve the widget quality. It lacks detail and sharpness and there is a black halo around the masked area which also affects the density of the shadow.
where would that setting be? I went and opened the image texture and looked at the filter settings, but there is no CLAMP setting. Also the same image texture is being used by both the widget and the sprite.
I’ve tried all those settings but it doesn’t make any difference. The sprite is using the same texture and looks great with plenty of detail and the masking looks good. Hence the comparison between the two.
I don’t think it’s texture filtering, I think it’s texture compression.
Change the compression setting to something less compressed (like “HDR” or “Vector Displacement” or “TC_UserInterface2D”
Sorry, those settings have no effect at all… I think you missed the fact that both the Sprite and Widget are sharing the same image texture with same settings. The sprite is rendering correctly but the widget quality is bad…
I have attempted to reproduce your issue, but am not able to get the same results. I do see the major points here are that you are using the same texture for the sprite as well as the 3d Widget as well as changing from Screen Space to World Space.
Would you mind providing me with some simple steps to reproduce what you are seeing in order for me to better troubleshoot the issue on my end?
Created a new sprite, set image texture, changed default material to translucent.
Added Sprite to world.
Created UMG Widget and added a Image Item.
Loaded the Image texture into the brush, left image size 256 x 256.
Set Size X and Size Y to 100 in the Slot.
Created an empty actor, added widget component.
Set the Widget class to MyWidget, selected Word space.
Set Draw Size to 100 x 100.
Positioned actor so it is same size as sprite in the viewport.
Hit play.
These steps reproduce the artifacts I was getting, however I noticed If I keep, image size, size X & Y, and draw size all at 256 x 256, then the render quality is much better.
So I guess, when ever the image is scaled and not 1:1 with the original file size you get fuzzy results even if the image is scaled down to a smaller size. If you switch to screen space, then the quality is much better than world space.
In all cases, even with a 1:1 pixel ratio, there is a dark halo around the masked image even when the image detail is good.
I think there remains some widget rendering issues, but at least I know more about how to control the quality a bit. I’ve tried all sorts of Mip, Filter and Compression settings in the image texture without much luck. So the only thing that seems to help is keeping size settings 1:1 with file size.
Here is an example of a UMG widget in world space with a perspective camera, no antialiasing, containing Text, images and vertical buttons arranged as bars.
Notice the fat looking text… I think there is a dark halo around everything in the widget, possibly a mask issue. Its making the text look dark and puffy, and any semi-transparent object look darker than it should be. I think I made translucent materials for the bars in back that completely disappear.
I looped in a couple more developers to help explain why this issue is occurring. World renders to a render target, which is then rendered in the world, suffering all post process effects there in. Screen uses the slate renderer directly, and draws on top of the frame buffer, suffering no ill effects of post processing, resolution scaling…etc.
The loss of quality comes from texture sampling (not pixel accurate) artifacts and a number of rendering effects such as post process which aren’t really suited towards UI. When you make it screenspace all you are doing is rendering UI like normal except just updating each frame where it should be located in 2d. Screenspace circumvents all 3D scene rendering. We will not be able to get around texture sampling artifacts. It is what happens when you are in 3D. 3D UI art has to be created in such a way that makes these issues less visible. We have plans to work around post process by rendering 3D widgets after. However, if you want true in world with depth testing there is no way to prevent applying post processing to these widgets.
I hope this clarified your issue and you have a better understanding of Screen Space and World Space rendering. Let me know if you need additional assistance or have any other questions.
I have also been struggling with this same issue. It is ridiculous how poor the quality of UMG rendering in 3D is. It would be great to be able to render a UMG widget exactly like sprites are rendered. The sprite rendering is perfect and sharp and I can move it anywhere in 3D space. I can’t compose blueprint controlled tables with sprites though. UMG is great for building the tables and I can control all the data dynamically, but the rendering looks like crap.
Here is the same exact texture rendered with a sprite (left) and UMG on the right. I’m working on a large project with quite complicated UMG elements such as graphs and tables built in UMG for a hospital.
How hard is it to render UMG widgets the same way sprites are rendered? Is this a big ask?
The cause of this problem is obviously different, as it has severe “jaggies” that come from texture resolution/filtering, rather than being based on render pipeline setup. I expect that the compression settings for the texture, or perhaps the MIP map loading threshold, is not set for optimal sharpness in the second case.
Hi Quality, thanks for posting images of the issues you are having with UMG. I was having the same issue with the jagged rendering of textures in UMG that you are experiencing. What I learned is that you should avoid scaling your textures and images in UMG’s layout editor. Its the scaling that is causing the horrendous rendering. You need to render your graphics at their native size without scaling them. I know this should not be the case, and it doesn’t affect sprite rendering, but it is what is causing your issues.
There are of course other rendering artifacts with the alpha channel that are also causing me trouble as I’ve written about above. but give my suggestion a try… all the texture filtering settings that I’ve tried don’t help at all. I think the subsampling routines that UMG/Slate employee doesn’t handle scaling very well at all!
Thanks ,
Yeah, I’ve played with all the texture filtering settings to no avail. I’ll look into the scaling inside of the layout editor. Thanks for the response
Ok, so I’m a bit confused. Looking in the widget editor there are two locations to change the scale (besides the “render transform” which I don’t use). The graphic in my widget is an image inside a canvas panel. The “image size” in the brush is 605x468 which is the actual size of the texture. So this begs the questions:
Is the “slot” size X and size Y causing the issue then? Are you saying that these must be the same as image size? This seems ridiculous as you would essentially have to build your UI outside of Unreal and then cut it up and export the parts.
If so how would I then calculate what the actual size of the textures should be? It’s not 88x67px. Scaling the texture to that size results in a very pixelated image.
Is the fact that its not a power of two texture an issue?
I’d love to hear from Epic on the proper way to go about this. All my 3D widgets are very hard to read. Look at how blurry the text is in the second attachment I included is.
The fact that sprites are a 3D element that renders the textures perfectly sharp is what made me think it would be nice to do the same for UMG. I imagine sprites are rendering in a separate pass.
I’ll keep experimenting with this, but it feels anything but straightforward and intuitive. Even the 1:1 size fix isn’t a perfect solution as you’ve mentioned .
@jwatte - It has nothing to do with the texture resolution and filtering. Those images are using the exact same texture. See 's in depth explanation above.
Quality, what version of the engine are you working with? I just did a test in the new 4.10.3 and I can’t reproduce the jaggies anymore with a 3D UMG widget no matter how wacky I set the size settings. Perhaps Epic actually fixed this issue already, I’m getting smooth beautiful sprite like renderings now. I need to try the same test in an older engine and see if I can reproduce the jaggies again… At least give it a try.
