URP에서 간단하게 Stencil Buffer를 사용해서 Magic Card 만들어보기!

서론

아웃라인을 구현에 스텐실을 사용한 적이 있었는데, 그 때 스텐실로 이리저리 가지고 놀다가 만들게 된 Magic Card에 대해서 간단히 정리해보고자 한다

 

참고로 Magic Card란 이런 걸 말한다(특히나 VR에서 자주 보인다)

https://www.youtube.com/watch?v=3ustSanqxD0

---

오브젝트들 배치

가장 먼저 Magic Card의 오브젝트들을 배치하자

위의 유니티짱들은 Magic Card에 그려질 오브젝트들이고, 빨간색 Quad가 Magic Card의 범위이다

(액자 틀 같은 건 그 범위를 알기 쉽게 하기 위한 일반적인 오브젝트이다)

---

레이어 태그 설정

그 다음은 태그를 설정하자

Magic Card의 구현을 위해서는 Magic Card에 그려질 오브젝트들에 대한 태그(여기서는 Inner Mirror)와 Magic Card의 렌더링 범위에 대한 태그(여기서는 Mirror) 2종류가 필요하다

---

Universal Renderer Data의 설정

다음으로는 URP Asset(Universal Render PipeLine Asset)의 Render List에 지정된 Universal Renderer Data의 설정을 해줬다

여기서의 작업은 크게 2가지인데, 하나는 Inner Mirror 태그와 Mirror 태그에 대한 렌더링 순서에 대한 컨트롤과 Stencil에 대한 Override이다

왕도적으로 구현하려면 URP Renderer Feature를 코딩해서 렌더링 순서를 제어하거나, Shader에 Stencil를 구현해야 하겠지만, Universal Renderer Data와 Render Objects를 이용하면 코딩 없이(!) 간단하게 구현할 수 있다

 

우선은 Magic Card에 사용되는 태그들(Inner Mirror 태그와 Mirror 태그)를 일반적인 렌더링 순서에서 제외해준다

 

다음으로는 각각에 대한 설정을 할 차례!

Render Objects를 이용해서 코딩 없이 클릭 ‘딸깍’으로 구현해보자!

 

우선은 Mirror 태그에 대한 설정부터(’딸깍’으로 구현하기 위해서는 이 순서도 중요!)

 

사실 Name은 마음대로 설정해도 되지만 알기 쉽게 Mirror로 했다

Event도 적당히 AfterRenderingOpaques로 했다

 

중요한 것은 Layer Mask!

이 부분에 매직 카드의 렌더링 범위에 관련된 태그들을 설정해야 한다

이번에는 Mirror 밖에 없으니 Mirror만 설정했다

 

다음으로는 Overrides에서 Stencil를 설정하자

(이거면 셰이더에서 구현하지 않아도 Stencil를 사용할 수 있다!)

Mirror 태그의 오브젝트의 Stencil 값을 1로 하고, 렌더링 될 때 그 부분이 1로 되도록 했다

 

다음은 Inner Mirror 태그에 대한 설정이다

 

Event나 Layer Mask에 대해서는 상술했던 Mirror와 비슷하다

중요한 건 Stencil이다!

값은 Mirror 태그와 똑같이 1로 설정하고, Compare Function을 Equal로 설정한다

이렇게 하면 Mirror 태그의 오브젝트가 그려진 부분, 즉 Stencil 값을 1인 곳에서는 Stencil Test가 통과되므로 정상적으로 렌더링되고, 그렇지 않은 부분에 대해서는 안 그려지게 된다

💡 Mirror와 Inner Mirror의 Render Objects 순서가 중요했던 이유!
 만약 Inner Mirror 태그의 오브젝트들이 Mirror 태그의 오브젝트보다 먼저 렌더링된다면 Stencil Test가 전부 실패해서 아예 렌더링이 되지 않을 것이다
이러한 케이스를 막기 위해서 Mirror를 먼저 그릴 필요가 있다
일반적으로 렌더링은 Render Objects의 순서대로 렌더링되므로 Mirror의 Render Objects를 위에 두도록 하자!(Event로 제어하기에는 여러모로 낭비가 너무 많다)

 

물론 중요한 건 Mirror의 스텐실 부분에 Inner Mirror가 그려진다는 것뿐이므로 세세한 설정은 바꿔도 될 것이다

---

결과

아무튼 짜잔~!

영상에서는 카드 부분을 움직여서 매직 카드란 인상이 흐려졌지만 뒷부분은 충분히 매직 카드 같다

---

마무리

그래서 이걸로 매직 카드 외에 뭘 할 수 있는데!?

대화창의 캐릭터들을 움직이게 하는 연출을 할 수 있지 않을까 싶다

예를 들어 Sushi Ben 같은?

https://www.youtube.com/watch?v=un3r2z5_3vk

---

참고 사이트

참고 사이트는 아니고 Stencil에 대한 튜토리얼 영상들을 몇 가지 시청