Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question Color paletting shader

Discussion in 'Shaders' started by Danil0v3s, Mar 4, 2022.

  1. Danil0v3s

    Danil0v3s

    Joined:
    Sep 22, 2014
    Posts:
    43
    Hey!

    I've been wondering how I could create a paletting shader, there are plenty of them on the internet but I couldn't seem to find one that would account for black/unused pixels on the palette.

    This is how my palette looks like:
    upload_2022-3-3_20-30-52.png

    And this is how I'm creating the texture before assigning it:
    Code (CSharp):
    1.  var paletteTexture = new Texture2D(256, 1, TextureFormat.RGBA32, false);
    2. paletteTexture.filterMode = FilterMode.Point;
    3. paletteTexture.wrapMode = TextureWrapMode.Clamp;
    4. paletteTexture.LoadRawTextureData(currentPalette);
    5. paletteTexture.Apply();
    This is how the graph looks like and the result it yields is below
    upload_2022-3-3_20-34-2.png upload_2022-3-3_20-34-53.png

    I've found another community project using a shader to achieve the same but they're using OpenGL, so I copied the fragment piece and converted the function to HLSL by renaming the variables (vec4 -> float4, vec2 -> float2, texture2D -> tex2D, mix -> lerp, fract -> frac).

    And the inputs/output being what I've shown in the graph above
    Code (CSharp):
    1.  
    2. float2 TextInterval = 1.0 / uTextSize;
    3.  
    4. float tlPal = tex2D(mainTexture, uv).x;
    5. float trPal = tex2D(mainTexture, uv + float2(TextInterval.x, 0.0)).x;
    6. float blPal = tex2D(mainTexture, uv + float2(0.0, TextInterval.y)).x;
    7. float brPal = tex2D(mainTexture, uv + TextInterval).x;
    8.  
    9. float4 transparent = float4(0.5, 0.5, 0.5, 0.0);
    10.  
    11. float4 tl = tlPal == 0.0 ? transparent : float4(tex2D(palette, float2(tlPal, 1.0)).rgb, 1.0);
    12. float4 tr = trPal == 0.0 ? transparent : float4(tex2D(palette, float2(trPal, 1.0)).rgb, 1.0);
    13. float4 bl = blPal == 0.0 ? transparent : float4(tex2D(palette, float2(blPal, 1.0)).rgb, 1.0);
    14. float4 br = brPal == 0.0 ? transparent : float4(tex2D(palette, float2(brPal, 1.0)).rgb, 1.0);
    15.  
    16. float2 f = frac(uv.xy * uTextSize);
    17. float4 tA = lerp(tl, tr, f.x);
    18. float4 tB = lerp(bl, br, f.y);
    19.  
    20. RGBA = lerp(tA, tB, f.y);
    21.  
    Would you guys help me fix this problem?
     
    Last edited: Mar 4, 2022
  2. bgolus

    bgolus

    Joined:
    Dec 7, 2012
    Posts:
    12,329
    Both of these lerps are interpolating values between left to right, as they should be. Except ...
    f.y
    isn't the horizontal blend factor.
     
  3. Danil0v3s

    Danil0v3s

    Joined:
    Sep 22, 2014
    Posts:
    43
    Sorry for the late response, was waiting for the e-mail notification but I think I haven't clicked to get notified on email...

    Anyways, I changed the f.y to be f.x and the result looks less funky but isn't there yet.

    float2 f = frac(uv.xy * uTextSize);
    float4 tA = lerp(tl, tr, f.x);
    float4 tB = lerp(bl, br, f.x);

    RGBA = lerp(tA, tB, f.y);


    upload_2022-3-6_22-46-1.png

    It should look like this. This is the reference shader I'm using
    upload_2022-3-6_22-47-26.png
     
    Last edited: Mar 6, 2022