12 – 03 홀로그램(Hologram) 만들기 (Unity Shader)

Rim 라이트를 구현할 수 있게 되었으니 알파를 사용하여 홀로그램을 만들 수 있습니다.

처음은 Lambert 기본형에서 시작합니다.

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

        CGPROGRAM
        #pragma surface surf Lambert noambient

        #pragma target 3.0
        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"
}

다음은 Fresnel 기본 연산을 구현합니다.

잠시 Albedo 는 끄고 Emission 으로 결과를 확인하겠습니다. 

이제 반투명으로 구현하겠습니다.

홀로그램의 핵심원리는 ” Rim 라이트 연산을 알파 채널에 넣는다 “ 입니다.

반투명 구현은 앞 부분의 불을 만들 때 사용한 방식입니다.

마지막으로 Emission에 원하는 색상을 넣어주면 됩니다.

다음은 두께를 조절하게 해줍니다.

입안이 이상하게 구현된 것은 캐릭터가 입안까지 모델링이 되었기 때문입니다.

반투명이 되면서 반대편의 오브젝트나 안쪽의 오브젝트가 비쳐 보이는 것은 나중에 Z버퍼를 이용한 2pass 쉐이더를 사용하여 해결합니다.

전체 코드

Shader "Custom/Holo"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _RimColor("RimColor", Color) = (1,1,1,1)
        _RimPower("RimPower", Range(1,10)) = 3
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert noambient alpha:fade

        #pragma target 3.0
        sampler2D _MainTex;
        float4 _RimColor;
        float _RimPower;

        struct Input
        {
            float2 uv_MainTex;
            float3 viewDir;
        };

        void surf (Input IN, inout SurfaceOutput o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            float rim = saturate(dot(o.Normal, IN.viewDir));
            rim = pow(1 - rim, _RimPower);
            o.Emission = _RimColor.rgb;
            o.Alpha = rim;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

기본형은 만들었지만 이것만으로는 부족합니다.

다양한 효과를 넣어 봅시다.

첫번째로 이 홀로그램을 깜빡이게 표현합니다.

Sin(_Time.y) 를 이용합니다.

깜빡임 속도 증가

그런데, 이러면 깜빡일 떄 안보이는 시간이 너무 길게 나타납니다.

이것은 sin 또는 cos 곡선에서 일어나는 당연한 결과 입니다.

이 곡선들이 -1 ~ 1을 반복하다 보니 그림처럼 0 이하로 내려가는 부분이 절반이기 때문입니다.

saturate 해주는 것은 0 이나 – 1 이나 우리눈에 안보이는 것은 같기 때문에 의미가 없습니다.

첫번째로  * 0.5 + 0.5 를 사용하는 방법이 있습니다.

하프 램버트에서 사용했던 공식을 이용하면 -1 ~ 1을 0 ~ 1로 변화시켜주므로 부드럽게 지속적으로 반짝이는 곡선을 구할 수 있게 됩니다.

sin(_Time.y) * 0.5 + 0.5;

또 다른 방법으로는 abs () 함수를 사용하여 모든 음수를 양수로 변화시킬 수 있습니다.

abs(sin(_Time.y));

Shader "Custom/Holo"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _RimColor("RimColor", Color) = (1,1,1,1)
        _RimPower("RimPower", Range(1,10)) = 3
        _HoloTwinkling("HoloTwinkling",Range(1,5)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert noambient alpha:fade

        #pragma target 3.0
        sampler2D _MainTex;
        float4 _RimColor;
        float _RimPower;
        float _HoloTwinkling;

        struct Input
        {
            float2 uv_MainTex;
            float3 viewDir;
        };

        void surf (Input IN, inout SurfaceOutput o)
        {

            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            float rim = saturate(dot(o.Normal, IN.viewDir));
            rim = pow(1 - rim, _RimPower);
            o.Emission = _RimColor.rgb;

            //o.Alpha = rim * sin(_Time.y * _HoloTwinkling);
            //o.Alpha = rim * sin(_Time.y * _HoloTwinkling) *0.5 + 0.5;
            o.Alpha = rim * abs(sin(_Time.y * _HoloTwinkling));
        }
        ENDCG
    }
    FallBack "Diffuse"
}

다음은 홀로그램의 줄무늬가 올라가는 효과를 만들겠습니다.

버텍스 컬러를 이용하여 아래에서 위로 밝아지게 칠할 수도 있고, 두번째 UV를 펴는 방법도 있습니다.

여기서는 Input 구조체에서 다른 값을 이용하겠습니다.

https://docs.unity3d.com/Manual/SL-SurfaceShaders.html <- 영문

https://docs.unity3d.com/kr/2021.3/Manual/SL-SurfaceShaders.html <-한글

표면 셰이더 입력 구조

입력 구조 Input에는 일반적으로 셰이더가 필요로 하는 텍스처 좌표가 있습니다. 텍스처 좌표의 이름은 텍스처 이름 앞에 “uv”가 붙는 형식으로 지어야 합니다(또는 두 번째 텍스처 좌표 세트를 사용하려면 “uv2”로 시작해야 합니다).

다음 값을 입력 구조에 추가할 수 있습니다.

float3 viewDir – 뷰 방향을 포함합니다. 패럴랙스 이펙트, 림 조명 등의 컴퓨팅에 사용합니다.

float4와 COLOR 시맨틱 – 보간된 버텍스당 컬러를 포함합니다.

float4 screenPos – 반사 또는 스크린 공간 효과를 위한 스크린 공간 포지션을 포함합니다. GrabPass에는 적합하지 않습니다. ComputeGrabScreenPos 함수를 사용하여 커스텀 UV를 직접 계산해야 합니다.

float3 worldPos – 월드 공간 포지션을 포함합니다.

float3 worldRefl – 표면 셰이더가 o.Normal에 기록하지 않는 경우 월드 반사 벡터를 포함합니다. 예를 들어 리플렉트-디퓨즈(Reflect-Diffuse) 셰이더가 있습니다.

float3 worldNormal – 표면 셰이더가 o.Normal에 기록하지 않는 경우 월드 노멀 벡터를 포함합니다.

float3 worldRefl; INTERNAL_DATA – 표면 셰이더가 o.Normal에 기록하는 경우 월드 반사 벡터를 포함합니다. 픽셀당 노멀 맵을 기반으로 반사 벡터를 얻으려면 WorldReflectionVector (IN, o.Normal)를 사용해야 합니다. 예를 들어 리플렉트-범프드(Reflect-Bumped) 셰이더가 있습니다.

