Messy Alpha Problem - White around edges

Question

I am getting a white line around the visible part of some pngs I am using. I have tried several different shaders but the white artifacts do not go away. How can I fix this?

Answer 1

The reason for this is due to how the texture image was authored, combined with the filtering that most 3d engines use when textures are displayed at different sizes on screen.

Your image may have coloured areas which are completely opaque, coloured areas which are partially transparent, and areas which are completely transparent. However, the areas where your alpha channel is completely transparent (0% opacity) actually still have a colour value too. In PNGs (or at least, the way Photoshop exports PNGs) seems to default to using white for the completely transparent pixels. With other formats or editors, this may be black. Both are equally undesirable when it comes to use in a 3d engine.

You may think, "why is the white colour a problem if it's completely transparent?". The problem occurs because when your texture appears on screen, it's usually either upscaled or downscaled depending whether the pixels in the texture's image are appearing larger or smaller than actual size. For the downsizing, a series of downscaled versions get created during import. These downscaled versions get used when the texture is displayed at smaller sizes or steeper angles in relation to the view, and is intended to improve visual quality and make rendering faster. This process is called "mip-mapping" - read more about mip-mapping here. For upscaling, simple bilinear interpolation is normally used.

The scaled versions are usually created using simple bilinear interpolation, which means that the transparent pixels are mixed with the neighbouring visible pixels. With the mipmaps, for each smaller level, the problem with the invisible mixing with the visible pixel colours increases (with the result that your nasty white edges become more apparent at further distances away).

The solution is to ensure that these completely transparent pixels have a colour value which matches their neighbouring visible pixels, so that when the interpolation occurs, the colour 'bleed' from the invisible pixels is of the appropriate colour.

To solve this (in Photoshop) I always use the free "Solidify" tool from the Flaming Pear Free Plugins pack, like this:

Download and install the Flaming Pear "Free Plugins" pack (near the bottom of that list)
Open your PNG in photoshop.
Go to Select -> Load Selection and click OK.
Go to Select -> Save Selection and click OK. This will create a new alpha channel.
Now Deselect all (Ctrl-D or Cmd-D)
Select Filter -> Flaming Pear -> Solidify B

Your image will now appear to be entirely made of solid colour, with no transparent areas, however your transparency information is now stored in an explicit alpha channel, which you can view and edit by selecting it in the channels palette.

Now re-save your image, and you should find your white fuzzies have dissappeared!

Answer 2

Answer by Eric5h5 · Jan 19, 2010 at 01:25 AM

The problem has nothing to do with mipmapping, actually. Allow me to illustrate:

white fringing + solution

What's going on in the first panel is that bilinear filtering is causing the pixels to be blended between black and the background color. So the transparency is blending from 0% to 100%. This is all well and good, except the default color for transparent pixels in Photoshop is white, and there's no way to change that. So the pixels are also being blended from black to white. Therefore all the in-between areas are partially transparent shades of gray. As you can see, turning off mipmaps doesn't do a thing to help--it's not causing the problem in the first place.

In the second panel, turning off bilinear filtering fixes the interpolation problem. (While introducing a blockiness problem, but that's besides the point here.) Most of the pixels are either 100% solid or 100% transparent, giving no chance for the white background to show up. However, the diagonal cut is done with anti-aliasing, so some of the pixels there are partially transparent. Again, this allows the white background to show through.

In the third panel, an alpha channel has been made and the shape pasted into it, and the background is just filled with solid black. Now, the bilinear filtering is blending the transparency from 0% to 100%, and the pixels are all black (including the transparent areas), so the problem is completely eliminated.

The fourth panel shows that the black background also fixed the issue with the antialiased diagonal cut.

It's actually possible in some cases to use plain transparency (no separate alpha channel) and eliminate the white fringes. Namely, when saving .png files for the web in Photoshop, you can specify the matte color. If your texture is primarily one color, use this for the matte color and bingo, problem solved. (Except you have to export for the web as .png and can't use the texture in .psd format, which is a bit of a pain if you make changes.)

The solution is as described in the other answers: don't use transparency, use a separate alpha channel, and extend colors in the texture outward into transparent areas by one pixel (or more).

Note that there's a bug/quirk/something where sometimes the alpha channel won't show up in Unity for some reason. If this happens, you must have an actual background layer in Photoshop (labeled Background)--simply filling in a layer with solid color isn't always enough.

Add comment · Show 6 · Share

duck ♦♦ · Jan 19, 2010 at 12:01 PM 0

Share

Good description, however - while the the problem does show up with bilinear filtering, it also shows up with mipmapping - because of course the mipmaps are generated using filtering too. For this reason, it's a little misleading to say that the problem has nothing to do with mipmapping.

arturmandas duck ♦♦ · Jul 03, 2018 at 04:19 PM 0

Share

It's not misleading, it's fully explanatory. $$anonymous$$ipmaps have nothing to do with that.

hippocoder · Nov 21, 2012 at 10:19 PM 0

Share

