The question is answered, right answer was accepted
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?
I've added an answer to a duplicate question that fixes Textures by code, no Solidify or TGA usage needed. It even covers the case where the players themselves are importing images into your game (which was my case). I'm adding a comment here since this is by far the most accessed post, and people are likelly to come here from google - http://answers.unity3d.com/questions/238922/png-transparency-has-white-borderhalo.html#answer-949217
Answer by duck
Jan 18, 2010 at 01:22 PM
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:
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!
Thanks for the detailed explanation.
Two factors that are different in my case are that I have mip mapping turned off on the images and I use the free Gimp instead of Photoshop.
Right now the alpha cutoff sliders seem to be doing a satisfactory job.
Mipmapping is irrelevant--see my answer below.
Mipmapping is not irrelevant. Mipmapping is one kind of interpolation which shows up the 'white edge' problem, when the texture is being downscaled. Dynamic bilinear interpolation is another area which shows up the same problem (moreso when the texture is being upscaled). I have made some small edits to this answer to include descriptions of both upscaling and downscaling.
wow... this is great! thanks so much. this white spill has been a huge issue for me!
Thank you, that was really useful.
Answer by Eric5h5
Jan 19, 2010 at 01:25 AM
The problem has nothing to do with mipmapping, actually. Allow me to illustrate:
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.
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.
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.
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 instead: 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 instead.
(note: Unity Answers rescales the image)
Not having the color data on the background layer was where I was going wrong. Thanks for documenting it!
Doesn't explain why it looks great in the editor though?..
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:
This way you shouldn't have those nasty white edges.
Thanks! That did the trick.
The transparent cutout shader was by far the easiest solution here!
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 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
That helped me too -- mine wasn't an alpha problem, just a texture edge problem. Still some issues though, just not as bad. May be a source art problem, or I could pull in the uv's a little.
(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 Mode:Clamp Filter Mode: 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 Material 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.
This fixed it for me too. The "repeat" mode was causing white lines around the edges of some transparent textures.
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.
The best place to ask and answer questions about development with Unity.
To help users navigate the site we have posted a user guide.
If you are a new user, check out our FAQ for more information.
If you are a moderator, see our Moderator Guidelines page.
We are making improvements to UA, see the list of changes.
For troubleshooting common problems with Unity 5.x Editor (including Win 10).
Answers and Comments
19 People are following this question.
Different transparency on same texture?
Alpha problem with textures on a plane
How do I use Movie Texture with alpha channel?
transparent RGBA PNG textures worked in 4.6, how can I get them working in Unity5?
Texture transparency not working as expected