HSV(= HSB) Color

색상을 설명하는 모델

HSV(색조, 채도, 명도) 또는 HSB(색조, 채도, 밝기)는 색상을 설명하는 컬러 모델 중 하나로 아티스트 혹은 일러스트레이터들에게 매우 친숙한 컬러 모델입니다.

색상(Hue), 채도(Saturation), 명도(Value) or 밝기 (Brightness)

RGB(Red, Green, Blue) 모델과 함께 가장 널리 사용되는 컬러 모델 중 하나입니다.

Hue 색상

360도 무지개 색상

색을 표현하는 요소 중 하나로 일반적으로 0에서 360도 사이의 각도를 나타냅니다

0도와 360도는 동일한 색상인 빨간색을, 120도는 녹색을, 240도는 파란색을 나타냅니다.

Saturation 채도

풍부함(richness)과 선명함(vividness)

색의 순도 또는 강도를 나타내는 색상 속성입니다.

높은 채도는 순수한 색에 가깝고, 낮은 채도는 회색조에 가까운 색을 의미합니다.

채도는 일반적으로 0부터 100 또는 0부터 1 사이의 값으로 표현됩니다.

0% 채도는 해당 색상이 회색조에 가깝다는 것을 의미하며, 100% 채도는 해당 색상이 순수한 색상임을 나타냅니다.

Value 명도 (= Brightness 밝기)

색의 밝기

명도는 색의 밝기를 나타냅니다.

명도는 일반적으로 0부터 100 사이의 숫자로 나타내며 높을수록 색은 더 밝게 나타납니다.

명도가 0에 가까울수록 해당 색상은 검은색에 가깝고, 명도가 최대가 되면 해당 색상은 가장 밝은 상태가 됩니다.

The post HSV(= HSB) Color 정리 appeared first on 어제와 내일의 나 그 사이의 이야기.

// Default
Debug.Log("Default");

Debug.Log("<color=white>White</color>");
Debug.Log("<color=grey>Grey</color>");
Debug.Log("<color=black>Black</color>");
Debug.Log("<color=red>Red</color>");
Debug.Log("<color=green>Green</color>");
Debug.Log("<color=blue>Blue</color>");
Debug.Log("<color=yellow>Yellow</color>");
Debug.Log("<color=cyan>Cyan</color>");
Debug.Log("<color=brown>Brown</color>");

// Hex Color
Debug.Log("<color=#fa56d6> Hex Color1 </color>");
Debug.Log("<color=#74fa56> Hex Color1 </color>");
Debug.LogFormat("<color=yellow> Yellow </color>" + "<color=black> Black </color>");

The post Unity – Debug.Log 색상 변경 appeared first on 어제와 내일의 나 그 사이의 이야기.

7 – 01 버텍스 컬러(Vertex Color)

Version : Unity 2021.3.5f1

버텍스 안에 내장되어 있는 값을 엔진으로부터 요청해야 사용할 수 있는 정보

위치(position), UV(Texcoord), 컬러(Color), 노멀(Normal), 탄젠트(Tangent) 등에서 컬러를 이용하여 사용하는 방법입니다.

아무런 작업도 진행하지 않은 버텍스 컬러는 무조건 흰색입니다.

float4(1,1,1,1)이 들어 있다고 할 수 있습니다.

https://docs.unity3d.com/kr/2021.3/Manual/SL-SurfaceShaders.html

버텍스 컬러를 적용하는 방법은 다양한 방법이 있는데

3ds Max와 같은 3D DCC(Digital Contents Creation) 툴을 이용하거나 엔진의 자체 기능을 이용해서 그리는 것입니다.

Unity 내부에서 사용하기 위해서 Packages Manager에서 Polybrush를 받아줍니다.

다음은 버텍스를 확인하기 위한 설정입니다.

이때 아무리 색을 칠해도 변화가 없습니다.

유니티는 자체적으로 Texture만 보여주도록 쉐이더가 적용되어 있기 때문에,