Why is it misleading? It is in no way ever caused by mipmapping. The problem is already there. You're just trying to sound cool, and that's not cool at all. Eric is 100% correct. It isn't misleading unless you can't understand what's written.

Wolfram · Jan 31, 2013 at 06:10 PM 0

Share

As the shown examples are incomplete and there are additional factors to be considered, I did some detailed tests for all possible combinations. However, the result is too big to fit in a comment, so I put it in the forum ins$$anonymous$$d: http://forum.unity3d.com/threads/168532-White-rims-around-transparent-textures-an-analysis

Here is one of the resulting images, that demonstrates most of the problems. For a more detailed discussion, please visit the forum ins$$anonymous$$d.

alt text

(note: Unity Answers rescales the image)

rhys_vdw · Jan 18, 2014 at 01:54 AM 0

Share

Not having the color data on the background layer was where I was going wrong. Thanks for documenting it!

Olly · Sep 03, 2016 at 11:34 AM 0

Share

Doesn't explain why it looks great in the editor though?..

Answer 3

Answer by Dwair · Jan 18, 2010 at 10:41 AM

You can try using transparent cutout shaders, they have alpha cutoff sliders, so you can use them to specify what alpha sould be preserved as transparent.

Another option is modifying the PNG with this PS technnique:

http://unity3d.com/support/documentation/Manual/HOWTO-alphamaps.html

This way you shouldn't have those nasty white edges.

Add comment · Show 3 · Share

Ben · Jan 18, 2010 at 12:22 PM 0

Share

Thanks! That did the trick.

camjackson89 · May 14, 2011 at 08:32 AM 0

Share

The transparent cutout shader was by far the easiest solution here!

Wolfram · Jan 31, 2013 at 02:01 PM 0

Share

That depends on your situation. With a cutout shader, you don't have antialiased edges or half transparent pixels in the texture, since pixels are either invisible or opaque. One advantage with the cutout shaders is they don't need z-sorting, so interpenetrating objects will always be correct.

Answer 4

Answer by OpIvy · Jul 20, 2010 at 08:28 AM

Well, I had the same problem (sort of) and I'm pretty much a noob here, but I'll offer what solved it for me - setting the texture wrap mode to "clamp" instead of "repeat". I'm guessing it is related to this: http://answers.unity3d.com/questions/7893/getting-rid-of-dirt-on-edge-of-plane-texture

Add comment · Show 4 · Share

yoyo · Dec 04, 2010 at 06:51 AM 0

Share

That helped me too -- $$anonymous$$e wasn't an alpha problem, just a texture edge problem. Still some issues though, just not as bad. $$anonymous$$ay be a source art problem, or I could pull in the uv's a little.

Skirbyl · May 20, 2015 at 06:34 AM 1

Share

(Using unity 5.0.1f1 personal)

Hi, I was going fine in my unity project until I came across this problem, after troubleshooting and trying several work arounds, I came across a solution which seemed to be the only way it would work, it seems like a legitimate solution.

Instructions: 1. Import your texture of a tree branch with Transparent background (PNG Format) 2. Apply These Settings : Texture type: Texture Alpha from Grayscale unticked Alpha Is transparent ticked Wrap $$anonymous$$ode:Clamp Filter $$anonymous$$ode: Bilinear (Does not matter as far as I've tried) Aniso Level: 0-16 (Does not matter as far as I've tried)

Create New $$anonymous$$aterial and apply these settings: Shader:Legacy Shaders/Transparent/Diffuse Apply your PNG Tree Branch Image
Now, apply this material to the leaves of your tree, you will recieve the warning that you must have a nature shader applied, hit apply. Voila! Hopefully..

Anyway, from experimenting, this works everytime for me, and as far as I've experimented, you can use different transparent shaders with your branch material before essentially "converting" it through the tree creator.

I really hope this sums up this solution for everybody, it seems to be a real frustration.

Lemme know if it works too! I'm interested to know if this was a purposeful procedure or whether it is a bug they are still trying to iron out.

TTTTTa · Feb 06, 2016 at 07:18 PM 1

Share

This fixed it for me too. The "repeat" mode was causing white lines around the edges of some transparent textures.

Nick-Wiggill · Dec 11, 2016 at 04:29 PM 0

Share

Oplvy I suggest amending the answer to show the necessary texture settings: include setting "Alpha as transparent" and clamp ins$$anonymous$$d of repeat. . Worked for my RGBA 32-bit texture, exported from photoshop using save for web.

Answer 5

Answer by Brian-Kehrer · Jan 18, 2010 at 11:30 PM

This can also happen in areas of partial transparency where no background color is present, particularly with PNGs, so it is always important to follow Duck's instructions in creating a solid background color.

This also means you should create an alpha channel for the file, rather than simply rely on the default opacity (otherwise instead of 50% red, you will end up with more of a pink shade).

In photoshop, this can be done easily by duplicating all the layers, merging them, and overlaying white. Combine this with a black background layer, and copy this into an alpha channel.

Add comment · Share

Messy Alpha Problem - White around edges

11 Replies

Follow this Question

Related Questions