[유니티 쉐이더 스타트업] 색상의 사칙연산을 해보기

 data-ad-unit    = "DAN-tocxr50w70wz" 
 data-ad-width   = "728" 
 data-ad-height  = "90"> data-ad-unit    = "DAN-tocxr50w70wz" 
 data-ad-width   = "728" 
 data-ad-height  = "90">

 

저번 시간에는 쉐이더에서 오브젝트의 색상을 어떻게 변경시키는지에 대해서 알아보았는데요. 오늘은 쉐이더에서 어떻게 색상을 연산하는지에 알아보려고 합니다. 아직 쉐이더에서 어떻게 색상을 변경하는지 잘 모르신다면 아래 링크로 이동하셔서 쉐이더에서 색상을 변경하는 법을 확인하고 오시면 좋을 것 같네요.

 

https://zerodeg.tistory.com/32

[Unity Shader] 색상을 출력해보기

그럼 오늘은 군말 없이 바로 시작하도록 하겠습니다.

 

1. 덧셈

 저번 시간에는 쉐이더에서 오브젝트의 색상을 빨간색으로 변경했었는데요. 이번에는 빨간색에 초록색을 더해보겠습니다. float3(R, G, B) 형태로 저장했었으니 덧셈을 하면 float3(R, G, B) + float3(R, G, B) 형태가 되겠죠. 아래 코드와 결과물을 확인해보겠습니다. 

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Emission = float3(1, 0, 0) + float3(0, 1, 0);

             //Metallic and smoothness come from slider variables
            //o.Metallic = _Metallic;
            //o.Smoothness = _Glossiness;
            //o.Alpha = c.a;
        }

빨강에 초록을 더하니 노랑이 나왔다.

1, 0, 0 과 0, 1, 0 을 더했으므로 1, 1, 0 이 되어 노란색이 표현되었습니다. 뺄셈도 동일하게 적용됩니다.

 

2. 곱셈

 이번에는 쉐이더에서 색상을 곱해보겠습니다. 회색과 회색을 곱했을 때 어떤 색이 나오는지 살펴보도록 하겠습니다. 0.5, 0.5, 0.5 에 0.5 0.5 0.5 를 곱하는 코드와 결과를 확인해보겠습니다.

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Emission = float3(0.5f, 0.5f, 0.5f) * float3(0.5f, 0.5f, 0.5f);

             //Metallic and smoothness come from slider variables
            //o.Metallic = _Metallic;
            //o.Smoothness = _Glossiness;
            //o.Alpha = c.a;
        }

 0.25, 0.25, 0.25가 되어 어두운 회색이 되었다.

0.5에 0.5 를 곱하여 RGB 값이 모두 0.25가 되어서 원래 색상보다 어두운 색상이 표현되었습니다. 참고로 곱셈을 하기전 색은 아래와 같습니다.

0.5 0.5 0.5 회색의 색상

보시다시피 곱셈 연산으로 인해서 어두운 회색이 된 것을 확인할 수 있습니다. 나눗셈도 뺄셈과 같이 동일하게 적용된답니다.

 

3. 만약 RGB 값 중 하나가 1을 넘어간다면 어떻게 될까?

저번 시간에 색상을 출력해보면서 RGB의 값은 0~1까지의 범위라고 말씀드렸었는데요. 만약 RGB 값중 하나 혹은 여러개가 범위를 벗어난다면 어떻게 될까요? 아래 1, 0, 0으로 설정한 오브젝트와 2, 0, 0으로 설정한 오브젝트의 이미지를 보고 이야기해보겠습니다.

1, 0, 0 으로 설정한 오브젝트의 색상

2, 0, 0으로 설정한 오브젝트의 색상

어떤가요?? 동일한 것 같지 않나요? 맞습니다. 범위를 벗어나서 0보다 작아지거나 혹은 1보다 커지더라도 모니터에서는 1, 0, 0 이나 2, 0, 0 이나 동일하게 보입니다. 그러나 내부적으로 데이터는 float3(2, 0, 0)으로 저장되어 있기 때문에 단지 모니터가 표현을 하지 못할 뿐 차이점은 있다고 할 수 있습니다. 0보다 어두운 색이 있고, 1보다 밝은 색이 존재하고 계산되는 상태를 HDR(High Dynamic Range) 라고 합니다. 책을 보다보면 이 내용이 나올 때가 있겠죠?

 

4. 연산은 같은 자릿수끼리만 가능하지만, 한 자리와는 항상 가능하다.

이게 무슨 말인지 헷갈리실 텐데요. 지금까지 저는 RGB를 계산하기 위해서 float3 이라는 자료형을 사용했습니다. 그러나 float에는 float, float2, float3, float4 등과 같이 자릿수에 따라 입력할 수 있는 폼이 여러가지가 있습니다. 즉, float3와 float4는 계산을 할 수 없지만, float3와 float, float4와 float는 연산이 가능하다는 이야기 입니다. 아래 코드를 보시면 쉽게 이해되실 겁니다.

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Emission = float3(0.5, 0, 0) + float2(0.5, 0);

             //Metallic and smoothness come from slider variables
            //o.Metallic = _Metallic;
            //o.Smoothness = _Glossiness;
            //o.Alpha = c.a;
        }

float2와 float3를 연산하려하자 float2를 float3로 변경할 수 없다는 메시지와 함께 오류가 발생한다.

 

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Emission = float3(0.5f, 0, 0) + 0.5f;

             //Metallic and smoothness come from slider variables
            //o.Metallic = _Metallic;
            //o.Smoothness = _Glossiness;
            //o.Alpha = c.a;
        }

0.5, 0, 0 에 0.5를 더하니 1, 0.5, 0.5가 되어서 색이 연산되는 것을 볼 수 있다.

 이렇게 오늘은 쉐이더에서 색상을 연산하는 법에 대해서 알아보았는데요. 도움이 되셨을까요? 이 글은 곧 영상으로 제작되어 유튜브에 올라갈 예정입니다. 영상이 업로드 되면 블로그에도 영상을 달아놓도록 하겠습니다^^

유튜브에도 구독과 좋아요 눌러주시면 저에게 큰 힘이 됩니다! 감사합니다^^