float3 worldNormal; INTERNAL_DATA – 표면 셰이더가 o.Normal에 기록하는 경우 월드 노멀 벡터를 포함합니다. 픽셀당 노멀 맵에 기반한 노멀 벡터를 얻으려면 WorldNormalVector (IN, o.Normal)를 사용해야 합니다.

이번에는 float3 worldPos를 사용합니다.

해당 변수의 기능을 확인하기 위해서 코드를 변경합니다.

해당 x, y, z 가 각각 r, g, b 에 대입하여 나타납니다.

우리는 상/하의 값인 Y만 필요하기 때문에 g (y)만 출력합니다.

위의 코드로는  위로 올라가면 1이 넘는 값이 될 것이고 아래로 내려가면 -1의 아래 값으로 변하게 됩니다.

이러한 상황에서 유용한 내장 함수는 frac ( ) 입니다.

frac ( ) 은 안에 들어온 숫자의 “소수점 부분” 만 리턴해 줍니다.

즉, 1.1 은 0.1을 리턴하고 1.9는 0.9를 리턴합니다.

이제 흰 부분을 줄여 주겠습니다.

그라디에이션에서 검정 부분을 확장시키고 흰 부분을 줄이는 것은 이전에  fresnel 을 배울 때 pow ( ) 함수를 이용하여 해결했습니다.

추가로 시간에 따라 위로 흘러가게 해줍니다.

NormalMap 적용 후 변경이 가능하게 프로퍼티로 설정

Shader "Custom/Holo"
{
    Properties
    {
        _BumpMap("Normal Map", 2D) = "white" {}
        _RimColor ("RimColor", Color) = (1,1,1,1)
        _RimPower ("RimPower", Range(1,10)) = 3
        _HoloTwinkling ("HoloTwinkling",Range(1,5)) = 1
        _HoloSpeed ("HoloSpeed",Range(1,5)) = 1
        _HoloInterval ("HoloInterval",Range(1,5)) = 5
        
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert noambient alpha:fade

        #pragma target 3.0
        sampler2D _BumpMap;
        float4 _RimColor;
        float _RimPower;
        float _HoloTwinkling;
        float _HoloSpeed;
        float _HoloInterval;

        struct Input
        {
            float2 uv_BumpMap;
            float3 viewDir;
            float3 worldPos;
        };

        void surf (Input IN, inout SurfaceOutput o)
        {

            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            float rim = saturate(dot(o.Normal, IN.viewDir));
            rim = pow(1 - rim, _RimPower);
            o.Emission = pow (frac(IN.worldPos.g * _HoloInterval - _Time.y * _HoloSpeed), 5) + _RimColor.rgb;
            o.Alpha = rim * abs(sin(_Time.y * _HoloTwinkling));
        }
        ENDCG
    }
    FallBack "Transparent/Diffuse"
}

Transparent/Diffuse 는 그림자를 생성하지 않게 하도록 넣는 코드입니다.

원래 FallBack은 그래픽 카드에서 이 쉐이더 연산을 실패 했을 때의 대체 쉐이더를 적는 란이지만

이 책의 저자분은 그림자 연산할 때 이 FallBack에 씌여진 쉐이더가 영향을 끼치게 된다는 것을 발견했다고 합니다.

이 쉐이더는 마치 이펙트와 같은 쉐이더이기 때문에 그림자가 필요없으므로 해당 코드를 넣습니다.

홀로그램 2Pass

Shader "Custom/Holo"
{
    Properties
    {
        _BumpMap("Normal Map", 2D) = "white" {}
        _RimColor ("RimColor", Color) = (1,1,1,1)
        _RimPower ("RimPower", Range(1,10)) = 3
        _HoloTwinkling ("HoloTwinkling",Range(1,5)) = 1
        _HoloSpeed ("HoloSpeed",Range(1,5)) = 1
        _HoloInterval ("HoloInterval",Range(1,5)) = 5
        
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }

        ZWrite On
        ColorMask 0

        LOD 200

        CGPROGRAM
        #pragma surface surf _NoLight
        #pragma target 3.0

        struct Input
        {
            float4 color:COLOR;
        };

        void surf (Input IN, inout SurfaceOutput o)
        {
        }

        float4 Lighting_NoLight(SurfaceOutput s, float3 lightDir, float atten) {
            return 0;
        }
        ENDCG

        ZWrite Off

        CGPROGRAM
        #pragma surface surf Lambert noambient alpha:fade

        #pragma target 3.0
        sampler2D _BumpMap;
        float4 _RimColor;
        float _RimPower;
        float _HoloTwinkling;
        float _HoloSpeed;
        float _HoloInterval;

        struct Input
        {
            float2 uv_BumpMap;
            float3 viewDir;
            float3 worldPos;
        };

        void surf (Input IN, inout SurfaceOutput o)
        {
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            float rim = saturate(dot(o.Normal, IN.viewDir));
            rim = pow(1 - rim, _RimPower);
            o.Emission = pow (frac(IN.worldPos.g * _HoloInterval - _Time.y * _HoloSpeed), 30) + _RimColor.rgb;
            o.Alpha = rim * abs(sin(_Time.y * _HoloTwinkling));
        }
        ENDCG
    }
    FallBack "Transparent/Diffuse"
}

The post 12 – 03 홀로그램(Hologram) 만들기 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

12 – 01 ~ 02 Rim 라이트의 기초 (Unity Shader)

주변을 자세히 보면 모든 물체는 기울어 질수록 반사가 심해집니다.

실제로 모든 물체는 기울어 질수록 심하게 반사가 되며 그 반사율은 재질에 따라 다르게 나타납니다.

만약 역광이 있을 떄, 털이나 반투명의 재질을 가진 물체들은 이 현상이 매우 강렬하게 나타날 수 있고

재질에 따라 때로는 잘 보이지 않게 나타날 수도 있습니다.

사진 분야에서는 이것을 Rim Light ( 림 라이트 ) 라고 부릅니다.

우리가 사용하는 Standard Shader와 같은 물리 기반의 쉐이더는 이러한 재질의 특성에 따른 반사율이

BRDF(Bidirectional Reflectance Distribution Function – 양방향 반사 분포 함수) 를 이용하여 구현되어 있습니다.

이러한 반사 공식을 fresnel (프레넬) 이라 부릅니다.

이번에 설명할 fresnel 공식은 그보다는 간단하게, 빛의 방향과는 전혀 상관이 없게 만드는 효과입니다.

