[Unity 감마 교정] 단계 애니메이션의 색상 오류를 고려해 보세요.

개시하다

나는 옅은 애니메이션의 색깔이 사실과 다르다는 것을 고려해 보고 싶다.

검증 1: RGB 색상의 선형 변경

Image의 RGB를 검정색에서 하얗게 하고 직선적으로 변화하는 애니메이션을 고려해 보세요.

C#로 쓴 경우는 다음과 같습니다.

using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// RGBアニメーション
/// </summary>
public class RGBAnimation : MonoBehaviour
{
    [SerializeField] private RawImage _image;
    private float _delay = 0.5f;
    private float _duration = 1f;

    void Update()
    {
        float t = (Time.time - _delay) / _duration;
        float value = Mathf.Clamp01(t);
        _image.color = new Color(value, value,value, 1f);
    }
}

애니메이션 재생

Other Settings의 Color Space = Gamma 상태에서 애니메이션을 재생하십시오.

다음은 애니메이션입니다.

색깔 변화가 이상하다고요?

여기서 애니메이션을 잘 보세요.
너는 색깔 변화에 완급이 있는지 분간할 수 없니?
애니메이션을 천천히 재생하면 다음과 같은 내용이 된다.
https://youtu.be/Qpt7NupErtw
RGB를 올려도 임지는 처음에는 서서히 밝아지고 조금만 늦어도 기세 있게 하얗게 변한다.
실제로 액정 모니터 측면을 수정해야 하기 때문에 색깔이 어두워진다.
이런 현상은 Color Space = Liner에서도 발생할 수 있습니다.

감마 교정

색깔을 자연스럽게 변화시키기 위해 오른쪽에 감마 교정을 넣은 색깔을 배열했다.
감마 교정을 넣으면 색깔이 선형적으로 변할 것 같다.
https://youtu.be/RzNXD9uI15Q

C#의 감마 보정

C#에서 감마 보정 시 사용Mathf.LinearToGammaSpace.

// リニアに変化する値
float t = (Time.time - _delay) / _duration;
float value = Mathf.Clamp01(t); 

// ガンマ補正 (リニア -> ガンマ)
value = Mathf.LinearToGammaSpace(value);

_image.color = new Color(value, value, value, 1f);

그림자 속의 감마 교정

섀도우에서 감마 보정을 수행하려면 LinearToGammaSpace를 사용합니다.

half3 sRGB = LinearToGammaSpace(color);

UnityCG.cginc

inline half3 LinearToGammaSpace (half3 linRGB)
{
    linRGB = max(linRGB, half3(0.h, 0.h, 0.h));
    // An almost-perfect approximation from http://chilliant.blogspot.com.au/2012/08/srgb-approximations-for-hlsl.html?m=1
    return max(1.055h * pow(linRGB, 0.416666667h) - 0.055h, 0.h);

    // Exact version, useful for debugging.
    //return half3(LinearToGammaSpaceExact(linRGB.r), LinearToGammaSpaceExact(linRGB.g), LinearToGammaSpaceExact(linRGB.b));
}

감마 보정의 이유를 입력하십시오

RGB를 화면에 직접 표시하면 LCD 모니터에서 어두워 보입니다.

RGB를 밝게 수정한 후 화면에 표시함으로써 액정 모니터에 원래의 색을 볼 수 있다.
밝기 교정은 감마 교정이라고 부른다.

검증 2: 알파 단계 고려

다음에 α값의 이동 애니메이션을 사용하는 것을 고려하고 싶습니다.
문자를 0에서 1까지 선형으로 변경하는 애니메이션을 결합합니다.

using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// Alphaアニメーション
/// </summary>
public class AlphaAnimation : MonoBehaviour
{
    [SerializeField] private RawImage _image;
    [SerializeField] private float _delay = 0.5f;
    [SerializeField] private float _duration = 2f;

    void Update()
    {
        // リニアに変化する値
        float t = (Time.time - _delay) / _duration;
        float value = Mathf.Clamp01(t);

        // アルファとして設定
        _image.color = new Color(1f, 1f,1f, value);
    }
}

애니메이션 재생(Color Space=Gamma)

애니메이션을 틀면 이쪽에도 완급이 보인다.(Color Space = Gamma의 경우)
https://youtu.be/ShIbFv4i6Hk
그림의 색이 검은색이라도 자모의 완급을 볼 수 있다.
(알파가 0.7을 넘으면 배경이 거의 보이지 않는다)
https://youtu.be/FQwZ1mj-Ipk

Color Space = Linear

Color Space = Liner의 경우 완급이 해제됩니다.
https://youtu.be/N6V7MyOyaR4
이미지 색상이 검은색이면 선형 변화도 표시됩니다.
https://youtu.be/aA_azG1VR-Q

알파에 대한 감마 수정은 잘못된 것이다

RGB 색상이 페이드인 경우 RGB에 감마 보정을 적용하면 색상이 느리게 변하는 것을 없앨 수 있습니다.

// ガンマ補正
value = Mathf.LinearToGammaSpace(value);

_image.color = new Color(value, value, value, 1f);

"알파도 감마 수정을 한다면 알파 단계의 오류는 없어질까요?"이렇게 생각하다
알파에 감마 교정을 적용하면 오류가 발생할 수 있습니다.

// ガンマ補正(誤り)
alpha = Mathf.LinearToGammaSpace(alpha);
        
