UMG Widget Rendering Issue

[JasonW]

by the way Quality, I think its cool you are working on a medical app with the engine. I’m actually in the process of building a health and lifestyle app that will also use various graphical representations of health data. Would love to chat sometime to see what kinds of things you are trying to achieve in UE4.

W.

[anon44224379]

Very interesting! I’m on version 4.9.2. I wonder if it has something to do with layering UMG elements too. This certainly merits more testing. That would be fantastic if its fixed in 4.10, although I can’t push this project into 4.10 until there is a production release. Thanks JasonW for playing with this and helping me out, I really appreciate it.

I’d love to chat sometime about what I’m doing with the medical app. It is in its final stages for phase 1 right now and I should be able to release some videos and images soon pending the clients approval.

[anon44224379]

Well, I tried 4.10 and that didn’t seem to work. It is the interior portions of the texture that are getting all yucky (which wouldn’t show on your example because they are just flat color). I tried this in 4.10 preview 3 and got the same results. Texture is really crisp and clean (1k with all texture settings set correctly) but in a 3D UMG widget it looks like crap. I may just start a new answerhub question with this. I’m sorry to hijack your thread . Thanks again for the help though.

[JasonW]

Hi Quality,

I tried adding more internal detail to my texture to demonstrate that I’m not getting any degradation of quality in my renderings of 3D UMG widgets… They seem to render just fine… Perhaps there is some other variable we are overlooking… Can you share one of your texture assets with me to experiment with? I would really like to understand the problem…

Thanks, W.

PS- Your contribution to this thread is valuable so no worries

[gamescodedogs]

Problem is still actual in 4.10.1 and i think it’s extremely critical according to VR UI development. Somebody from Epic Games?

[anon44224379]

Yeah, I’m still having issues with this as well, it really is unfortunate.

, sorry I haven’t gotten around to responding to you. End of year was super busy. I’ve attached an image that has demonstrated the problems for me, if you still want to test it.

I would love more Epic love on this.

[anonymous_user_6e7b421a]

Hey Quality,

Apologies if I am not noticing what you are pointing out, but I am not seeing what you are attempting to show within the image?

Since this thread is really long now, and there are a lot of points being made, could you clarify the issue in as few words as possible so I can attempt to help?

Thanks,

[anon44224379]

Hi ,
Thanks for taking a look. This image says it all:
You are looking at a sprite on the left and a UMG widget in an actor blueprint on the right. They use the exact same texture.

Why is the 3D UMG widget rendering this texture so poorly, whereas the sprite rendering is crisp and clean?

As has been previously mentioned I have a project with many 3D UMG widgets. They need to be UMG because they are interactive touch screens in 3D space. Regardless of what texture settings I change the images are always very poor quality when viewed through the 3D widget.

If it would help I can send you a private message with a video showing the problem. My company would appreciate any help we can get on this. Our client is a large medical equipment provider and the fidelity of these graphics is important. Thanks for your time.

[anon44224379]

Steps to reproduce:

1. Download the image from the thread
   above titled:
   “whiteboardiconsslices_64.png”.
2. Create a New Widget Blueprint.
3. Add an image to the default canvas
   panel.
4. Place the image
   “whiteboardiconslices” into the
   image slot of the appearance brush.
5. Turn on size to content.
6. Set the image size attribute (x,y)
   to anything other than the real
   dimensions of the image. For example
   x= 40, Y=32.
7. Save widget blueprint.
8. Add a new Blueprint Actor Class.
9. Add a component of type “widget”.
10. Set the widget Class to the
    previously created widget
    blueprint.
11. Place the Actor blueprint into a
    map and view it.

Notice how if the image size is anything but its native resolution (which for the image above is 605x468) The texture is horribly rendered. This makes the image size attributes virtually useless and means that you have to import all textures at the resolution they will be displayed. This is far from practical when creating a large complex UMG interface, because you don’t know how big you might need that image. This is especially tricky if that image might change size due to changing content in a dynamic layout. The interface also changes size based on what device it is viewed on (PC, vs Mobile).

Here’s an example of how this graphic is being used. Notice the orange half circle texture in the upper right:

[anonymous_user_e729f54e]

Hello quality,

I have a few questions for you that will help narrow down what issue it is that you are experiencing.

Quick questions:

1. I noticed that you keep using the term “sprite”, are you referencing a PaperSpriteActor or do you mean a 2D widget that is added to the viewport?
2. If other, could you please clarify?
3. What are your scalability settings currently (settings > Engine Scalability settings)?
4. Could you provide a clean project that reproduces this issue so that I could take a closer look?

[anon44224379]

,

1. Yes, I’m referencing the
   PaperSpriteActor
2. See question 1 above
3. Engine Scalability settings are all
   set to “Epic”.
4. Please see the steps in my second
   response to above. They are for a clean project and should be easy to reproduce.

[anon44224379]

You bring up a good point Zulman, that it isn’t just textures. I’m experiencing the same thing with text as well. Its really sharp in the UMG editor but looks pixelated in 3D. See the two images below. “Capture two” is in the UMG editor. “Capture 3” is in 3D space. Notice how soft it gets.

[gamescodedogs]

Sorry for the invasion to this dialog , it’s not about sprites, it’s about all UI elements in 3D mode. Looks like their render target texture is too small or too compressed. Here are screenshots of 2D and 3D version of the same widget.

For reproducing in clean&default set project just create text + button as widget and then place it in 3D space.

Thank you so much for looking at this thread!

[anonymous_user_e729f54e]

I have noticed a few things that may be causing this issue. This is why I would like for you to provide the project that you are using that reproduces this issue. I would like to take a closer look.

[anon44224379]

, I can’t provide the project, it is client work. The problems are visible however in a default scene. Did you see the steps I listed above? I’ll put together an example project for you that shows the issue and I can send.

[anon44224379]

,
You can download a sample project from [here][1]. I’ve created a very simple example of how scaling the image in UMG or reducing a font size greatly affects its quality. The issue is very apparent the closer you get to each image. I feel like the issue is one of user expectations for the Scale parameters in UMG not doing what we’d like. As a comparison I placed and scaled paper sprites alongside the UMG images. These sprites render in 3D space sharp regardless of how they are scaled. This is how I’d expect an image scaled in UMG to react. Hopefully this helps explain the frustration we’re having.

[gamescodedogs]

Hi ,

Here is [an example project][1] for reproducing.

Same 3D ui in Unity:

[anonymous_user_e729f54e]

Hello Zulman,

After taking a look at your project, I found that this is working as intended. I have provided a an example below to help explain the issue that you are having.

Example:

Both images are 3D widgets in game. I placed a block behind them to help show the difference. The original in on the left and the altered version is on the right. What I did to achieve a more crisp look was increase the draw size of the widget and scaled it down.

As you can see here the widget on the right is much larger. This means that when I bring it in to the world as a 3D widget I can scale it down to the size I need. This will leave it much more crisp. If it helps you could think of the size of the widget as you would any texture. By this I mean that if you take a really tiny texture and blow it up you will have the same sort of fuzziness.

Make it a great day

[gamescodedogs]

, thank you so much!

Could you please help us to understand preformance situation with this downscale approach, is widget’s Render Target Texture size = ScreenSize?

[anonymous_user_e729f54e]

It can be assumed that generally the screen size will be the texture size that should be expected from the widget.