[Unity][Shader][URP] 유니티 쉐이더 : 아우라 만들기(홀로그램)

 
 

 
 
오늘은 림라이트와 알파를 이용해 캐릭터에 아우라를 저해주는 작업을 해보려고 한다.
아래 영상과 [유니티 쉐이더 스타트업] 을 참고했다.
 

---

🍪 결과 미리보기

결과물

---

아우라 구현 이론
: 림라이트란?

 

[출처] https://www.istockphoto.com/kr/%EC%9D%B4%EB%AF%B8%EC%A7%80/rim-light-silhouette

림라이트(Rim Light)란 무엇인가?
: "Rim light"는 사진 촬영 및 비디오 제작과 같은 시각적 예술에서 사용되는 조명 기술 중 하나,  Rim light는 대상의 주변을 둘러싼 윤곽을 강조하고, 대상을 배경에서 더욱 돋보이게 만드는 데 사용된다.
일반적으로 게임에서는 기본적으로는 게임에서 배경과 캐릭터가 분리되거나 강조 되어 보이도록 하기 위해서 과장 되게 도와주는 효과로 쓰인다.
 

영상쪽에서는 주로 이렇게 쓰인다고 한다.

우리가 사용하는 standard Shader와 같은 물리 기반 쉐이더는 이러한 재질 특성에 따른 반사율이 BRDF (Bidirectional Reflectance Distribute Function)으로 이용해 구현 되어 있다. 이러한 방사 공식을 Fresnel(프레넬) 이라고 부른다

 
 
오늘 구현하고자 하는 이 아우라 이펙트 기능의 핵심은 림라이트(Rim Light)를 알파에 집어넣어 기본형을 만드는 것으로 시작한다.
 
 

---

 
 

URP를 활용

 
👇전체 파이프라인 모습

위 파이프 라인을 쪼개서 설명해보자면 
이 아우라의 기능은 총 두가지 파트로 나뉜다.
 
 

---

 
 
위 vertex의 position 부분을 먼저 살펴보자

우리는 기존의 노말벡터를 구해 expand변수만큼 노말벡터를 확장시킬 것이다.
expand변수는 외부에서 입력받을 수 있도록 빼둔 뒤 노말벡터와 mul해준다. 
다음은 기존 position에 추가해 기존 노말과 확장된 노말을 두번 그릴 수 있도록 해준다.
 
여기서 핵심은 노말벡터의 Space를 오브젝트로 설정하는 것이다.
 
이부분을 마치면 오브젝트는 아래와 같은 모습으로 나타난다. 
노말을 확장시켜 한번 더 그린 모습이다.

 

---

 
 
다음은 확장된 노말을 어떻게 하면 아우라와 같은 모습으로 나타날지에 대한 고민이 필요하다.

위에서말한 프레넬 연산이 이 아우라의 느낌을 내줄 수 있는데, 림라이트의 반사광같은 부분을 이 연산을 통해 구현할 수 있다. 
 
프레넬 연산의반사광은  power를 통해 조정할 뒤 원하는 아우라 컬러와 mul해준다.
이 상태로도 좋지만 아우라의 동적인 느낌을 더하기 위해 UV텍스쳐를 받아 Time함수에 따라 UV가 움직이도록 한다.
이 텍스쳐를 기존에 설정한 color와 mul해주면 아우라 모습이 완성된다.
 
아래는 인스펙터창으로 꺼내놓은 쉐이더 입력값이다. 
여기서 expand 확장정도와 색상을 고르면 아래와 같은 모습이 나타난다. 

좌 : 인스펙터 창  /  우 : 텍스쳐를 아직 넣지않고 색상만 추가한 모습

 

 

❗시간에 따라 흐르는 UV맵을 추가한 결과

 
 

---

 
 
 

HSLS를 활용

 
👇먼저 내가 사용한 코드블럭을 전체 삽입했다. 아래 이 코드를 하나씩 분석해 보겠다.