기본적으로 배경과 캐릭터의 분리나 강조를 위해, 혹은 선택되었을때나 특정 상태를 표현하기 위한 특수한 효과를 위해 사용합니다.

직접 확인해보기 위해서 아래 에셋을 사용했습니다. (무료)

https://assetstore.unity.com/packages/3d/characters/humanoids/barbarian-warrior-75519 <- TestAsset

fresnel 공식 구현

텍스쳐를 한장만 받는 기본형으로 쉐이더를 변경합니다.

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

        CGPROGRAM
        
        #pragma surface surf Lambert noambient
        #pragma target 3.0

        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"
}

o.Albedo 를 0 으로 만들어서 검게 만들고 시작하는 것이 좋습니다. 

이전에 배운 Lambert 공식은 노멀 벡터와 조명 벡터를 dot 연산한 공식입니다.

이 공식을 간단하게 정의하면 두 벡터, 즉 노멀벡터와 조명 벡터의 각도가 같으면 밝고, 90도가 되면 어두워져서 검정색이 된다는 것입니다.

그렇다면 여기에서 input 구조체에서 다른 값을 받아 봅시다.

https://docs.unity3d.com/Manual/SL-SurfaceShaders.html <- 영문

https://docs.unity3d.com/kr/2021.3/Manual/SL-SurfaceShaders.html <- 한글

표면 셰이더 입력 구조

입력 구조 Input에는 일반적으로 셰이더가 필요로 하는 텍스처 좌표가 있습니다. 텍스처 좌표의 이름은 텍스처 이름 앞에 “uv”가 붙는 형식으로 지어야 합니다(또는 두 번째 텍스처 좌표 세트를 사용하려면 “uv2”로 시작해야 합니다.)

다음 값을 입력 구조에 추가할 수 있습니다.

float3 viewDir – 뷰 방향을 포함합니다. 패럴랙스 이펙트, 림 조명 등의 컴퓨팅에 사용합니다.

float4와 COLOR 시맨틱 – 보간된 버텍스당 컬러를 포함합니다.

float4 screenPos – 반사 또는 스크린 공간 효과를 위한 스크린 공간 포지션을 포함합니다. GrabPass에는 적합하지 않습니다. ComputeGrabScreenPos 함수를 사용하여 커스텀 UV를 직접 계산해야 합니다.

float3 worldPos – 월드 공간 포지션을 포함합니다.

float3 worldRefl – 표면 셰이더가 o.Normal에 기록하지 않는 경우 월드 반사 벡터를 포함합니다. 예를 들어 리플렉트-디퓨즈(Reflect-Diffuse) 셰이더가 있습니다.

float3 worldNormal – 표면 셰이더가 o.Normal에 기록하지 않는 경우 월드 노멀 벡터를 포함합니다.

float3 worldRefl; INTERNAL_DATA – 표면 셰이더가 o.Normal에 기록하는 경우 월드 반사 벡터를 포함합니다. 픽셀당 노멀 맵을 기반으로 반사 벡터를 얻으려면 WorldReflectionVector (IN, o.Normal)를 사용해야 합니다. 예를 들어 리플렉트-범프드(Reflect-Bumped) 셰이더가 있습니다.

float3 worldNormal; INTERNAL_DATA – 표면 셰이더가 o.Normal에 기록하는 경우 월드 노멀 벡터를 포함합니다. 픽셀당 노멀 맵에 기반한 노멀 벡터를 얻으려면 WorldNormalVector (IN, o.Normal)를 사용해야 합니다.

우리가 사용할 값은 float3 viewDir 입니다.

float3 는 3차원 벡터 Input 구조체 안에 있는 것으로 봐서 엔진에서 받을 수 있는 데이터입니다.

float3 lightDir가 버텍스에서 바라보는 조명의 방향을 나타내는 길이가 1인 벡터라면

float3 viewDir 은 버텍스에서 바라보는 카메라의 방향을 나타냅니다.

그럼 Normal dot lightDir  대신  Normal dot viewDir 을 하면

카메라가 마치 조명처럼 인식되어 내가 바라보는 방향이 계속 밝아진다는 것입니다. 

반전

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

        CGPROGRAM
        
        #pragma surface surf Lambert noambient
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
            float3 viewDir;
        };

        void surf (Input IN, inout SurfaceOutput o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            float rim = dot(o.Normal, IN.viewDir);
            o.Emission = 1 - rim; // 결과 뒤집기
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

위에서 조심할 내용은 dot 연산은 -1 까지 내려가서 나중에 결과가 이상해 질 수 가 있습니다.   saturate() 를 잊지마세요

보는 각도를 바꿔도 언제나 외각이 밝아 보이면서 이제 Rim 라이트처럼 보이기 시작합니다.

그런데 Rim라이트가 너무 두꺼워서 Rim 라이트 느낌이 살아나지 않습니다.

흰테두리를 더 얇게 만들어줄 필요가 있습니다.

검정부터 흰색까지 변하는 음영을 표로 보면 아래와 같습니다.

가로축은 1 – dot(o.Normal, IN.viewDir) 이고 세로축은 색상 (흑백)을 의미합니다. 두 벡터의 각도 차이가 벌어질수록, 색상도 흰색이 됩니다. 

pow 를 이용하면 지수함수와 같은 그래프로 어두운 부분이 한참동안 존재하다가 갑자기 밝아지는 모양이 됩니다.

이 그래프를 이용하여 흰 테두리를 얇게 만듭니다.

이제 rim 라이트에 색상을 추가합니다.

두께 조절 프로퍼티도 만들어줍니다.

NormalMap 추가

Rim 연산에서 o.Normal을 사용하기 때문에 반드시 Rim라이트 연산 이전에 NormalMap 을 적용시켜줘야 합니다.

이제 dot 연산에서 -1로 넘어가는 부분을 막아주고 noambient 까지 지워서 완성합니다.

이것이 Rim 라이트라고 부르는 Fresnel 이 적용된 결과 입니다.

게임에서 캐릭터가 데미지를 입었을 때나 선택할 때, 혹은 단순히 배경과 분리된 느낌을 원할 때 자주 사용되는 방식이지만

실제 존재하는 Rim 라이트를 구현했다고 부르기에는 약간 부족합니다.

우리가 만든 Rim 라이트는 조명의 방향과 전혀 연관이 없습니다.

이상적인 Rim 라이트는 역광일 때 주로 나타나고 직광일 때는 보이지 않습니다. (나중에 커스텀 라이트를 만들 때 가능합니다.)

The post 12 – 01 ~ 02 Rim 라이트의 기초 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

11 – 03 ~ 04 Half-Lambert(하프 램버트) 연산 및 완성 (Unity Shader)

Lambert 라이트는 꽤 가벼운 조명 공식이지만, cos 그래프 연산의 특성상 밝다가 너무 갑자기 검게 음영이 떨어지는 단점이 있습니다. 

그래서 이 단점을 해결하고자 만든 것이 Half-Lambert (하프 램버트) 공식입니다.

물리적으로는 옳지 않지만, 매우 가벼우며 보기 좋은 장점이 있습니다.

저번에 글에서 사용한 코드에서 시작하겠습니다. 

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

        CGPROGRAM
        #pragma surface surf _MyLight noambient  
        #pragma target 3.0

        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);
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = saturate(dot(s.Normal, lightDir));
            return ndotl;
        }

        ENDCG
    }
    FallBack "Diffuse"
}

