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?
11 Answers
11The 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!
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.
– duckJust an fyi that the filters above don't seem to work for newer versions of PhotoShop. (CS5.1 at least)
– AntFitchafter following all the steps , how do i incorporate the new information into the png ? if i just save it as before there is no transparency now since its solidified ( regardless of the alpha channel , since it cant be transferred into the png ) i know i am probably asking an obvious question. but now that i have an alpha channel mask what do i do with it ? do i load two separate files into unity for each texture ? one png and one alpha ?
– levavourThe 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.
– duckWhy 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.
– hippocoderAs 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. ![alt text][1] (note: Unity Answers rescales the image) [1]: /storage/temp/7348-alpharims_pixelperfect+0.5.png
– WolframNot having the color data on the background layer was where I was going wrong. Thanks for documenting it!
– rhys_vdwYou 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.
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.
– WolframWell, 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.
– yoyoThis fixed it for me too. The "repeat" mode was causing white lines around the edges of some transparent textures.
– ArachnidAnimalOplvy I suggest amending the answer to show the necessary texture settings: include setting "Alpha as transparent" and clamp instead of repeat. . Worked for my RGBA 32-bit texture, exported from photoshop using save for web.
– Nick-WiggillThis 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.
For what it’s worth Gimp will do a great job. 1) Create new image with Advanced Transparent Background. 2) Paint your grass (I like using lighter gray tones and letting Unity fill in the Healthy/Worn colors. Do NOT save as psd but use png. Use defaults on save.
Сan try this…
PNG to TGA: remove artifacts from the transparent textures.
http://forum.unity3d.com/threads/136689-PNG-to-TGA-remove-artifacts-from-the-transparent-textures
In Unity 4.2.1f check Alpha is Transparency in Advance Texture Type
but do you save a psd or a new png ?
For me the answer for your question is :
If your png file created in photoshop have a transparency layer like this:
It,s wrong!
You need to create a new layer above, like this:
This “background” can not have transparency. Now create a selection of your main layer ( ctrl + click or cmd + click(MAC)), go to Channels tab and add a alpha channel with this selection.
Ok now you can export to png.
if you texture is more complex then one color, you can use the Alpha Utility to inflate many times the texture. “Download”
Don’t forget to add a back layer full painted.
Works for me!
Hello to all, I would bring my experience.
I made 2D texture using Illustrator exporting in PNG with transparent background.
I get some of them with white border inside Unity, depending from the image, but i found solution: before export, in Illustrator select all then convert all strokes to path using Object > Path > Outline path (I’m not sure about the command name because I’m using an Italian version of Illustrator at the moment).
After conversion, export as usual in PNG and Unity will show it fine.
I hope this can help someone.
P.S. I use uncompressed texture for 2D of course.
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
– petruciotexture.WrapMode = Clamp solved my issue!
– iamzkz