_image.color = new Color(1f, 1f,1f, alpha);

감마 교정은 모니터 측의 RGB 색깔의 오류(역감마 교정)를 없애는 수정 처리이다.
알파에 감마 교정을 적용하는 것은 잘못된 것이다.

알파에 감마 교정을 적용하면 어떨까요?

만약 알파에서 감마 교정을 응용했다면, 나는 색깔이 어떻게 변화하는지 보고 싶다.
Unity의 Color Space = Gamma.

배경(검정색) + 이미지(흰색)

배경이 검은색이고 이미지가 흰색일 때 아래와 같다.
언뜻 보기에는 정확하게 수정된 것 같다.
(왼쪽은 원시적인 알파 단계, 오른쪽은 감마 교정을 응용한 알파 단계)

배경(흰색) + 이미지(검정색) 시

그런 다음 배경이 흰색이고 이미지가 검은색인 상태에서 애니메이션을 재생합니다.
감마 수정으로 부자연스러운 완급이 됐어요.
https://youtu.be/APo5oWe-CEw

불투명 및 반투명 RGB

Color Space = Liner 환경을 고려합니다.

불투명색

Image에서 불투명 색상을 설정하면 Image에서 설정한 RGB와 동일한 색상이 화면에 표시됩니다.
예를 들어 RGBA = (127, 127, 127, 255)와 같은 불투명 색상이 설정된 경우
화면에도 같은 색상의 RGB=(127127127)가 표시됩니다.

반투명색

Image에 반투명 흰색을 설정한 경우 α에 대한 감마 수정 값이 표시됩니다.(배경이 검은색일 경우)
예를 들어, RGBA = (255255127) = flat4(1, 1, 1, 0.5)를 설정할 경우
화면에는 RGB=(18718718718787)=flat3(0.7310.73)이 나온다.
0.5^{1/2.2}\tallingdotseq0.73, 따라서 α를 감마 수정한 값은 RGB 값입니다.

Image의 Color에 설정(R, G, B, A)=(1, 1, 0.5)한 경우 화면이 표시될 것 같은 느낌float3(0.5, 0.5, 0.5)신기하게도 화면에 감마가 수정한 값float3(0.73, 0.73, 0.73)이 나타났다.

Image 색상 처리 정보

Image에 설정된 색상은 sRGB 색상으로 간주됩니다.

Color Space = Liner 환경
sRGB 색상은 섀도우에서 사용할 때 Linter로 변환됩니다.
그림자의 출력이 다시 sRGB로 변환되어 화면에 기록됩니다.

UGUI 색상 계산

UGUI의 색상 계산은 다음과 같습니다.(모니터의\gamma=2.2시)
FinalColor = (Alpha * Color ^ {2.2} + (1 - Alpha) * (BgColor ^ {2.2})) ^ {1/2.2}
Color:Image의 Color
알파:Image의 알파
BgColor:배경색

불투명 드로잉 시

UGUI가 불투명 드로잉인 경우(Alpha = 1) 표현식은 다음과 같습니다.
FinalColor = (Color^{2.2}) ^ {1/2.2} = Color
색상을 입력하면 화면의 색상이 됩니다.

반투명 드로잉

배경이 검은색이고 Image의 Color가 흰색인 경우 다음 공식이 나타납니다.
(Color=1, BgColor=0 대입)
\begin{aligned}
FinalColor
& = (Alpha + (1 - Alpha) * 0) ^ {1/2.2}
\\
& = Alpha^{1/2.2}
\end{aligned}
배경이 검은색이고 이미지가 흰색인 경우 알파가 수정된 값을 우연히 RGB로 표시합니다.

총결산

Image의 RGB 변경 사항

Image 색상의 RGB를 선형적으로 변화시키는 가운데 콜로 스페이스 = 라인리어, 감마 양측은 색상 변화에서도 완급을 볼 수 있다.
(Image 컬러가 화면에 표시되는 RGB 값과 같은 RGB 값을 설정하기 때문)

// リニアに変化する値
float t = (Time.time - _delay) / _duration;
float value = Mathf.Clamp01(t); 

// RGBとして設定
_image.color = new Color(value, value, value, 1f);

해결책

RGB에 감마 수정을 적용하면 모양이 선형 변화처럼 보입니다.

// リニアに変化する値
float t = (Time.time - _delay) / _duration;
float value = Mathf.Clamp01(t); 

// ガンマ補正 (リニア -> ガンマ)
value = Mathf.LinearToGammaSpace(value);

_image.color = new Color(value, value, value, 1f);

Image의 α를 변화시키는 상황

Image 색상의 α를 0에서 1로 변경하는 경우

Color Space = Gamma 환경에서는 색상 변화가 느려 보인다

Color Space = Lineer 환경에서 색상이 선형 변경

으로 표시됩니다.

// リニアに変化する値
float t = (Time.time - _delay) / _duration;
float value = Mathf.Clamp01(t); 

// アルファとして設定
_image.color = new Color(color.r, color.g, color.b, value);

알파에 감마 교정을 적용하면 색깔 변화가 이상해진다

// リニアに変化する値
float t = (Time.time - _delay) / _duration;
float value = Mathf.Clamp01(t); 

// ガンマ補正 (誤り)
value = Mathf.LinearToGammaSpace(value);

// アルファとして設定
_image.color = new Color(color.r, color.g, color.b, value);