언리얼 LED 화면 효과 메테리얼 만들기

(Unreal 5.1 버전 사용)

 

개요

이번 글에서는 언리얼 메테리얼로 LED 화면 효과를 만들어보겠습니다.
아래 순서와 같이, 텍스처를 먼저 모자이크화(픽셀화)하고, LED 화소 텍스처와 곱해주면,
짠 하고 만들어지는 간단한 효과입니다! 🎉

 

LED 화면 효과 원리

 

아래의 LCD 화면 효과 유니티 셰이더 제작 글을 참고했습니다.

LCD Display Shader Effect - Alan Zucconi

 

---

 

텍스처 모자이크 처리하기

먼저 텍스처를 모자이크 처리해줄 차례입니다.

사실 모자이크 효과는 블러 효과의 원리와 유사하게, 모자이크가 적용되는 한 칸을 그 칸의 픽셀 색상들의 평균값으로 칠하는 방식의 효과입니다. 다만 픽셀 셰이더에서는 현재 연산되는 픽셀에 대한 값들만 접근 가능하기 때문에, 평균을 구할 인근 픽셀들의 값들엔 접근할 수 없습니다.

따라서 지금 만들게 되는 모자이크 효과는, 평균값이 아닌 유사 모자이크 효과입니다.
UV를 타일링한뒤 round() 효과로 UV 값을 계단식의 값들로 만들어 주고, 다시 타일링한 값으로 나누어 모자이크 느낌으로 만들어주는 것이죠.

 

모자이크 효과의 UV 연산 과정

 

위의 최종 그래프처럼 먼저 타일링 값을 곱해준 뒤, round()로 반올림을 해주고, 다시 타일링 값으로 나눠주면
UV가 0~0.249... 일 땐 UV 좌표 0의 픽셀 값만 출력하고, UV가 0.25~0.749... 일 땐 UV 좌표 0.5의 픽셀 값을 출력하게 됩니다.

이러한 연산에 더해, 아래 메테리얼 노드에선 타일링한 뒤 0.5를 더해주면서 모자이크 한 칸에 그 칸의 중앙 픽셀 색상으로 칠하게 됩니다.

 

모자이크화 메테리얼 노드 구조

 

---

 

LED 화소 텍스처로 LED 화면 효과 적용하기

모자이크 효과를 만들었다면, 거의 80%가 만들어졌다고 보아도 무방합니다!
이제 LED 화소 텍스처를 모자이크 (픽셀화) 한 타일링 값으로 반복시켜 주고, 반복시킨 LED 텍스처 타일과 모자이크화한 텍스처의 색상값들을 곱해주기만 하면 효과가 완성됩니다.

왜 LED 텍스처와 모자이크 텍스처를 곱해주기만 하면 되는지 궁금하시다면, 디지털 색상과 수 - RGB값을 수로 나타내기 포스트를 보시는 것을 추천드립니다.

 

LED 화소 타일링 부분 메테리얼 노드 구조

 

LED 효과를 적용한 이미지 / 최종 메테리얼 노드