[TA STUDIO] #4. 텍스쳐 2개를 섞어 보자. lerp 함수

청강문화산업대학교의 게임 제작 동아리 L.A.B.S의

TA STUDIO에서 공부한 내용을 바탕으로 작성되었습니다.

 

---

 

 

오늘은 lerp 함수에 대해 알아보려고 합니다.

텍스쳐를 섞을 때 사용한다고 하는데...

 

일단 직접 사용해보고 나서, 자세하게 알아보도록 할까요?

 

 

#일단 해보자! 마법진 만들기.

여기까진 다들 할 줄 아시죠?

 

저는 텍스쳐를 뭘 섞을까 생각하다가, 대충 마법진 비스무리한걸 직접 그렸습니다.

따라 하실 분들은 그냥 사진을 잘라서 쓰셔도 되고, 뭐든 좋습니다.

 

#3강의 내용은 기억 나시나요? 텍스쳐를 하나 더 가져오려면 해야 했던 것.

Properties와 아래 코드부분에 추가해야 할 내용들!

기억이 안 나신다면 보고 오십시오.

 

Shader "Custom/NewSurfaceShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex("Albedo (RGB)", 2D) = "white" {}
        _SubTex("SubTex", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard alpha:fade
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _SubTex;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_SubTex;
        };
        fixed4 _Color;

        UNITY_INSTANCING_BUFFER_START(Props)
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            float4 subT = tex2D(_SubTex, IN.uv_SubTex);
            o.Emission = c.rgb;
            //o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

 

3강까지 배운 내용대로 코드를 입력하면 이렇게 됩니다.

 

유니티로 돌아오면 Inspector창에 SubTex를 넣을 수 있는 창이 생기니, 원하는 텍스쳐를 넣어줍시다.

저는 구글에서 저작권 무료인 우주배경 소스를 사용했습니다.

 

자. 여기서 텍스쳐를 섞으려면 어떻게 해야 할까요?

 

o.Emission에 +연산을 하면 될까요?

한번 해 봅시다.

 

o.Emission = c.rgb + subT.rgb;

 

이렇게 + 연산을 해주면...?

 

그저 하얗기만 하다.

예상하신 분도 있었겠지만. 그저 하얗네요.

 

RGB가 각각 100%인 값에 몇을 더하더라도 100% 이상이 되겠죠. HDR은 적용되겠지만, 우리가 원하는 섞임은 아닙니다.

저희는 불투명도를 조절한 것 같은... 그런 섞임을 원하는데요.

 

여기서 사용합니다. lerp 함수!

lerp(a, b, f)

벡터 a와 벡터 v의 선형보간. f에 실수를 넣어 a와 b의 비율에 맞는 보간값 반환.

[선형 보간법]
선형 보간법은 끝점의 값이 주어졌을 때 그 사이에 위치한 값을 추정하기 위하여
직선 거리에 따라 선형적으로 계산하는 방법이다.

 

그러게요....

단순하게 말하면, a와 b 사이의 중간값을 반환합니다.

그 중간의 비율은 f에 따라 정해지구요. 0에 가까울수록 a에 가깝게, 1에 가까울수록 b에 가깝게.

 

백문이 불여일견이죠. 직접 눈으로 봐봅시다.

 

우리가 f의 값을 조정할 수 있도록 Properties에 Range를 넣어줍시다.

Properties에 들어갈 수 있는 타입들은 3강에 더 자세히 설명되어 있습니다.

 

    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex("Albedo (RGB)", 2D) = "white" {}
        _SubTex("SubTex", 2D) = "white" {}
        _lerpF("lerpF", Range(0, 1)) = 0.5
    }

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_SubTex;
        };

        fixed4 _Color;
        float _lerpF;

Properties와 Shader 내부에 각각 _lerpF라는 변수를 선언해줬습니다.

 

이렇게 하고 유니티로 돌아가면

이렇게, lerpF라는 슬라이더 바가 하나 생기죠.

이제 이걸로 우리는 값을 조정할 수 있습니다.

 

그럼 이제 아래에서 lerp을 사용해 봐야 겠죠.

a와 b는 각각의 텍스쳐. f는 방금 만든 lerpF 슬라이더 값입니다.

 

이를 그대로 코드로 입력해주면.

 

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            float4 subT = tex2D(_SubTex, IN.uv_SubTex);
            o.Emission = lerp(c.rgb, subT.rgb, _lerpF);
            //o.Albedo = c.rgb;
            o.Alpha = c.a;
        }

이렇게 됩니다.

 

유니티로 돌아와 어떻게 되나 확인해볼까요?

TADA.

하얀색이 살짝 섞인 모습을 볼 수 있습니다.

lerpF 수치 조절에 따라 섞이는 정도가 달라지구요.

 

lerpF 수치에 따라 섞이는 정도가 달라진다.

 

이걸로 기본적인 lerp 함수는 끝났습니다.

이제 여기에 이전에 배운걸 응용하거나 하면...

 

 Bloom + _SinTime + 타일링 조절

Bloom + Time + 타일링 조절

 

이런 느낌도 낼 수 있다.