[Unity3D/Shader] 04. 텍스쳐 맛보기

앞에서 출력 구조체에 대해서 조금 알아보았습니다.

https://learn-and-give.tistory.com/74

[Unity3D/Shader] 03. SurfaceOutputStandard 맛보기

정말 조금이라고 봐야 되요. 다 리뷰하려면 양이 아주 많거든요.^^

 

이번에는 지난 번 말미에서 이야기 한 것 처럼 텍스쳐에 대해서 조금 더 알아보겠습니다.

GLSL 리뷰 할 때도 마지막에 멀티 텍스쳐링을 하였는데, 같은 이미지 소스를 이용하여 같은 표현을 해보도록 하겠습니다.

 

 

상자 위에 그려질 글자 텍스쳐를 가져옵니다. 요즘은 알파 채널이 있는 이미지 포멧의 목적 뿐만 아니라 png가 널리 쓰이고 있지만, 이전에는 알파 채널을 지원하는 포멧을 쓰려면 TGA를 써야했고, BMP/JPEG를 쓰려면 꽤 골치 아프게 로더를 만들어줘야 했습니다. 이제야 뭐 워낙 툴들이 좋아서 아무거나 그냥 갖다붙이면 척척 다 쓸 수 있으니 참 편리하네요.

 

이번에는 멀티 텍스쳐링을 해서 상자 위에 글자만 그릴 것이니, 다른 Property들은 다 지우고 텍스쳐 두 개만 사용하겠습니다.

    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _MainTex2 ("Albedo (RGB)", 2D) = "white" {}
    }

두 텍스쳐의 UV 좌표를 받아 올 입력 변수도 입력 구조체에 선언 해줍니다.

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_MainTex2;
        };

 

그리고, 두 번째 텍스쳐 입력에 새로 추가한 글자 이미지를 추가합니다. 앞에서 이미 살펴본 것 처럼, 이 쉐이더가 다른 텍스쳐 이미지를 사용 할 수 있기도 하고, 그 쉐이더는 처리 로직을 표현하는 것이지 특정 파일에 종속 되지 않는 것이므로, 텍스쳐 이미지는 이 쉐이더가 적용 된 재질의 Inspector에서 설정하는 것이라는 것을 유념해야 되겠습니다.

두번째 이미지가 글자가 아닌 부분은 투명하기 때문에, 두번째 이미지의 알파값을 이용하여 첫번째 이미지와 두번째 이미지 사이를 보간하면, 투명한 부분은 첫번째 이미지, 불투명한 부분은 두번째 이미지로 처리가 됩니다.

코드로 구현하면, 선형보간 함수인 lerp를 활용하여 아래와 같이 구현하면 됩니다.

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D (_MainTex2, IN.uv_MainTex2);
            o.Albedo = lerp(c.rgb, d.rgb, d.a);
            o.Alpha = c.a;
        }

 

결과는~

 

 

만약, 알채 채널이 있는 이미지가 제대로 보여지지 않으면 이미지의 알파 채널 설정을 변경 해 보거나,

설정을 변경하면서 쉐이더에서 알파 채널값을 알베도에 할당하면 알파 채널의 내용을 확인 해 볼 수 있습니다.

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D (_MainTex2, IN.uv_MainTex2);
            o.Albedo = d.a;
        }

 

이제 텍스쳐로부터 이미지 색상을 얻어 올 수도 있고, 이것을 섞어서 표현 할 수도 있게 되었으니, 기본적인 맛보기는 된 것 같습니다. 여기에 조금 양념을 쳐보자면, UV 좌표 또한 조작이 가능합니다. tex2D 함수의 두 번째 인자가 UV 좌표인데 여기에 값을 더하거나 빼면 다른 위치의 색상을 가져오게 됩니다.

 

반응형

 

 이제, 여기에 _Time이라는 예약 된 키워드로 시간을 얻어서 더해주면 움직이는 에니메이션을 얻을 수 있습니다.

 _Time의 업데이트는 Play를 할 때는 연속으로 갱신되지만 Stop인 상태에서는 계속 갱신이 되지 않기 때문에 _Time을 더해서 구현되는 부드러운 애니메이션을 보려면 Play를 해야 합니다.

 

 먼저 코드는 아래와 같이 작성합니다. 별로 어려운 것 없죠?

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D (_MainTex2, IN.uv_MainTex2 + _Time.y);
            o.Albedo = lerp(c.rgb, d.rgb, d.a);
            o.Alpha = c.a;
        }

 

결과는~ (Screen2gif 아주 편리하군요~)

 

다음에는 텍스쳐를 이용한 좀 더 다양한 표현을 좀 살펴보도록 하겠습니다.

https://learn-and-give.tistory.com/76

[Unity3D/Shader] 05. 텍스쳐를 이용하여 불꽃 효과 내기