Shader "Custom/Aura"
{
    Properties
    {
        _TestColor("display name", Color) = (0,0,0,0)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
    }

    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent"}
        //LOD 200

        CGPROGRAM
        #pragma surface surf Lambert noambient alpha:fade

        //#pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
            float3 viewDir;
        };

        float4 _TestColor;
        //UNITY_INSTANCING_BUFFER_START(Props)
        //UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutput o)
        {

            fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
            //o.Albedo = c.rgb;
            o.Emission = _TestColor;
            float rim = saturate(dot(o.Normal, IN.viewDir));
            //o.Emission = pow(1 - rim, 3);
            rim = pow(1 - rim, 3);
            o.Alpha = rim;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

 

---

 


먼저 우리는 Properties를 통해 텍스쳐와 아우라의 색상으로 사용할 입력값을 받아올 수 있도록 했다.

물론 받아온 입력값을 변수를 통해 초기화 한뒤 사용해야하는 것도 잊지 않는다.
 
✨중요한 부분은 여기서 부터인데, 입력값으로 받은 input을 인자로 받아 내 입맛대로 구현하는 파트다.

fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
o.Emission = _TestColor;

먼저 c변수 안에 받아온 텍스쳐 이미지를 할당해준 뒤
아우라에 사용될 노말의 색상을 _TestColor를 통해 지정해준다. 이부분은 프로퍼티에서 언급했듯이 유니티 인스펙터 창을 통해 컬러피커로 색상을 변환시킬 수 있다.



float rim = saturate(dot(o.Normal, IN.viewDir));

그 다음 rim이 나오는데 이부분이 앞서 말했던 프레넬을 이용해 림라이트를 구현하는 부분이다.
여기서 viewDir 의 역할이 궁금할텐데, viewDir은 조명벡터를 대신해 사용된다.
viewDir과 조명벡터, 이 둘은 float형 벡터라는 점에서 완전히 동일하지만, 컴퓨터에서는 결국 똑같은 float형 벡터로 인식된다.

이 점을 이용해 우린 여기서 N dot L 대신 N dot V 를 넣는다. (조명벡터 대신 뷰벡터로)
이렇게 되면 조명 벡터 대신에 뷰 벡터가 라이팅처럼 연산이 되는데,  카메라가 조명처럼 인식 되어서 내가 바라보는 방향이 밝아 진다는 것이다

👇이부분을 이해하기 힘들다면 아래 게시글을 참고하면 좋을 것같다.

[Unity][Shader] 유니티쉐이더 스타트업 : ch10.디지털라이트 이론

 
 
 

이전 글을 참고했을때 [조명벡터와 노말벡터가 서로 마주 보는 순간에 표현이 가장 밝다]고 했었다.
우리는 이 조명벡터 대신 뷰벡터를 대신 넣어 뷰벡터가 노말벡터 와 서로 마주 보는 순간에 될 때 가장 받고 서로 90°가 되는 순간에 점점 어두워 지는 것을 확인할 수 있다


 rim = pow(1 - rim, 3);

하지만 우리가 표현 하고자 하는 것은 노말벡터와 뷰벡터의 각도가 기울어질수록 점점 밝아 지고 서로 마주 볼 수록 면이 어두워 지는 것을 원한다 그래서 우리는 위 문장을 사용했다

 

o.Alpha = rim;

이제 지금까지 만들어진 라이트 연산을 알파 채널에 넣으면 된다
면이 어두워 지는 구간 일수록 노말의 투명도가 높아진다.

 

 
 

---

 


오늘 구현한 림라이트는 처음엔 URP로 구현하다가 자꾸 문제가 생겨서 급하게 HLSL로 갈아타 구현을 해봤는데…

이참에 URP로 다시 구현해보며 HLSL와 비교해보는 시간을 갖는것도 좋은 기회가 될 수 있겠다.
발표를 하다가 파이프라인관련이슈가 해결됐는데 이부분도 빠른 시일내로 티스투리에 써놔야 또 헤맬 일 이 없을듯… 이렇게 전용 오답노트가 되어가는 나으. 티스토리…..