직접 확인해보기 위해서 아래 에셋을 사용했습니다. (무료)

https://assetstore.unity.com/packages/3d/characters/humanoids/barbarian-warrior-75519 <- TestAsset

위의 이미지는 saturate() 함수로 인하여 0 이하의 값은 전부 0 이 되었습니다.

saturate() 를 다시 제거해서 다시 -1 ~ 1까지의 범위를 출력하도록 만들어 줍니다.

변경 전

그리고 라이팅의 결과물에  Half- Lamber ( 하프 람버트 ) 공식인  * 0.5 + 0.5  를 적용해줍니다.

Half- Lamber ( 하프 람버트 공식) 적용 후

* 0.5 + 0.5  의 식은 -1 에서부터 1까지의 숫자를 0 에서 부터 1까지의 범위로 만들어 줍니다.

아래의 푸른 cos 이 붉은 라인으로 끌어 올라오게 됩니다.

이로 인하여 매우 부드러운 결과 값이 나오게 됩니다.

실제 사용할 때에는 빛의 영향을 좀 줄이고자 제곱을 해서 사용합니다.  

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

        CGPROGRAM
        #pragma surface surf _MyLight noambient  
        #pragma target 3.0

        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);
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = dot(s.Normal, lightDir) * 0.5 + 0.5;
            return pow(ndotl, 3); // pow는 제곱
        }

        ENDCG
    }
    FallBack "Diffuse"
}

pow   제곱 적용 후

Lambert 라이트 완성하기

위의 상황은 빛 방향에 따른 밝기만 구현되었을 뿐, 조명의 색상과 강고 / 빛 감쇄 Albedo 텍스쳐 는 전혀 적용되지 않았습니다.

아래에서 나머지 내용을 추가하겠습니다. 

pow와 dot 계산식을 하나로 병합합니다.

제 텍스쳐와 조명색상, 감쇠를 연산해서 조명을 완성해줍니다.

전체 코드

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

        CGPROGRAM
        #pragma surface surf _MyLight noambient  
        #pragma target 3.0

        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);
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = pow ( dot(s.Normal, lightDir) * 0.5 + 0.5 , 3 );
            float4 final;
            final.rgb = ndotl * s.Albedo * _LightColor0.rgb * atten;
            final.a = s.Alpha;
            return final; 
        }

        ENDCG
    }
    FallBack "Diffuse"
}

비어있던 MainTex도 넣어줍니다.

s.Albedo 

Albedo 로 입력받은 텍스쳐 입니다.

SurfaceOutput이 s 로 들어왔으니 s.Albedo 가 됩니다.

여기서 들어온 Albedo 텍스쳐가 Lambert 라이트와 연산이 되어서 Diffuse (확산) 됩니다. 

_LightColor0.rgb

이전에 연산했던 Ndotl 연산은 조명과 노멀의 각도를 표현한 것 뿐입니다.

조명의 색상이나 강도는 이 내장 변수를 이용해서 조명의 색상이나 강도를 가져옵니다.

이 변수를 곱한 후 조명의 생상과 강도를 변화시키면 그대로 반영됩니다. 

atten

빛의 감쇠 현상을 시뮬레이트합니다.

빛의 감쇠가 일어나는 경우는 아래와 같습니다. (atten를 계산하지 않으면 다음 일이 일어나지 않습니다.)

1. self shadow가 생기지 않습니다.

자신의 그림자를 자신이 받지 않습니다.

2. receive shadow가 동작하지 않습니다.

다른 물체가 그림자를 드리우지 못합니다.

3. 조명의 감쇠 현상이 일어나지 않습니다.

Directional 라이트에서는 확인이 불가능하고  point 라이트에서 확인이 가능합니다.

point 라이트가 멀어질수록 어두워지는데 이것이 atten가 하는 일입니다. 

atten 미적용

atten 적용

//  noambient  제거

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

        CGPROGRAM
        #pragma surface surf _MyLight //noambient  
        #pragma target 3.0

        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);
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = pow ( dot(s.Normal, lightDir) * 0.5 + 0.5 , 3 );
            float4 final;
            final.rgb = ndotl * s.Albedo * _LightColor0.rgb * atten;
            final.a = s.Alpha;
            return final; 
        }

        ENDCG
    }
    FallBack "Diffuse"
}

이렇게 적용하면 얼굴이 밝아지면서 atten으로 생기는 얼굴의 그림자가 두드러지게 보이는 단점이 생길 것 입니다.

정답은 없고 atten를 제거해도 좋고 pow 함수를 이용하여 적절하게 숨기는 것도 하나의 방법입니다.

이제 완전한 Lambert 가 완성되었습니다.

이것은 유니티4까지 사용되었던 Bump Diffuse와 완전히 같은 쉐이더이며

유니티5에서도 Legacy Shaders / Bumped Diffuse와도 완전히 같은 쉐이더입니다.

The post 11 – 03 ~ 04 Half-Lambert(하프 램버트) 연산 및 완성 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

11 – 01 ~ 02 커스텀 라이트 기본형 / Lambert 라이트 연산 (Unity Shader)

텍스처 한 장만 받는 기본형 쉐이더를 만듭니다.

직접 확인해보기 위해서 아래 에셋을 사용했습니다. (무료)

https://assetstore.unity.com/packages/3d/characters/humanoids/barbarian-warrior-75519 <- TestAsset

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

        CGPROGRAM
        #pragma surface surf Lambert noambient  
        // noambient - 주변광 또는 라이트 프로브를 적용하지 않습니다.
        #pragma target 3.0
        
        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"
}

Lambert 라이트를 삭제하고 자신만의 라이트 이름을 지어서 커스텀 라이트를 구동시켜 보겠습니다.

바뀌거나 추가된 내용을 하나씩 보겠습니다.

