Renderer Feature - 3(선택적 글로우/하이라이트)

RendererFeature(2)

Unity_RF(Renderer Feature) - 2

 

이전 글에 이어서 RF에 대한 기능을 하나씩 추가로 적용해 보도록 하겠습니다.

 

이번에는 선택적 글로우/하이라이트라는 그래픽 효과에 대해 적용해보려고 합니다.

 

선택적 글로우/하이라이트 

선택적 글로우/하이라이트란? 특정 오브젝트에 글로우 효과를 주는 것으로, 게임에서 현재 내가 인터렉션 해야 되는 오브젝트나 혹은, 특정 위치에 하이라이팅을 하는 이펙트 효과를 의미합니다.

 

보통 Unity에서 Glow를 표현할 때 라이트와, PP(PostProcessing)에서 Bloom을 활용하여 구현을 하게 되는데 이를 RendererFeature를 활용하여 적용해보려고 합니다.

 

결론부터 이야기하자면, Renderer Feature 만으로는 흔히 게임에서 보실 수 있는 그런 선택가능한 오브젝트, 인터렉션 가능한 오브젝트의 표현을 하기에는 부족하다는 점을 알게 되었습니다. 아래 이미지와 함께 추가적으로 이야기해 보겠습니다.

왼쪽	오른쪽
Renderer Feature, PostProcessing을 활용	Renderer Feature 만을 이용하여 구현
원형띠와 눈부신 이펙트를 적용	원형 버블 띠 형태로 구현

 

 

Renderer Feature 적용 단계

---

1. 효과를 적용할 Object Layer를 지정합니다.

2. 앞 서 구현하였던 캐릭터 아우트라인과 동일하게, 오브젝트의 Outline 형태의 Material을 지정합니다.

3. 지정된 Material이 특정 오브젝트의 느낌을 주기 위해 해당 이펙트를 겹겹이 쌓으며, 색상, Material을 조정합니다.

 

1, 2번 항목의 경우에는 앞 서 설명하였던 Renderer Objects 적용 순서와 동일하여, 여기서 추가적인 작업을 진행한 3번 항목에 대해서만 첨부 이미지를 통해 이해하려고 합니다.

3 개의 각기다른 Outline을 그리는 Material

Post Processing 적용 단계

---

1. 효과를 적용할 Object의 Material을 타기팅 합니다. 

2. 해당 Material의 Emission 옵션을 설정하여 Intensity 및 Color 설정을 진행합니다.

3. Global Volume을 추가하여, Bloom 효과를 적용하여 Glow 효과를 적용합니다.

 

여기서 Emission이란, 사전적 정의로는 배출, 방사라는 뜻을 가지며, 유니티에서는 스스로 빛을 낼 수 있게 적용하는 오브젝트라고 이해하면 됩니다. 이 속성을 적용한 뒤 Post Processing을 통해, 빛 번짐 효과인 Bloom을 통해 오브젝트의 표현을 좀 더 잘 보이게 할 수 있습니다.

 

 

효과를 적용할 Material 타기팅

앞 서 계속해서 적용하였던 Render Objects를 적용하여, Event 시점에 오브젝트의 Material을 덮어 씌어 추가적인 그래픽을 설정합니다.

 

해당 Material의 Shader Graph 커스텀

Emission Custom

앞 서 적용하였던, Shader Graph를 추가적으로 커스텀하여, Emission 옵션에 대한 추가적인 설정이 가능하게 변경합니다.

Color, Intensity Multiply

• Color와, intensity 값을 파라미터로 확장하여, 이를 Multiply(곱하여) 새로운 컬러 값을 생성합니다.

Out Color를 Split

• 생성된 Out(Color) 값을 Split 하여 R, G, B, A로 분리합니다. 그 이유는 뒤에서 추가적으로 설명하겠습니다.

Split을 진행한 R,G,B를 다시 Combine

• Split을 진행한 Color를 다시 R, G, B를 합쳐, Alpha값이 없는 Color값을 생성합니다.

Fragment, emission에 입력

• 생성한 RGB를 오브젝트의 Fragment항목의 Emission에 Input 데이터로 전달합니다.

여기서, 앞 서 처음 EmissionColor와 intensity를 Multiply(곱하기)한 RGBA(4)를 Split, Combine을 진행한 이유가 나타나게 됩니다. Emission 항목은 Color(RGB)로만 적용되기 때문에, 생성한 RGBA를 바로 활용할 수없고 Alpha값을 제거하는 과정이 필요한 것입니다.

 

 

Global Volume Bloom 적용

GlobalVolume 적용 순서

1. 카메라의 PostProcessing 항목을 활성화
2. Volume(Local or Global) 생성
3. 적용하고 싶은 PostProcessing을 Volume Profile을 설정하여 후처리 작업을 진행.

카메라의 PostProcessing 활성화

---

카메라 PP 활성화

Volume(Local or Global) 생성

---

Volume 오브젝트 생성

• Hierarchy 마우스 우클릭 > Volume > Global Volume 생성

Volume Profile 설정

 

---

Profile 구성

• Add Override > PostProcessing > Bloom > Bloom의 각 옵션 설정 및 적용 

위 순서를 통해 Render Objects를 설정하고, 해당 Material을 커스텀하여 PostProcessing까지 적용하여 우리가 처음 의도하였던 Glow 효과에 대해서 적용해 볼 수 있었습니다.

 

마치며

 이 예제를 작업하면서, 하나의 Render Objects만으로는 원하는 그래픽 표현하기 어려울 수있다라는 점을 인지하게 되었고, 유니티에서 활용이 가능한 다양한 그래픽 설정을 종합적으로 활용하여, 아직 퍼포먼스 측면에서는 제대로 학습해보지 않았지만, 앱 성능이나, 그래픽면에서 최적화할 수 있는 방향에 대해 끊임없이 학습이 필요하다고 느끼게 되었습니다.