두 개의 texture 섞기, texture coordinate, 텍스쳐 time 설정하기

해당 내용은 유니티 쉐이더 스타트업 책을 바탕으로 만들어졌습니다.

http://www.yes24.com/Product/Goods/58495827

유니티 쉐이더 스타트업 - YES24

 

유니티 texture 두 개를 섞어서 표현해주기

https://assetstore.unity.com/packages/2d/textures-materials/tiling-textures-3d-microgame-add-ons-174461

Tiling Textures - 3D Microgame Add-Ons | 2D 텍스처 및 소재 | Unity Asset Store

위 사이트에서 에셋을 받아서 사용하였다.

섞은 텍스쳐 결과물

해당 텍스쳐는 풀과 땅 두 개의 텍스쳐를 섞어서 만든 것이다. 적절하게 조합하였더니 가을 느낌의 색이 나왔다.

풀 텍스처

Shader "Custom/PlaneShader"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _MainTex2 ("Albedo (RGB)", 2D) = "white" {}
        _lerpRange("rangeOfLerp", Range(0,1)) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _MainTex2;
        float _lerpRange;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_MainTex2;

        };

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // two texture
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D (_MainTex2, IN.uv_MainTex2);
            // mix two texture with lerp function
            o.Albedo = lerp(c.rgb, d.rgb, _lerpRange);
    
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

texture coordinate

 

texture coordinate란 텍스쳐 좌표계를 말하는데 텍스쳐는 보통 2D 이미지를 이용하여 rasterization 과정을 거쳐 3차원의 좌표에 표시된다. 

 

texture coordinate 는 u,v 로 좌표를 나타낸다

해당 좌표의 시작점은 툴마다 다르다

 fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
 fixed4 d = tex2D (_MainTex2, IN.uv_MainTex2);

 

코드 상에서 이 코드들이 UV 좌표를 나타내는데 IN.uv_MainTex 이것이 float2 자료형의 UV를 나타내고

IN.uv_MainTex.x , IN.uv_MainTex.y 를 통해 u, v 좌표에 접근할 수 있다.

 

Emission을 통해 실제로 되는지 확인한다

Emission은 넣어준 좌표를 따라 값을 넣어서 점점 밝아지게 해주는 효과를 준다.

 

Emission = float3(IN.uv_MainTex.x, IN.uv_MainTex.y, 0) 을 넣어주어서 r값에 u ,g값에 v를 넣어주고 확인하면

이런 효과가 난다. 색을 interpolation한것처럼 표현이 된다.

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

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };


        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            o.Emission = float3(IN.uv_MainTex.x, IN.uv_MainTex.y, 0);
           // o.Albedo = c.rgb;    
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

 

UV에 time을 설정하기

물 텍스쳐와 숫자 텍스쳐가 섞이고 시간을 이용해서 흐르는 표현

uv에 값을 더해주면 전체 좌표가 움직인다. IN.uv_MainTex + 0.5 를 하게 되면 uv 좌표들 모두 0.5씩 이동하게 되는 것이다.

텍스처 두 개를 가져와서 해당 텍스쳐의 r 채널이나 g 채널 값을 더하게 되면 밑바탕이 되는 텍스처에 적용하려는 텍스처의 밝기에 따라 값들이 더해져서 해당 부분만 좌표가 이동하게되어 일그러지게 되는 것이다.

 

위의 영상처럼 흘러가는 듯한 표현을 하려면 _Time 변수를 이용해서 쓸 수 있다.

 

_Time.x -> 1/20 속도

_Time.y -> 원래 시간 속도

_Time.z -> 원래 시간의 2배

_Time.w -> 원래 시간의 3배

 

이 변수를 x나 y나 아니면 전체 uv에 더하게 되면 해당 방향으로 흐르는 표현을 해줄 수 있다.

Shader "Custom/Plane3Shader"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _FlowSpeed("Flow Speed", float) = 0.5
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;
        float _FlowSpeed;
        struct Input
        {
            float2 uv_MainTex;
        };



        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, float2(IN.uv_MainTex.x+_Time.y*_FlowSpeed, IN.uv_MainTex.y+_Time.y*_FlowSpeed));
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

 

다른 텍스처로도 표현해봄

해당 불꽃 표현은 연기 텍스쳐와 불 텍스쳐를 time값을 설정하여 더해주어서 실제 불 효과를 내면서 표현한 것이다.