Lambert 대신에 _MyLight로 바뀌었습니다.

여기는 이름을 마음대로 지어도 상관없습니다.

우리가 만든 커스텀 함수의 모습입니다.

이전까지는 void surf 사용했습니다.

이 함수는 float4로 시작합니다. 함수가 float4 를 반환 하므로 return float4  출력값을 가지고 있습니다. 

이어서 나오는 이름도 Lighting + “커스텀 라이트 이름” 을 추가해 주어야 합니다.

SurfaceOutput 구조체를 통째로 받아옵니다.

float3 lightDir 은 이전 파트에서 배웠던 조명 방향의 벡터 입니다.

단, 조명 계산을 편하게 사용하기 위해서 뒤집혀지고 길이가 1인 단위 벡터의 상태입니다.

float atten

atten ( attenuation ) 감쇠

그림자를 받거나 거리가 멀어지면서 점점 조명이 흐려지는 라이트의 거리별 감쇠 현상을 나타냅니다.

내가 빛을 받는 것을 없앨 때 사용하는 부분입니다.

Lambert 라이트 연산

우리가 만든 커스텀 라이트에서 변경합니다.

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

        CGPROGRAM
        #pragma surface surf _MyLight noambient  
        // noambient - 주변광 또는 라이트 프로브를 적용하지 않습니다.
        #pragma target 3.0

        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;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = dot(s.Normal, lightDir);
            // dot 노멀 백터와 라이트 벡터를 내적 연산
            // surf 에서 Normal 값을 받지 않아도 버텍스에서 노말값을 평범하게 받음

            return ndotl;
        }

        ENDCG
    }
    FallBack "Diffuse"
}

lightDir은 버텍스에서 바라보는 조명의 방향인 뒤집힌 방향 이기 때문에 두 벤터를 단순하게 내적해주면 cos 값이 나오게 됩니다.

위와 같은 코드는 가장 밝은 곳이 1 / 어두워 지는 경계선은 0 / 가장 어두운 곳은 -1 값으로 되어서

나중에 추가 라이트를 비추거나 할 때 문제가 됩니다. 

이 현상을 방지하기 위해서  saturate (값) 함수를 사용합니다.

max 함수도 사용하지만 최대 값이 없습니다.

max(0, dot(s.Normal, lightDir));

float ndotl = max(0, dot(s.Normal, lightDir));

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

        CGPROGRAM
        #pragma surface surf _MyLight noambient  
        // noambient - 주변광 또는 라이트 프로브를 적용하지 않습니다.
        #pragma target 3.0

        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;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = saturate(dot(s.Normal, lightDir));

            // dot 노멀 백터와 라이트 벡터를 내적 연산
            // surf 에서 Normal 값을 받지 않아도 버텍스에서 노말값을 평범하게 받음
            // saturate 0 이하 값을 0으로 만들어줌
            
            // float ndotl = max(0, dot(s.Normal, lightDir));
            // max 함수도 있지만 최대 값이 없습니다.

            return ndotl;
        }

        ENDCG
    }
    FallBack "Diffuse"
}

NormalMap 적용

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

        CGPROGRAM
        #pragma surface surf _MyLight noambient  
        // noambient - 주변광 또는 라이트 프로브를 적용하지 않습니다.
        #pragma target 3.0

        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);
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }

        
        float4 Lighting_MyLight(SurfaceOutput s, float3 lightDir, float atten)
        {
            float ndotl = saturate(dot(s.Normal, lightDir));

            // dot 노멀 백터와 라이트 벡터를 내적 연산
            // surf 에서 Normal 값을 받지 않아도 버텍스에서 노말값을 평범하게 받음
            // saturate 0 이하 값을 0으로 만들어줌
            
            // float ndotl = max(0, dot(s.Normal, lightDir));
            // max 함수도 있지만 최대 값이 없습니다.

            return ndotl;
        }

        ENDCG
    }
    FallBack "Diffuse"
}

환경광 제거

The post 11 – 01 ~ 02 커스텀 라이트 기본형 / Lambert 라이트 연산 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

9 – 02 ~ 03 Lambert (램버트) / Blinn-Phong(블린-퐁) (Unity Shader)

유니티4 이전 시절에 존재하던 가벼운 라이팅 방식인 Lambert 라이팅

램버트 라이팅 초기 구조

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

        CGPROGRAM
        #pragma surface surf Lambert
        #pragma target 3.0

        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"
}

둔탁한 느낌의 이미지가 Lambert 라이트의 특징입니다.

o.Specular / o.Gloss 는 사용하지 않으므로 값을 넣어도 나타나지 않습니다.

겉으로는 크게 바뀐 것 같지 않지만 내장된 기본 라이팅 구조 중에서 가장 가벼운 라이트입니다. (저사양 기기에서도 잘 구동됩니다.)

간단한 Blinn Phong 라이트 구현 

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

        CGPROGRAM
        #pragma surface surf BlinnPhong
        #pragma target 3.0

        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"
}

BlinnPhong 공식이 가동 되었지만 Specular는 보이지 않습니다.

Specular를 보기위해 추가로 데이터를 입력합니다.

Shader "Custom/BlinnPhong"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _SpecColor("SpecColor", color) = (1,1,1,1)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf BlinnPhong
        #pragma target 3.0

        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.Specular = 0.5;
            o.Gloss = 1;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

위의 코드에서 어디에서도 _SpecColor 를 받는 부분이 없습니다.

_SpecColor 는 절대로 코드에서 받으면 안 되고, 단지  Properties 에서만 만들어야 한다는 것 입니다.

그리고 _SpecColor 라는 이름 외에 다른 이름을 써서도 안됩니다.

BlinnPong 내부의 코드를 열어보면 _SpecColor 이름이 예약어이며 절대로 코드 내부에서 받으면 안된다는 특이한 예외 사항이 존재합니다.

o.Gloss 는 0~ 1 사이의 값을 넣어야 하며 Specular 의 강도를 의미합니다.

0이면 둔탁한 재질 / 1이면 매끄러운 재질을 의미합니다.

o.Specular는 0~ 1 사이의 값을 넣어야 하며 Specular 의 크기를 의미합니다.

0이면 크기가 커지고  / 1이면 크기가 작아집니다.

확인용 코드

