White/Light boarder around textures

[HappyKat100]

Hi All,

I’m trying to paint a texture onto a material but I’m getting that dreaded light boarder around the outside. I’ve found a lot of posts with this issue but not found a solution.

My image is a 2,048 x 2,048 png which is a white circle on a transparent background (see bottom image). I made the circle without any feathering so the edges were as sharp as possible.

In order to tint the white circle with any color I’m lerping from the color parameter to white. This actually works for white but no other color.

I’m not sure if the issue is the way I’m color tinting or the transparency causing some kind of feathering. I’ve dropped a screenshot of the material code as well as the results I’m seeing. Obviously I don’t want any of the circles to have boarders.

Can anybody help?

Thanks!!

Here is the image I’m using and tinting…

[ClockworkOcean]

I think there’s something up here…

I downloaded the circle, but I had to fix it in Gimp, for some reason it wasn’t transparent. Now my texture looks like this

So I’m wondering if you’re doing something odd with the UVs?

Anyway, on a plane it looks like

And to give it color

[HappyKat100]

@ClockworkOcean Thanks for the thoughtful response here!

Yeah the picture of the circle I attached was a screenshot just to show it was being recognized as transparent in Unreal, so if you downloaded it then it wouldn’t be the same.

But I made it in gimp by using the circle select tool on a transparent background (I also tried it by using the circle brush with hard edges but I get the same issue). Then I just export as png with the default export settings. I also tried TGA but doesn’t fix it.

I missed out a piece of info and that is I’m sending it to a render target and then using that on the material. That said, to further test I’ve just put a basic material together on two planes next to each other and the border issue remains. Also, I’m not sure why the circles show as grey and not white in the scene here (I’m using lumen and sunlight is almost directly overhead and it’s a Lit, Translusant material) and whether that’s got something to do with it?

Is there something special I have to do when creating and/or exporting transparent images from gimp?? Or something I need to do to my texture when in Unreal?

Many thanks!

[ClockworkOcean]

I’d use masked. This edge might just be because I use the magic dropper in Gimp to make your pic transparent

[HappyKat100]

@ClockworkOcean Thanks again!

Yeah, you’re right Gimp is doing some weird stuff here. I’ve got a solution that I’ll share for anyone else that comes across this. There may be a better way but this seems to do the trick…

First off, to remove the edges, the RGB channels need to be full solid white (in my case) and only the alpha needs the mask. I had the circle set in all channels and I think there’s a conflict I think between the RGB channels themselves fading out the white pixels and the alpha doing the same thing.

So the easy way (that doesn’t seem to always work)…

So, I left the RGBs as fully opaque and put a Layer Mask on my Layer which I use to create the transparency.

Layer with layer mask

RGB channels are solid white, but only the alpha channel has the transparency mask

Lastly when exporting, I have to have “Save color values from transparent pixels” turned on (it’s off by default!).

BUT… oddly this sometimes works and sometimes it does not!! I’m not sure if that’s a bug or what. When it works, the RGBs in the new imported texture are just fully white and the alpha holds the transparency. But when it doesn’t the RGBs themselves adopt the alpha shape.

Here, Brush 1 works and Brush 3 doesn’t.

BETTER SOLUTION…

I downloaded a small free texture packer tool (GitHub - Fidifis/TextureMerge: Software to merge (or pack) textures into image channels, producing one image with up to four textures.).

This way I can export an image for my RGB channels and another image for my Alpha channel and then just properly pack them. This so far works every time.

It’s an extra step but it’s pretty easy and at least works. It also means you don’t have to play around with layer masks in Gimp.

Hope this is helpful for anyone else coming across this issue. Thanks again @ClockworkOcean for your support!

[ClockworkOcean]

Did you try it as masked?

[HappyKat100]

Sorry, what do you mean by masked? Setting the material as masked instead of translucent or are you referring to some setting in Gimp?

If you mean the material itself, yeah it was better masked when just place on a simple material (like in my test image I showed) but I could still see a faint outline. However, when saving into a render target it was still really bad. None the less the solution I suggested seems to work well.

[ClockworkOcean]

You could try it with a sphere mask, a procedural one. There’s no edge on that

[HappyKat100]

Yeah thanks. I’m using other shapes, the circle was just an example.