Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice
  3. Dismiss Notice

Strange outline when using 2D lighting normal maps

Discussion in '2D' started by Joshdbb, Aug 21, 2020.

  1. Joshdbb

    Joshdbb

    Joined:
    Oct 28, 2014
    Posts:
    54
    I am trying to get started with the 2D lighting system but I am finding that sprites (with normal maps) are being given a strange outline when lit.

    Here is an example:
    LightingIssue.PNG

    It is even worse when the light is on top of the sprite:
    LightingIssue3.PNG


    In this example the normal map has been made oversized to be sure that the fault doesn't lie there. I have tried a load of different sprites + normal maps and this is always a problem.


    Does anyone have any idea how to fix this ugly outline?

    I feel like I must be missing something fundamental as everything has this outline when using 2D lighting and it looks generally bad.
     

    Attached Files:

  2. Chris_Chu

    Chris_Chu

    Unity Technologies

    Joined:
    Apr 19, 2018
    Posts:
    257
    Hm. I've not noticed this happening before. I'll try and look at this when I get a chance.
     
  3. Lo-renzo

    Lo-renzo

    Joined:
    Apr 8, 2018
    Posts:
    1,529
    Are you sure your circles are the same size? At least by the upload, they look a little different. The normal is pixelated while the circle seems smoothed/feathered, and that difference may mean that your normal isn't actually covering the very edge of your albedo circle. So that means what you have is green adjacent to the default normal blueish-purple, which may account for that line appearing.
     
  4. Joshdbb

    Joshdbb

    Joined:
    Oct 28, 2014
    Posts:
    54
    That normal map isn't the best, just one I grabbed from an example. I made the circle sprite with the same image dimensions as the normal but a bit of extra padding (so the circle is a bit smaller than the circle in the normal), I did this to make sure that none of the pixelated edge was being used and to be doubly sure that the normal was big enough to cover the edge of the circle completely. I tried other things as well.

    After poking around in the code I found the file 'NormalsRenderingShared.hlsl' which contains the line:
    Code (CSharp):
    1. normalColor.a = color.a;  // used for blending
    If I replace that line with:
    Code (CSharp):
    1. normalColor.a = 1;
    Then the outline goes away but now there are issues when I have two sprites overlapping.

    So I guess the outline is caused by the semi-transparent pixels around the edge of the sprite, the normals get blended on these pixels.

    I'm not yet sure how to fix this.
     
  5. Joshdbb

    Joshdbb

    Joined:
    Oct 28, 2014
    Posts:
    54
    Here is another example:
    LightingIssueBlock.PNG

    Here the image and the normal map are exactly the same size and I still get the outline.

    The code change I mentioned above doesn't effect this case at all, I guess because the sprite has no transparent pixels? Not sure then what is causing this.

    As you can see there is also some strange artifacting on the top edge of the block, this changes as I move the light around and is only visible when the top edge is partially shaded. This only happens on the top edge, I have no idea what is causing this.

    Is there something wrong with how the normal has been constructed?

    I can upload a test project if needed.

    Any help would be much appreciated. I'm running out of time to get a proof of concept working using unity 2D lighting.
     

    Attached Files:

  6. Joshdbb

    Joshdbb

    Joined:
    Oct 28, 2014
    Posts:
    54
    I have found that the issues that I'm having get better the lower you set the light distance value.

    However there are different strange things happening when you have low distance:

    distance = 0
    LightingIssueBlock2.PNG

    distance = 0.13
    LightingIssueBlock3.PNG

    I am using the same files as in the previous post.
     
  7. Chris_Chu

    Chris_Chu

    Unity Technologies

    Joined:
    Apr 19, 2018
    Posts:
    257
    I looked at the circle, and there does appear to be something strange happening. I'll have to spend some more time on it. I'm not sure if it will be ready for your proof of concept.

    For the rectangle, try setting the wrap mode to clamp or adding a border of transparent pixels. I think this is a sampling artifact.
     
  8. Chris_Chu

    Chris_Chu

    Unity Technologies

    Joined:
    Apr 19, 2018
    Posts:
    257