Unity 셰이더 코딩으로 고급 그래픽 효과 만들기 🎨✨

안녕하세요, 여러분! 오늘은 정말 흥미진진한 주제로 여러분과 함께 시간을 보내려고 해요. 바로 Unity 엔진에서 셰이더를 사용해 놀라운 그래픽 효과를 만드는 방법에 대해 알아볼 거예요. 🚀 여러분, 준비되셨나요? 그럼 이 신비로운 셰이더의 세계로 함께 떠나볼까요?

💡 알고 계셨나요? Unity는 게임 개발뿐만 아니라 다양한 시각적 효과를 만드는 데에도 사용됩니다. 재능넷(https://www.jaenung.net)과 같은 플랫폼에서는 Unity 개발자들의 재능이 활발하게 거래되고 있어요. 여러분도 이 글을 통해 배운 기술로 새로운 재능을 발견하실 수 있을 거예요!

셰이더란 무엇일까요? 🤔

셰이더(Shader)는 컴퓨터 그래픽스에서 3D 모델의 최종 색상을 계산하는 프로그램이에요. 쉽게 말해, 우리가 화면에서 보는 모든 픽셀의 색상과 효과를 결정하는 마법 같은 존재죠! 😮

Unity에서 셰이더는 주로 두 가지 종류로 나뉩니다:

버텍스 셰이더(Vertex Shader): 3D 모델의 각 꼭짓점(버텍스)의 위치를 계산해요.
프래그먼트 셰이더(Fragment Shader): 각 픽셀의 최종 색상을 결정해요.

이 두 가지를 조합하면, 우리는 거의 모든 종류의 시각적 효과를 만들어낼 수 있어요. 멋지지 않나요? 🌈

Unity에서 셰이더 시작하기 🎮

Unity에서 셰이더를 사용하기 위해서는 먼저 셰이더 랩(Shader Lab)이라는 Unity의 특별한 언어를 알아야 해요. 셰이더 랩은 HLSL(High-Level Shading Language)를 기반으로 하고 있어요.

간단한 셰이더를 만들어볼까요? 아래의 코드를 따라 해보세요:


Shader "Custom/SimpleColor" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 100

        CGPROGRAM
        #pragma surface surf Lambert

        fixed4 _Color;

        struct Input {
            float2 uv_MainTex;
        };

        void surf (Input IN, inout SurfaceOutput o) {
            o.Albedo = _Color.rgb;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

이 셰이더는 단순히 지정된 색상으로 오브젝트를 칠하는 기능을 합니다. 하지만 이것은 시작일 뿐이에요. 이제부터 우리는 이를 기반으로 더욱 복잡하고 아름다운 효과들을 만들어볼 거예요! 🎨

🔍 깊이 들어가기: 셰이더 코드의 각 부분이 무엇을 의미하는지 궁금하신가요? Properties는 Unity 인스펙터에서 조절할 수 있는 변수를 정의하고, SubShader는 실제 렌더링 로직을 포함합니다. CGPROGRAM과 ENDCG 사이에는 HLSL 코드가 들어가요.

텍스처와 UV 매핑 🖼️

이제 우리의 셰이더에 텍스처를 입혀볼까요? 텍스처는 3D 모델에 이미지를 입히는 방법이에요. 이를 위해 UV 매핑이라는 기술을 사용합니다.

UV 매핑이란 3D 모델의 표면을 2D 이미지에 매핑하는 과정을 말해요. 마치 종이 상자를 펼쳐서 평면으로 만드는 것과 비슷하죠!

이제 텍스처를 사용하는 셰이더를 만들어볼까요?


Shader "Custom/TexturedShader" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 100

        CGPROGRAM
        #pragma surface surf Lambert

        sampler2D _MainTex;

        struct Input {
            float2 uv_MainTex;
        };

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

이 셰이더는 텍스처를 3D 모델에 입히는 기본적인 방법을 보여줍니다. tex2D 함수를 사용해 텍스처의 색상을 샘플링하고, 이를 오브젝트의 색상으로 사용하고 있어요.

💡 팁: UV 좌표는 (0,0)에서 (1,1) 사이의 값을 가집니다. (0,0)은 텍스처의 왼쪽 아래 모서리, (1,1)은 오른쪽 위 모서리를 나타내요. 이 좌표를 조작하면 텍스처의 위치, 크기, 회전 등을 변경할 수 있답니다!

노멀 매핑으로 디테일 살리기 🗻

텍스처를 입혔다고 해서 끝난 게 아니에요. 우리는 더 나아가 노멀 매핑(Normal Mapping)이라는 기술을 사용해 오브젝트에 디테일을 추가할 수 있어요.

노멀 매핑은 실제로 모델의 형태를 변경하지 않고도 빛의 상호작용을 통해 표면에 굴곡이나 세부 질감을 표현하는 기술이에요. 마치 평평한 벽에 그림자를 그려 넣어 울퉁불퉁해 보이게 만드는 것과 비슷하죠!

노멀 매핑을 적용한 셰이더를 만들어볼까요?


Shader "Custom/NormalMappedShader" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _BumpMap ("Normal Map", 2D) = "bump" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert

        sampler2D _MainTex;
        sampler2D _BumpMap;

        struct Input {
            float2 uv_MainTex;
            float2 uv_BumpMap;
        };

        void surf (Input IN, inout SurfaceOutput o) {
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
            o.Albedo = c.rgb;
            o.Alpha = c.a;
            o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
        }
        ENDCG
    }
    FallBack "Diffuse"
}

