Unable to remove white outline for billboards

Questions & Answers
1

For over a week now I have been fighting with unity’s billboards having a white outline around the outside once it gets dark in my game. The issue is essentially I have a tree (from unity terrain system that was painted on) having white outlines around itself at night.

I did my research and originally thought it was just the textures on my end, but after learning about alpha channels and verifying - I am confident my textures are correct.

When I looked around, I only found one other post with someone claiming to resolve the issue and even then it contained some people saying it didnt work. This seems like such a minor and trivial thing to over look - so there has to be a solution!

Has anyone ever dealt or solved white outlines around a billboard? Is it shader related? Is it import settings related? I am pretty desperate at this point to try anything - as I have played around quite a bit now and still have not gotten anywhere.

Thanks.

2

Without pictures, it’s hard to know what you’re talking about. Does this happen to all of your vegetation? Just leaves on trees? Just your textures, or stock Unity textures too? Screenshots are almost mandatory for visual issues.

If you mean the quad itself has an unwanted outline, that’s one thing. If the outline is around the “cutout” portion of the image, that’s another.

In the case of quad outlines, try setting the relevant textures’ import settings to “Clamp” mode instead of “Repeat”. Ensure your textures’ alpha channels are clean and free from any artifacts. If the problem persists it may be a compression or atlasing issue, and you might attempt to increase the project’s quality settings, or the maximum allowed quality for that texture in its import settings. (Basically just tinker with all that jazz and see what happens, heh.) If all this fails, try bumping the contents of your vegetation textures “up” a pixel, leaving a black strip at the bottom of the alpha channel.

If your unwanted outline is around the cutout of the veggie, play with the cutout parameter on the material. Ensure you have the cleanest alpha channels you can possibly make. Be aware that with cutout shaders like the veggie shader(s), you won’t achieve a perfect cutout, and you may need to make a concession by reducing the size of the white areas on the alpha channel by a pixel or so, e.g. select layer contents, reduce selection by 1 pixel, invert selection, delete key.

3

I may meet the same problem as you, even though you don’t give picture.

I think it seems like problem with art asset itself.

The problem is subtle. Assuming you have image A and B. Then you drag them into Sprite Renderer.

When use unity-built-in shader, A and B would be fine.

When use our custom shader, A would be fine but B would be wrong, such as with unexpected white outline.

It is my test billboard shader, it is from Cg Programming/Unity/Billboards - Wikibooks, open books for an open world

If you use it and encounter the same problem, that is it.

Shader "2D/Billboard" {
    Properties{
        [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
        _ScaleX("Scale X", Float) = 1.0
        _ScaleY("Scale Y", Float) = 1.0
    }
    SubShader{
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }
        
        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Pass {
            CGPROGRAM

            #pragma vertex vert  
            #pragma fragment frag

            // User-specified uniforms            
            uniform sampler2D _MainTex;
            uniform float _ScaleX;
            uniform float _ScaleY;
            uniform float _VerticalBillboarding;

            struct a2v
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;  
            };

            struct v2f
            {
                float4 pos : POSITION;
                float2 uv : TEXCOORD0;
            };


            v2f vert(a2v v)
            {
                v2f o;

                o.pos = mul(UNITY_MATRIX_P,
                    mul(UNITY_MATRIX_MV, float4(0.0, 0.0, 0.0, 1.0))
                    + float4(v.vertex.x, v.vertex.y, 0.0, 0.0)
                    * float4(_ScaleX, _ScaleY, 1.0, 1.0));

                o.uv = v.uv;

                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }

            ENDCG
        }
    }
}

I don’t know much about shader, so I just modify unity-built-in shader and solve it.

unity-built-in shader:

my modified shader:

The core part is in BillboardSprites.cginc

inline float4 Billboard(float4 vertex)
{
    return mul(UNITY_MATRIX_P,
        mul(UNITY_MATRIX_MV, float4(0.0, 0.0, 0.0, 1.0))
        + float4(vertex.x, vertex.y, 0.0, 0.0)
        * float4(_ScaleX, _ScaleY, 1.0, 1.0));
}

v2f SpriteVert(appdata_t IN)
{
    v2f OUT;

    UNITY_SETUP_INSTANCE_ID(IN);
    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

    OUT.vertex = UnityFlipSprite(IN.vertex, _Flip);
    OUT.vertex = Billboard(OUT.vertex);
    OUT.texcoord = IN.texcoord;
    OUT.color = IN.color * _Color * _RendererColor;

#ifdef PIXELSNAP_ON
    OUT.vertex = UnityPixelSnap(OUT.vertex);
#endif

    return OUT;
}