Color paletting shader

Unity Engine
,
1

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:
7940650--1015432--upload_2022-3-3_20-30-52.png

And this is how I’m creating the texture before assigning it:

 var paletteTexture = new Texture2D(256, 1, TextureFormat.RGBA32, false);
paletteTexture.filterMode = FilterMode.Point;
paletteTexture.wrapMode = TextureWrapMode.Clamp;
paletteTexture.LoadRawTextureData(currentPalette);
paletteTexture.Apply();

This is how the graph looks like and the result it yields is below

7940650--1015435--upload_2022-3-3_20-34-2.png
7940650--1015435--upload_2022-3-3_20-34-2.png503×608 40.7 KB
7940650--1015438--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

float2 TextInterval = 1.0 / uTextSize;

float tlPal = tex2D(mainTexture, uv).x;
float trPal = tex2D(mainTexture, uv + float2(TextInterval.x, 0.0)).x;
float blPal = tex2D(mainTexture, uv + float2(0.0, TextInterval.y)).x;
float brPal = tex2D(mainTexture, uv + TextInterval).x;

float4 transparent = float4(0.5, 0.5, 0.5, 0.0);

float4 tl = tlPal == 0.0 ? transparent : float4(tex2D(palette, float2(tlPal, 1.0)).rgb, 1.0);
float4 tr = trPal == 0.0 ? transparent : float4(tex2D(palette, float2(trPal, 1.0)).rgb, 1.0);
float4 bl = blPal == 0.0 ? transparent : float4(tex2D(palette, float2(blPal, 1.0)).rgb, 1.0);
float4 br = brPal == 0.0 ? transparent : float4(tex2D(palette, float2(brPal, 1.0)).rgb, 1.0);

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

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

Would you guys help me fix this problem?

2

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

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.

float4 tA = lerp(tl, tr, f.x);
float4 tB = lerp(bl, br, f.x);

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

![7945342--1016752--upload_2022-3-6_22-46-1.png|548x339](upload://uGz4cjOvv2JLeRIHT68GGEG0eyx.png)

It should look like this. This is the [reference shader](https://github.com/vthibault/roBrowser/blob/master/src/Renderer/SpriteRenderer.js#L103) I'm using
![7945342--1016755--upload_2022-3-6_22-47-26.png|68x59](upload://eNX0DXO4tQ0t6zqIwxd6nUD45kX.png)