ride_wind
Topic Author
Posts: 34
Joined: 07 Feb 2018, 03:33

How to use transparent images In UE4

07 Feb 2018, 04:46

I have a problem in UE4 like Using transparent images as TextureSource (Unity)
How to solve it in UE4? Thanks.
 
User avatar
hcpizzi
Site Admin
Posts: 236
Joined: 09 Feb 2012, 12:40

Re: How to use transparent images In UE4

08 Feb 2018, 15:43

Hello,

As explained in that post, Noesis requires textures with the color channels premultiplied by the alpha channel. This is done to allow for proper composition that is associative, but it also fixes problems with texture filtering and mi map generation. You can find more information about it in these links:

https://developer.nvidia.com/content/al ... or-not-pre
http://www.realtimerendering.com/blog/g ... plication/

At the moment, UE4 doesn't support doing the alpha multiplication at texture import time, so the way to go is to use textures that have the alpha premultiplied. If your authoring tool doesn't support it, this forum thread has a link to a tool you can use:

viewtopic.php?f=3&t=1036&p=5842

As an aside, UE4 handles PNGs with alpha in a way that doesn't work with premultiplied alpha. Here's a link explaining the situation:

https://forums.unrealengine.com/develop ... -the-image

So, for now, remember: premultiply your textures and don't use PNGs for translucent textures.

Moving forward we'd like to support doing the processing of the texture in the editor, either by adding it to the plugin or submitting a modification to the engine.

Please, let us know if you need more help on this matter.
 
flyingtree
Posts: 31
Joined: 09 Jun 2017, 04:47

Re: How to use transparent images In UE4

27 Feb 2018, 11:19

So, for now, remember: premultiply your textures and don't use PNGs for translucent textures.
Hi,
What's the working pipeline exactly?

If I have a translucent png file, then I need to convert it to premultiply png and then convert to other formats like tga?
 
User avatar
hcpizzi
Site Admin
Posts: 236
Joined: 09 Feb 2012, 12:40

Re: How to use transparent images In UE4

27 Feb 2018, 12:02

Hi flyingtree,

Yes, if you want to keep using PNG as the source, then you need to convert to TGA to avoid Unreal filling in the color channel of the masked parts. And the premultiplication step has to be performed before the texture is imported, as there's no way to get Unreal's texture import pipeline to do it.
 
flyingtree
Posts: 31
Joined: 09 Jun 2017, 04:47

Re: How to use transparent images In UE4

27 Feb 2018, 13:09

Hi flyingtree,

Yes, if you want to keep using PNG as the source, then you need to convert to TGA to avoid Unreal filling in the color channel of the masked parts. And the premultiplication step has to be performed before the texture is imported, as there's no way to get Unreal's texture import pipeline to do it.
How if I just use TGA file, does xaml support TGA?
 
User avatar
hcpizzi
Site Admin
Posts: 236
Joined: 09 Feb 2012, 12:40

Re: How to use transparent images In UE4

02 Mar 2018, 20:23

No, unfortunately WPF doesn't support TGA, so you wouldn't be able to run the Blend project.

I've been looking at possible options and would like to test some. I've also been looking at the code that messes with the pixels. The function in question is FillZeroAlphaPNGData
and it's called from UTextureFactory::ImportTexture (in EditorFactories.cpp). According to the comment before said function, they do it because some PNG exporters fill fully transparent pixels with white to avoid artifacts when interpolating. which is exactly what pre-multiplied alpha textures aim to solve.

You can give a try at removing that function call, which I tried and seems to work, but may cause with other alpha cut-out textures. In the long run I'll try adding something on our side. I think it should be possible to add something to the editor without modifying its source code, but I've taken a bit of a look at it and it looks like a bit of work, so I'm not sure when I will be able to take on the task.
 
User avatar
hcpizzi
Site Admin
Posts: 236
Joined: 09 Feb 2012, 12:40

Re: How to use transparent images In UE4

06 Mar 2018, 15:23

Hi guys,

I've just uploaded a new version of the plugin that contain a couple of changes to deal with this issue.

First is that now textures imported with XAMLs are assigned to the UI Texture Group, instead of the default World group as before.
Texture_UI.PNG
Texture_UI.PNG (6.83 KiB) Viewed 6422 times
Then, all textures in the UI group are inspected when they are imported of the Texture Group property is changed, and if the source is a PNG image then texels with an alpha value of zero are set to black. This behaviour is controlled by a new setting in the NoesisGUI project settings.
Texture_Settings.PNG
Texture_Settings.PNG (5.63 KiB) Viewed 6422 times
If you want to give this a try, first enable the new setting, and then either manually change the Texture Group of your existing textures, or reimport the XAMLs that reference them.
If you have textures that you use via Bindings, just assign them to the UI group manually.

Hope this is enough to work around this engine problem, and as always, if you run into any problems, let us know.
 
ride_wind
Topic Author
Posts: 34
Joined: 07 Feb 2018, 03:33

Re: How to use transparent images In UE4

19 Mar 2018, 13:49

Hi hcpizii,

I tested this new version, and find it is good for many image, But there are still some flaws,
There have sawtoothes in some image's border, besides translucent picture is too bad.
Please compare bleow two pictures.

1.Using TGA
TGAVersion.gif
2.Using new Plugin
NsGuiVersion.gif
Thanks.
 
User avatar
hcpizzi
Site Admin
Posts: 236
Joined: 09 Feb 2012, 12:40

Re: How to use transparent images In UE4

19 Mar 2018, 15:47

Would you mind sharing the source image with us so I can test it?
 
ride_wind
Topic Author
Posts: 34
Joined: 07 Feb 2018, 03:33

Re: How to use transparent images In UE4

20 Mar 2018, 13:39

Hi hcpizzi,

You can test this picture.
Border.png
Border.png (2.8 KiB) Viewed 6246 times
In my testing code, it like this
TestBorder.gif
TestBorder.gif (2.4 KiB) Viewed 6246 times
It is OK, using TGA.
TGABorder.gif
TGABorder.gif (2.97 KiB) Viewed 6246 times

Who is online

Users browsing this forum: No registered users and 1 guest