Search Unity

Question Shader Graph grow/outline with large value

Discussion in 'Shader Graph' started by Taigama, Mar 23, 2023.

  1. Taigama

    Taigama

    Joined:
    Oct 17, 2015
    Posts:
    27
    Hello.
    I have this texture:
    upload_2023-3-23_11-57-58.png

    Wish it can become one of following (just only left or just only right is fine):
    upload_2023-3-23_11-57-46.png upload_2023-3-23_11-59-12.png

    But when I tried offsetting UV (9 times texture 2d sampling) I got this:
    upload_2023-3-23_12-6-30.png upload_2023-3-23_12-5-49.png
    When the offset is > 1*dot_size it create gaps between the center and the "outline".

    Any way/keyword to gain the solid shapes when I increase the size? Thank you very much!
     
    Last edited: Mar 30, 2023
  2. Qriva

    Qriva

    Joined:
    Jun 30, 2019
    Posts:
    1,314
    You didn't show the method you used to get that effect, so it's hard to help you and I have to guess. If this is just sampling offseted texture 9 times (why 9?) then I doubt it can be done this way.
     
  3. Taigama

    Taigama

    Joined:
    Oct 17, 2015
    Posts:
    27
    Thank you for replying me.

    Yes, I just sampling offseted texture 9 times, 1 original center and 8 other directions (north east south west combination). This is a common way for making outline.


    I am so sorry I didn't included the image of my shader graph. It is just 9 times samplings, nothing special but cost so much space so I provided the video instead.

    But in my case, I need an "outline" which is even thicker than the object itself, so this aproach doesn't work. I created gaps between "outline" and the center object.
     
  4. bgolus

    bgolus

    Joined:
    Dec 7, 2012
    Posts:
    12,348
    You can sample 9 times to get a 1 pixel outline. You can't get a bigger outline than that by offsetting where your sampling from, because then you're skipping over parts of the image. The "9 samples" is because you're sampling in a 3x3 grid centered on the current pixel.

    If you want a 2 pixel outline, then you need to sample the texture 25 times, because you have to sample a 5x5 grid (or maybe 21 times if you skip the corners). Each pixel wider you want to go is going to massively increase the number of samples you need (3 pixel outline is 49, 4 pixels is 81, 5 is 121, etc). It very quickly becomes way, way to expensive to actually do in real time.

    For your example you can get away with doing the samples at wider than 1 pixel apart because your initial shapes are all square-ish. In which case you can offset your samples by the size of those dots because they won't be missed by the samples. Your sample pattern can't have spaces wider than the smallest detail you want to sample against.

    So you might be able to get away with doing a 5x5 grid instead of a 3x3 grid of samples.

    Alternatively you would want to run the 9 sample pass twice, with the second pass applied to the output of the first. That's a cheaper way of getting wider outlines without having to massively increase the number of samples you do.
     
    Taigama, Qriva and lilacsky824 like this.