유니티 스파인 슬롯에 HSL 색상 변경(=포토샵 Colorize)

2.4 MB

HSV 변경 기능을 만들었더니

리얼화이트를 만들 수 없어서 다시 만들어야했다.

그래서 찾아보니 HSV 말고도 HSL 이란 것도 있었다.

문제는 스파인이 Color32로 SetColor 색상을 전달하다보니

RGBA 각각 0~255까지 값 밖에 못 전달하는 게 아닌가.

거기에 기본 색상은 255 255 255 255이라서 디폴트 색상은 Color.White 기준으로 나와야했다.

그래서 -1 ~ +1 float 기준으로 동작하는 수식에 맞게 동작하도록 input 값을 고쳐주었다.

수식 자체를 고칠 수도 있었겠지만, 난 수학 수업 다 C 받았자너?

0.5를 기준으로 밝아질까 어두워질까를 나누고
0, 1 양 끝일 때 원래 색상으로 돌아가게 되어 있는 상황이 되었으므로

UI 조작에서는 이걸 다시 한 번 Lerp 매핑해주어서

UI 상에서는 0.5를 기준으로 원래 색상이 나오도록 해주었다.

float Epsilon = 1e-10;

float3 rgb2hcv(in float3 RGB)
{
    // Based on work by Sam Hocevar and Emil Persson
    float4 P = lerp(float4(RGB.bg, -1.0, 0.66666), float4(RGB.gb, 0.0, -0.33333), step(RGB.b, RGB.g));
    float4 Q = lerp(float4(P.xyw, RGB.r), float4(RGB.r, P.yzx), step(P.x, RGB.r));
    float C = Q.x - min(Q.w, Q.y);
    float H = abs((Q.w - Q.y) / (6 * C + Epsilon) + Q.z);
    return float3(H, C, Q.x);
}

float3 rgb2hsl(in float3 RGB)
{
    float3 HCV = rgb2hcv(RGB);
    float L = HCV.z - HCV.y * 0.5;
    float S = HCV.y / (1 - abs(L * 2 - 1) + Epsilon);
    return float3(HCV.x, S, L);
}

float3 hsl2rgb(float3 c)
{
    c = float3(frac(c.x), clamp(c.yz, 0.0, 1.0));
    float3 rgb = clamp(abs(fmod(c.x * 6.0 + float3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
    return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0));
}

inline half4 adjustHueOfColor(half4 color, half4 _value)
{
    _value = half4(_value.x, 
        (step(0.5, _value.y) * (1 - (_value.y - 0.5) * 2)) - (step(0.5, (1 - _value.y)) * _value.y * 2),
        (step(0.5, _value.z) * (1 - (_value.z - 0.5) * 2)) - (step(0.5, (1 - _value.z)) * _value.z * 2),
        1);
    float3 hsl = rgb2hsl(color.rgb);
    //float affectMult = step(0, hsl.r) * step(hsl.r, 1);
    half3 rgb = hsl2rgb(hsl + _value.xyz);
    return half4(rgb, color.a); //color.a + _value.a

}

마찬가지로 이걸 스파인 URP 셰이더 폴더의

Shaders\Include\Spine-Sprite-ForwadPass-URP.hlsl 에 넣고

저번처럼 수정해서 만들어보았다.

부가적인 수익이 있다면

셰이더에서 step 함수를 if문 처럼 쓸 수 있겠다는 것을 익힌 정도?

https://5nani.com/xe/index.php?mid=Creative&document_srl=24144

유니티 Spine 셰이더 고쳐서 부위별 Hue-Shift 적용시키기

  원래는 스파인의 Slot별 SetColor()가 유니티 기본 사양 컬러 블렌딩인 Multiply로 동작한다. 하지만 Hue-Shift 스타일 색상 변...

조루나 | 2022.03.10