How to make basic alpha transparent materials work without white edge glitches at certain angles?

[mikejm]

I am trying to make a set of low poly trees work in my Unity project using Universal Render Pipeline but I am encountering bizarre glitching behavior with white edges appearing around the edges of the leaves textures at certain angles while not at others. I am not sure what the correct solution is.

Here is one of the leaf textures applied to a plane in my scene and viewed at a straight on angle:

As you can see it is sharply handling the alpha perfectly with no edge problems of any kind. Yet if I then angle my view of the plane, I get this (ignore the three white glow spots in the background - unrelated effect):

This is manifesting in the real world where some polygons the texture are applied to are viewed at angles. For example, here is the low poly tree in a test game scenario:

You can see the polygons it is applied to look fine where they are viewed front on, but as you get to the edge of the “tree” where you are now seeing them wrap around and viewing them at a hard angle, the same white edge glitch comes through and ruins the appearance completely.

For reference, here is how the PNG is handled as a Texture2D in these tests:

We can see just looking at the preview the alpha channel is being handled perfectly here. There is no mistake and no white halo to be found anywhere. By clicking the “A” we can also see this is how Unity gets the alpha channel, which is perfect and sharp and well designed by the person who made it:

Where it gets weird is in the Material, which I set like this:

What is weird to me, is if you look closely at the tiny “base map” thumbnail, you now see a white halo around the edge of the material. If I set the alpha clipping threshold down to zero, this is also visible in the material preview at the top:

So clearly, I have now taken a PNG with perfectly designed alpha transparency and turned it into a material that has a white halo around it that must be clipped out and is only somewhat being clipped properly.

The only way to get rid of it with this setup is to crank up the threshold so high I get half the leaves disappear, which shouldn’t be necessary given this is a perfectly designed PNG with a sharp, hard, unambiguous alpha.

So I must presume I am doing something wrong, but I am not sure what. I keep trying different things but no solution and I am completely clueless where it is going wrong. I have tried setting to Transparent rather than Opaque and this improves the white edges but does not resolve them and does not remove the white halo in “base map” (implying something is still being read wrong) and creates other odd rendering behavior.

Any help or ideas? How am I supposed to be doing this here?

Thanks

[c0d3_m0nk3y]

When the texture is filtered and mip maps are calculated, transparent texels can get averaged with non-transparent texels. So if the texels around your leaves are white, you’ll get a white fringe at the border when lower mips are used or at certain viewing angles.

The solution is to fill the empty texels with green or even better, for each transparent texel set it to the color of the closest non-transparent texel in Photoshop.

(you can still have a r,g,b value for a texel even when a is zero)

#1 Creating diffuse and transparency maps for a tree in Maya | Maya Tree Tutorial

[Torbach78]

don’t use photoshop transparency for this texture - a transparent pixel is compressed white in Photoshop png’s (RGB ‘T’ 1,1,1,1)
If you uncheck ‘alpha is transparency’ and i think you will see the white in the Color channels
so during mipmap you get white edging

try flattening RGB with green as codemonkey said

make alpha a second texture (8bit black/white) like the alpha1 channel above
or SuperPNG to save that alpha in the PNG format (which photoshop doesn’t quite do)