Shader "Custom/BlinnPhong"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _SpecColor("SpecColor", color) = (1,1,1,1)
        _SpecAmount("SpecAmount",Range(0,1)) = 0.5
        _GlossAmount("_GlossAmount",Range(0,1)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf BlinnPhong
        #pragma target 3.0

        sampler2D _MainTex;
        float _SpecAmount;
        float _GlossAmount;

        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 = _SpecAmount;
            o.Gloss = _GlossAmount;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

The post 9 – 02 ~ 03 Lambert (램버트) / Blinn-Phong(블린-퐁) (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

9 – 01 유니티에 내장된 라이팅 구조 (Unity Shader)

쉐이더를 처음 만들면 자동으로 생성되는 Standard Shader 는 유니티 5부터 기본적으로 적용된 쉐이더 형태입니다.

Standard Shader의 라이팅은 좋은 라이팅이지만 물리기반의 쉐이더 라이트이기 때문에

모바일과 같은 저 사양 기기에서 구동하기에는 다소 무겁습니다.

그래서 유니티 내부적으로는 유니티4버전 이전부터 사용하던 라이트 구조도 그대로 구현되어 있습니다.

이 라이팅은 물리 기반의 쉐이더보다 품질을 떨어질 수 있지만 상대적으로 가볍기 때문에 물리 기반의 쉐이더를 사용할 필요 없이

가볍게 처리해야 하는 모바일 프로젝트에 적합한 쉐이더 구조라고 할 수 있습니다.

우리가 지금까지 사용한 물리기반 쉐이더의 구조체

또는

물리 기반 쉐이더 이전의 쉐이더 구조인 램버트 / 블린퐁 라이트에서 사용하는 구조체 

즉 유니티에 내장되어 있는 라이팅은 총 3가지라고 할 수 있습니다. 

1. Lambert 램버트

Specular 의 공식이 없고 단지 빛에 의한 밝고 어두움이 구현된 가벼운 라이트 구조  / SurfaceOutput 구조체 사용

2. Blinn Phong 블린퐁

램버트 공식에 가벼운 Specular 공식인 블린퐁 공식이 더해진 라이트 구조,

Specular 공식은 보는 각도와 조명 각도에 따라 계산된 특정 색의 하이라이트 동그라미로 표현된다. / SurfaceOutput 구조체 사용

3.  Standard 스탠다드

일명 PBS ( 물리 기반 쉐이더 : Physically Based Shader)

주변 환경을 반사하서 Specular 를 구현하며, Diffuse 와 Specular 가 에너지 보존 법칙에 의해 서로 보완관계를 자동적으로 가지며

Specular dml 칼라가 메탈릭 속성에 따라 자동적으로 결정되는 라이트 구조

SurfaceOutputStandard 또는 SurfaceOutputStandardSpecular 구조체 사용

The post 9 – 01 유니티에 내장된 라이팅 구조 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

8 – 04 Occlusion (오클루젼) (Unity Shader)

Occlusion (오클루젼)은 Ambient Occlusion (엠비언트 오클루젼) 이라고 부르며, 구석진 부분의 추가적인 음영을 표현하는 기능입니다.

일반적으로 세상에서 그림자가 드리워진 부분도 사방에서 오는 환경광 정도를 받고 있는 것이 일반적입니다.

하지만, 매우 구석져 있거나 복잡한 물체들로 가려져서 환경광도 닫지 못하는 부분은 더욱 더 어두워지는 데  

이 부분은 Ambient Occlusion (엠비언트 오클루젼) 환경차폐라고 부릅니다.

https://docs.unity3d.com/Manual/SL-SurfaceShaders.html

직접 확인해보기 위해서 아래 에셋을 사용했습니다. (무료)

https://assetstore.unity.com/packages/3d/characters/humanoids/barbarian-warrior-75519 <- TestAsset

사용했던 바바리안 몸체는 잠시 비활성화 하고 도끼를 활성화 했습니다.

쉐이더 코드는 바바리안 바디에 적용했던 코드를 사용했습니다.

Shader "Custom/AxeOC"
{
    Properties
    {
        _MainTex("Albedo (RGB)", 2D) = "white" {}
        _BumpMap("Normal Map", 2D) = "white" {} // NormalMap
        _Test("TestFloat",Range(0.5, 3)) = 1
    }
        SubShader
        {
            Tags { "RenderType" = "Opaque" }
            LOD 200

            CGPROGRAM
            #pragma surface surf Standard
            #pragma target 3.0

            sampler2D _MainTex;
            sampler2D _BumpMap; // NormalMap
            float _Test;

            struct Input
            {
                float2 uv_MainTex;
                float2 uv_BumpMap; // NormalMap
            };

            void surf(Input IN, inout SurfaceOutputStandard o)
            {
                float4 c = tex2D(_MainTex, IN.uv_MainTex);

                float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
                o.Normal = float3(d.x * _Test, d.y * _Test, d.z);
                // _Test에 따라서 수치 변화  2  2배  0.5  0.5배 
                o.Albedo = c.rgb;
                o.Alpha = c.a;
            }
            ENDCG
        }
            FallBack "Diffuse"
}

Occlusion 추가

Shader "Custom/AxeOC"
{
    Properties
    {
        _MainTex("Albedo (RGB)", 2D) = "white" {}
        _BumpMap("Normal Map", 2D) = "white" {}
        _Test("TestFloat",Range(0.5, 3)) = 1
        _Occlusion("Occlusion", 2D) = "white" {} // Occlusion
    }
        SubShader
    {
        Tags { "RenderType" = "Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _BumpMap;
        sampler2D _Occlusion;

        float _Test;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_BumpMap;
            // 주의 uv_Occlusion 포함 X

        };

        void surf(Input IN, inout SurfaceOutputStandard o)
        {
            float4 c = tex2D(_MainTex, IN.uv_MainTex);
            o.Occlusion = tex2D(_Occlusion, IN.uv_MainTex); // Occlusion
            // _MainTex와 동일한 UV 값을 받습니다.

            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = float3(d.x * _Test, d.y * _Test, d.z);
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
        FallBack "Diffuse"
}

Occlusion 적용 전

Occlusion 적용 후

Normal Map 의 강도를 조절하면 더 확실하게 알 수 있습니다.

지금 사용한 코드에서는 Occlusion은 half (SurfaceOutput -float4)를 받습니다. (r 채널만 사용합니다.)

Occlusion 기능을 위해서 rgb 채널을 사용하는 텍스쳐를 사용하는 것은 낭비입니다.

_MainTex의 a 채널에 Occlusion 맵을 넣고 사용한다면 텍스쳐를 절약 할 수 있습니다.

The post 8 – 04 Occlusion (오클루젼) (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

8 – 03 Normal Map (노멀맵) (Unity Shader)

NormalMap이란, 실제 디테일이 없는 부분을 디테일이 있는 것처럼 보이게 만들기 위한 눈속임 맵입니다.

일반적으로 푸른색을 띄고 있으며, 빛을 속이기 위한 백터 데이터들로 이루어진 텍스쳐 파일입니다.

NormalMap을 이용해서 빛을 속이게 되면 마치 매우 많은 폴리곤으로 이루어진 오브젝트처럼 디테일이 표현되지만 실제로 폴리곤이 늘어나는 것은 아닙니다.

struct SurfaceOutputStandard 구조체 확인

https://docs.unity3d.com/Manual/SL-SurfaceShaders.html

normalmap을 직접 확인해보기 위해서 아래 에셋을 사용했습니다. (무료)

https://assetstore.unity.com/packages/3d/characters/humanoids/barbarian-warrior-75519 <- TestAsset

Shader "Custom/TestShader"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _BumpMap("Normal Map", 2D) = "white" {} // NormalMap
        // NormalMap과 _BumpMap의 관계성이 없지만
        // 유니티의 다른 내장 쉐이더들이 저 명칭을 사용하고 있기 때문에 
        // 다른 쉐이더와의 호환성을 위해서 사용합니다.
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _BumpMap; // NormalMap

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_BumpMap; // NormalMap
        };

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

위의 노말맵 텍스쳐를 데이터로 사용

확인을 위해 바디와 눈만 활성화

위의 빨간 박스는 노말맵이 없을 경우 노말맵이 없는 쉐이더를 쓰는 것을 추천하는 문구입니다. 

노말맵 적용 전(좌) / 노말맵 적용 후(우) 

위와 같이 빛의 음영을 속여서 디테일이 늘어난 것처럼 만드는 속임수 입니다.

NormalMap은 일반적인 텍스쳐가 아닙니다.

일반적인 게임용 포맷인 DXT1 혹은 DXT5가 아니라 DXTnm이라는 파일 포맷입니다.

이 파일 포맷은 일반적인 텍스쳐의 압축에 의한 NormalMap의 품질 저하를 막기 위하여 만든 AG파일 포맷입니다.

이 포맷은 NormalMap의 R과 G의 퀄리티를 최대한 보전하여 A와 G에 넣어 저장합니다.

이렇게 보전된 R과 G는 NormalMap의 X와 Y로 계산되며 Z는 삼각함수를 이용하여 수학적으로 추출됩니다.

그러므로 이 텍스쳐를 이용하여 NormalMap으로 온전하게 생성해내려면 앞에 설명한 공식이 적용되어 있는 함수를 이용합니다.

아래와 같이 해주면 NormalMap의 강도를 조절할 수 있습니다.

Shader "Custom/TestShader"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _BumpMap("Normal Map", 2D) = "white" {} // NormalMap
        _Test("TestFloat",Range(0.5, 3)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _BumpMap; // NormalMap
        float _Test;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_BumpMap; // NormalMap
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            float4 c = tex2D(_MainTex, IN.uv_MainTex);

            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = float3(d.x * _Test, d.y * _Test, d.z);
            // _Test에 따라서 수치 변화  2  2배  0.5  0.5배 

            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

https://darkcatgame.tistory.com/84 <- 추가적인 내용

The post 8 – 03 Normal Map (노멀맵) (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

08 – 01 Standard Shader

https://docs.unity3d.com/kr/2020.3/Manual/UpgradeGuide5.html

유니티 5.0이 되면서 다른 많은 그래픽 툴이나 엔진처럼 최신의 쉐이더 시스템인

‘물리 기반 쉐이더’ 시스템을 도입하게 되었습니다.

기존의 쉐이더 시스템과는 다르게, 주변 환경에 따른 재질 변화를 물리 법칙에 기반하여

실시간으로 재질을 구현해주는 사실적인 쉐이더 표현 기법입니다.

유니티에 있는 기본 Standard Shader 가 대표적인 물리 기반 쉐이더입니다.

https://docs.unity3d.com/kr/2021.3/Manual/SL-SurfaceShaders.html

우리가 사용한  o.Emission과 o.Albedo 같은 변수들은 바로 이 구조체 안에 정의되어 있는 것을 사용한 것이고

우리는 여기에 알맞은 값을 넣어 주면 알아서 결과가 나오게 되는 것입니다. 

이제 다른 구조체들을 사용해 보겠습니다.

08 – 02 Metallic, Smoothness

새로운 쉐이더와 메테리얼을 만들어서 Sphere에 적용 시켜줍니다.

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

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

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

기존 쉐이더에 이미 Metallic, Smoothness 가 생성되어 있습니다.

공부를 위해서 만들어 봅시다.

이제 Properties에 Metallic, Smoothness를

Shader "Custom/Metallic"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Metallic ("Metallic", Range(0, 1)) = 0 
        _Smoothness("Smoothness", Range(0, 1)) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;
        float _Smoothness;
        float _Metallic;

        struct Input
        {
            float2 uv_MainTex;
        };

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

이제 적당한 텍스쳐를 넣고 결과를 확인합니다.

Smoothness는 이 재질이 매끄러운지 거친 지를 결정하는 부분입니다.

0이면 완벽히 거칠어서 난반사(Diffise)만 일어나고 1이면 완벽히 매끄러워서 정반사(Specular)만 일어나게 됩니다.

유니티에서 Standard Shader라는 물리기반렌더링의 기본 개념은

나가는 빛의 양은 들오는 빛의 양을 넘길 수 없다라는 에너지 보존법칙 개념입니다.

재질의 거칠기에 따라서 난반사와 정반사의 비율이 결정되므로 정반사가 높아지면 그만큼 난반사의 비율이 적어집니다.

물리 기반 쉐이더에서 Metallic 이 0이면 스페큘러 컬러가 흑백이 되며 1이면 Albedo에 넣은 색이 됩니다.

금속은 고유의 스펙큘러 컬러를 가지고 있기 때문입니다.

가급적 0과 1외의 값은 쓰지 않는 것이 정확한 물리 기반 쉐이더를 다루는 방법입니다. 

https://docs.unity3d.com/Manual/StandardShaderMaterialCharts.html

유니티에서는 이러한 재질의 올바른 사용법을 위해서 아래와 같은 차트를 제공합니다.

노멀맵 추가 후 확인해보면 진짜 금속같이 보이네요

Shader "Custom/Metallic"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Metallic ("Metallic", Range(0, 1)) = 0 
        _Smoothness("Smoothness", Range(0, 1)) = 0
        _BumpMap("NormalMAp", 2D) = "bump" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;
        float _Smoothness;
        float _Metallic;
        sampler2D _BumpMap;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_BumpMap;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            float3 d = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
            o.Normal = d;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
            o.Metallic = _Metallic;
            o.Smoothness = _Smoothness;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

The post 8 – 01 ~ 02 Standard Shader / Metallic, Smoothness (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.

6 – 04 UV와 Time

이번에는 UV가 자동으로 흘러가게 만들 것입니다.

UV에 숫자를 더하면 이미지가 이동하는 것을 알고 있습니다.

Unity에 내장된 변수인 _Time을 이용하여 시간에 따라 이미지가 흘러가는 것처럼 보이게 만들 것입니다.

https://docs.unity3d.com/kr/2021.3/Manual/SL-UnityShaderVariables.html <- 한글

https://docs.unity3d.com/460/Documentation/Manual/SL-BuiltinValues.html <- 영문

간단하게 UV에 시간을 더해봅니다.

이미지가 좌측 아래로 흘러가는 이유는 U/V 즉 X/Y에 동시에 _Time.y 를 더해주었기 때문입니다.

이를 이용하여 다양한 효과를 줄 수 있습니다.

X방향으로만 흘러가게 할 때

(+ / – 의 조절로 방향도 전환 및 순자를 곱하여 속도 변경도 가능합니다.)

Y방향으로만 흘러가게 할 때

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

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {

            fixed4 c = tex2D (_MainTex, float2(IN.uv_MainTex.x, IN.uv_MainTex.y + _Time.y));
            o.Emission = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

6 – 05 UV를 이용한 불 이펙트 만들기

알파 채널을 가지고 있는 이미지를 준비하고 텍스쳐 하나만 받는 쉐이더를 만듭니다.

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

        CGPROGRAM
        #pragma surface surf Standard
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

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

불이라기에는 투명하지도 않고 움직이지도 않으며 빛의 영향까지 받습니다.

우선 빛의 영향을 받지 않게 하기 위해서 o.Albedo를 o.Emission으로 변경합니다.

이 불의 이미지는 알파 값을 가지고 있는데도 불구하고 투명해지지 않고 있습니다.

알파채널은 그냥 쉽게 작동하지 않고 활성화시키려면 더 근본적인 부분을 건드려야 합니다.

알파는 실제 게임에서 일반 오브젝트와 매우 다르게 처리되며, 상당히 무거운 연산중에 하나입니다. 

우선 임시로 작동하도록 만듭니다.

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

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

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

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

이제 불처럼 보이는 이미지를 만드는 데까지는 성공했습니다.

하지만 움직이지 않으니 그냥 정지된 불 이미지 같습니다.

일단 만들어 놓은 쉐이더에 새로운 이미지(알파 값을 가진)를 추가로 받을 수 있게 만들고 출력해 보겠습니다.

추가로 이 이미지를 _Time.y를 이용하여 위쪽으로 흘러가게 만들겠습니다.

이제 완성된 두 개의 이미지를 합쳐서 완성해 보겠습니다.

간단히  c 와 d의 색상값. 알파 값을 곱해줍니다.

Shader "Custom/fire3"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _MainTex2 ("Albedo2 (RGB)", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
        LOD 200

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

        sampler2D _MainTex;
        sampler2D _MainTex2;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_MainTex2;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D( _MainTex2, float2(IN.uv_MainTex2.x, IN.uv_MainTex2.y - _Time.y));
            o.Emission = c.rgb * d.rgb;
            o.Alpha = c.a * d.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

이런 방법으로 흐르는 물이나 폭포 플라스마 이펙트 등 다양한 표현이 가능합니다.

하지만 이 방법은 매우 무거운 Standard 라이팅이 돌아가고 있고,

뒤의 이미지와 겹쳐도 밝아지지 않는 불완전한 이펙트라고 할 수 있습니다.

6 – 06 이미지를 이용한 UV 제어

이미지를 2장 받을 수 있으며 반투명이 동작하도록 만들어 줍니다.

확실한 이미지를 알 수 있게 체크 무늬로 변경해줍니다.

추가적으로 두번째 이미지를 데이터로 사용하기 위하여 위치를 바꾸어 주고 값을 더 해줍니다.

Shader "Custom/fire3"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _MainTex2 ("Albedo2 (RGB)", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
        LOD 200

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

        sampler2D _MainTex;
        sampler2D _MainTex2;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_MainTex2;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            fixed4 d = tex2D( _MainTex2, IN.uv_MainTex2);
            o.Emission = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

c 의 uv에 d.r을 더해 주었습니다.

d에 검은색을 넣어 주었으므로 d는 float(0, 0, 0, 1)입니다. 그리고 d.r은 0이 되어서 아무 일도 일어나지 않습니다.

하지만 텍스쳐를 변경한다면?

d의 텍스쳐가 회색이라면 d.r은 0.5이므로 텍스쳐 전체 이미지의 절반 정도 이동할 것이고,

d의 텍스쳐가 흰색이라면 d.r은 1 이므로 텍스쳐 전체 이미지만큼 이동하여 원래 이미지와 같아질 것입니다.

그렇다면 단색이 아닌 다른 이미지를 넣으면?

이미지 밝기에 따라서 다르게 이동하였습니다.

이번에는 이미지를 흐르게 해보겠습니다.

Shader "Custom/fire3"
{
    Properties
    {
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _MainTex2 ("Albedo2 (RGB)", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
        LOD 200

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

        sampler2D _MainTex;
        sampler2D _MainTex2;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_MainTex2;
        };

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            fixed4 d = tex2D(_MainTex2, float2(IN.uv_MainTex2.x, IN.uv_MainTex2.y - _Time.y));
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex + d.r);
            o.Emission = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

그리고 불이미지로 변경합니다.

위의 코드는 standard 쉐이더 즉, 현재 물리 기반의 라이팅이 작동되고 있다는 뜻 입니다.

이것은 상당히 무거운 공식이며, 실제로 이 쉐이더에서는 이 물리기반 라이팅 공식이 전혀 사용되지 않음에도 불구하고

이 공식이 구동되고 있다는 것을 의미합니다. (자원의 낭비)

이 부분은 나중에 라이팅 연산을 배우고 난 후, 라이팅을 전혀 처리하지 않는 코드로 고치면

실제로 부담없이 사용 할 수 있습니다.

The post 6 – 04 ~ 06 UV와 Time, 불 이펙트, 이미지 UV 제어 (Unity Shader) appeared first on 어제와 내일의 나 그 사이의 이야기.