이 셰이더에서는 _BumpMap이라는 새로운 텍스처를 추가했어요. 이 텍스처는 각 픽셀의 법선 벡터 정보를 담고 있어요. UnpackNormal 함수를 사용해 이 정보를 해석하고, 오브젝트의 표면 법선으로 사용합니다.

🎨 창의적인 아이디어: 노멀 맵을 동적으로 변경하면 물결이나 바람에 흔들리는 잎사귀 같은 효과를 만들 수 있어요. 재능넷에서 이런 고급 셰이더 효과를 만들 수 있는 개발자들의 재능이 높이 평가받고 있답니다!

빛과 그림자 다루기 💡

셰이더의 진정한 힘은 빛과 그림자를 다룰 때 나타나요. Unity의 라이팅 시스템과 셰이더를 결합하면, 우리는 놀라운 수준의 사실적인 렌더링을 할 수 있어요.

기본적인 라이팅 모델부터 시작해볼까요? Unity에서 가장 흔히 사용되는 라이팅 모델은 다음과 같아요:

Lambert: 가장 기본적인 확산 반사 모델
Blinn-Phong: 확산 반사와 정반사를 모두 고려한 모델
PBR (Physically Based Rendering): 물리 법칙을 기반으로 한 고급 렌더링 모델

Blinn-Phong 모델을 사용한 셰이더를 만들어볼까요?


Shader "Custom/BlinnPhongShader" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _SpecColor ("Specular Color", Color) = (1,1,1,1)
        _Shininess ("Shininess", Range(0.01, 1)) = 0.5
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf BlinnPhong

        sampler2D _MainTex;
        half _Shininess;

        struct Input {
            float2 uv_MainTex;
        };

        void surf (Input IN, inout SurfaceOutput o) {
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
            o.Albedo = c.rgb;
            o.Specular = _Shininess;
            o.Gloss = c.a;
        }
        ENDCG
    }
    FallBack "Specular"
}

이 셰이더에서는 BlinnPhong 라이팅 모델을 사용하고 있어요. _Shininess 속성을 통해 재질의 광택도를 조절할 수 있죠. 이렇게 하면 금속이나 플라스틱 같은 다양한 재질을 표현할 수 있어요.

Blinn-Phong 모델에서는 입사광과 반사광의 중간 벡터(하프 벡터)를 사용해 정반사를 계산해요. 이 방식은 계산이 빠르면서도 꽤 좋은 결과를 제공하죠.

🔬 깊이 있는 이해: PBR(Physically Based Rendering)은 더 사실적인 렌더링을 위해 물리 법칙을 적용한 방식이에요. 금속성(Metallic)과 거칠기(Roughness)를 주요 파라미터로 사용하며, 다양한 조명 환경에서 일관된 결과를 제공합니다. Unity의 Standard Shader가 바로 이 PBR 방식을 사용하고 있어요!

특수 효과: 물, 불, 홀로그램 🌊🔥👻

이제 우리는 기본적인 셰이더 작성법을 알게 되었어요. 하지만 셰이더의 진정한 매력은 특수 효과를 만들 때 나타나죠. 물, 불, 홀로그램 같은 효과들은 게임이나 시각화 프로젝트에서 정말 중요한 역할을 해요.

간단한 물 효과 셰이더를 만들어볼까요?


Shader "Custom/WaterEffect" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _WaveAmount ("Wave Amount", Range(0, 1)) = 0.1
        _WaveSpeed ("Wave Speed", Range(0, 10)) = 1
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 100

        CGPROGRAM
        #pragma surface surf Lambert vertex:vert

        sampler2D _MainTex;
        float _WaveAmount;
        float _WaveSpeed;

        struct Input {
            float2 uv_MainTex;
        };

        void vert (inout appdata_full v) {
            float phase = _Time.y * _WaveSpeed;
            float offset = (v.vertex.x + v.vertex.z) * 0.5;
            v.vertex.y += sin(phase + offset) * _WaveAmount;
        }

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

