koobas.hobune.stream
The question is answered, right answer was accepted
Messy Alpha Problem - White around edges
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
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!
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 ins$$anonymous$$d of Photoshop. Right now the alpha cutoff sliders seem to be doing a satisfactory job.
$$anonymous$$ipmapping is irrelevant--see my answer below.
$$anonymous$$ipmapping is not irrelevant. $$anonymous$$ipmapping 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!
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.
It's not misleading, it's fully explanatory. $$anonymous$$ipmaps have nothing to do with that.
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 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.
(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!
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.
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.
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 -- $$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.
(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.
This fixed it for me too. The "repeat" mode was causing white lines around the edges of some transparent textures.
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.
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.