버텍스 컬러를 따로 보기 위한 쉐이더가 필요합니다.

다음은 버텍스 컬러를 눈으로 확인 하기 위하여 쉐이더 코드를 수정합니다.

Shader "Custom/VertextTest"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0
        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
            float4 color:COLOR; // float4 color 변수를 만들고 태그를 달아줌
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            o.Emission = IN.color.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

버텍스 컬러라는 것도 결국 버텍스의 값, 즉 엔진에서 가지고 있는 값을 요청해야 하므로 Input에서 float4를 통해서

Color(색)을 요청해야 합니다.

Input에 요청해서 가져 왔다면 IN. 을 통해서 Input 안의 color 값을 가져오고

Albedo 에 적용하게 되면 버텍스 컬러가 정상적으로 출력됩니다.

이제 이쁘게 색칠해 줍니다.

잘 보이네요

이제 적당한 텍스쳐를 넣고  버텍스 컬러를 더하거나 곱해줍니다.

이러한 기능을 이용하여 저렴한 비용으로 다양한 효과를 줄 수 있습니다.

7 – 02 버텍스 컬러(Vertex Color)의 마스킹 기능

버텍스 컬러는 일반적인 컬러와 동일하게 RGBA로 구성되어 있으며,

일반적인 텍스쳐가 가지고 있어야 하는 UV와 아무 상관이 없기 때문에 활용 범위가 매우 다양합니다.

아까 코드에서 4가지의 텍스쳐를 받을 수 있는 쉐이더로 변경합니다.

Shader "Custom/VertextTest"
{
    Properties
    {
        _MainTex1("Albedo1 (RGB)", 2D) = "white" {}
        _MainTex2("Albedo2 (RGB)", 2D) = "white" {}
        _MainTex3("Albedo3 (RGB)", 2D) = "white" {}
        _MainTex4("Albedo4 (RGB)", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0
        sampler2D _MainTex1;
        sampler2D _MainTex2;
        sampler2D _MainTex3;
        sampler2D _MainTex4;

        struct Input
        {
            float2 uv_MainTex1;
            float2 uv_MainTex2;
            float2 uv_MainTex3;
            float2 uv_MainTex4;
            float4 color:COLOR;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex1, IN.uv_MainTex1);
            fixed4 d = tex2D(_MainTex2, IN.uv_MainTex2);
            fixed4 e = tex2D(_MainTex3, IN.uv_MainTex3);
            fixed4 f = tex2D(_MainTex4, IN.uv_MainTex4);
            o.Emission = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

지금은 텍스쳐가 한장만 보이게 o.Emission 을 설정 했습니다. 

lerp 함수를 이용하여 마스킹 기능으로 활용해 봅시다.

lerp 함수로 버텍스 컬러의 R 값을 이용하여 마스킹 기능으로 이용했습니다.

Shader "Custom/Vertex"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _MainTex2 ("Albedo (RGB)", 2D) = "white" {}
        _MainTex3 ("Albedo (RGB)", 2D) = "white" {}
        _MainTex4 ("Albedo (RGB)", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        
        #pragma surface surf Standard noambient
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _MainTex2;
        sampler2D _MainTex3;
        sampler2D _MainTex4;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_MainTex2;
            float2 uv_MainTex3;
            float2 uv_MainTex4;
            float4 color:COLOR;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D(_MainTex2, IN.uv_MainTex2);
            fixed4 e = tex2D(_MainTex3, IN.uv_MainTex3);
            fixed4 f = tex2D(_MainTex4, IN.uv_MainTex4);
            // o.Emission = IN.color.rgb; 버텍스 컬러 확인용

            // lerp 함수를 이용함
            o.Albedo = lerp(c.rgb, d.rgb, IN.color.r);
            o.Albedo = lerp(o.Albedo, e.rgb, IN.color.g);
            o.Albedo = lerp(o.Albedo, f.rgb, IN.color.b);

            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

The post 7 – 01 ~ 02 버텍스 컬러(Vertex Color) / 마스킹 기능 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.