이 셰이더는 버텍스 셰이더를 사용해 메시의 y좌표를 주기적으로 변경함으로써 물결 효과를 만들어내고 있어요. _WaveAmount와 _WaveSpeed 속성을 통해 물결의 크기와 속도를 조절할 수 있죠.

이런 식으로 셰이더를 사용하면, 단순한 평면 메시로도 생동감 있는 물 표면을 표현할 수 있어요. 놀랍지 않나요? 😮

🚀 도전 과제: 이 물 셰이더를 더 발전시켜 볼까요? 노멀 맵을 추가해 물결의 세부 질감을 표현하거나, 프레넬 효과를 적용해 시야각에 따른 반사율 변화를 구현해보세요. 이런 고급 기술들은 재능넷 같은 플랫폼에서 매우 가치 있는 스킬이 될 수 있어요!

포스트 프로세싱 효과 🎭

지금까지 우리는 개별 오브젝트에 적용되는 셰이더에 대해 알아봤어요. 하지만 셰이더의 힘은 여기서 그치지 않아요. 포스트 프로세싱(Post-processing) 효과를 통해 전체 화면에 다양한 효과를 적용할 수 있답니다.

포스트 프로세싱이란 3D 장면이 렌더링된 후, 최종 이미지에 적용되는 효과를 말해요. 블룸(Bloom), 모션 블러(Motion Blur), 피사계 심도(Depth of Field) 등이 대표적인 포스트 프로세싱 효과예요.

간단한 블룸 효과 셰이더를 만들어볼까요?


Shader "Custom/SimpleBloom" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _BloomIntensity ("Bloom Intensity", Range(0, 1)) = 0.5
    }
    SubShader {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            
            sampler2D _MainTex;
            float _BloomIntensity;

            fixed4 frag (v2f i) : SV_Target {
                fixed4 col = tex2D(_MainTex, i.uv);
                
                // Simple bloom effect
                float brightness = dot(col.rgb, float3(0.2126, 0.7152, 0.0722));
                if(brightness > 0.8) {
                    col.rgb += col.rgb * _BloomIntensity;  }
                return col;
            }
            ENDCG
        }
    }
}

이 셰이더는 간단한 블룸 효과를 구현하고 있어요. 밝은 부분을 감지하고, 그 부분을 더 밝게 만들어 빛이 번지는 듯한 효과를 만들어내죠. _BloomIntensity 속성으로 효과의 강도를 조절할 수 있어요.

블룸 효과는 빛나는 물체나 밝은 부분을 강조하는 데 매우 효과적이에요. 특히 네온사인이 많은 도시 풍경이나 판타지 세계의 마법 효과 등을 표현할 때 자주 사용되죠.

🎮 게임 개발 팁: 포스트 프로세싱 효과는 게임의 분위기를 크게 바꿀 수 있어요. 예를 들어, 호러 게임에서는 비네팅(Vignetting)과 색수차(Chromatic Aberration) 효과로 불안감을 조성할 수 있고, 판타지 게임에서는 블룸과 컬러 그레이딩으로 몽환적인 분위기를 만들 수 있죠. 재능넷에서도 이런 효과를 능숙하게 다루는 개발자들의 수요가 높답니다!

최적화와 성능 고려사항 🚀

멋진 셰이더를 만드는 것도 중요하지만, 성능 최적화도 매우 중요해요. 특히 모바일 게임이나 VR 애플리케이션에서는 더욱 그렇죠. 몇 가지 최적화 팁을 알아볼까요?

복잡도 줄이기: 가능한 한 간단한 수학 연산을 사용하세요. 예를 들어, pow() 함수 대신 제곱을 사용할 수 있어요.
텍스처 샘플링 최소화: 텍스처 샘플링은 비용이 높은 연산이에요. 꼭 필요한 경우에만 사용하세요.
LOD (Level of Detail) 사용: 멀리 있는 오브젝트에는 간단한 셰이더를, 가까이 있는 오브젝트에는 복잡한 셰이더를 사용하세요.
조건문 사용 줄이기: GPU는 조건문 처리에 비효율적이에요. 가능하면 수학적 표현으로 대체하세요.
프리컴퓨팅 활용: 자주 사용되는 복잡한 계산 결과를 텍스처에 미리 저장해두고 사용하세요.

셰이더 최적화 개념도