벡터 이미지에 도트 셰이더 적용하기

학습 동기

도트 스타일 게임을 만들면서, 에셋을 찾아봤지만, 스킬 이펙트나 톤이 맞는 에셋을 찾기 어려워서 벡터이미지를 사용 후, 셰이더로 해상도를 낮춰서 사용하고자했다.

학습 내용

벡터 이미지를 픽셀 단위로 낮은 해상도로 샘플링하고, 이를 다시 스케일업하여 도트 느낌을 내는 셰이더를 만든다. 핵심은 다음과 같다:

• 1. 픽셀화(Pixelation)의 개념2. UV 좌표와 샘플링3. Pixel Size의 역할4. 시각적 연출 vs. 실제 해상도5. 텍스처 필터링 주의
• 픽셀화를 제대로 표현하려면 텍스처의 필터링 설정이 중요하다.
  Filter Mode는 반드시 Point로 설정해야 선명한 블록형 도트를 표현할 수 있다. 그렇지 않으면 보간이 적용되어 도트 효과가 흐려진다.
• 도트 셰이더는 렌더링 연출일 뿐 실제 이미지의 해상도나 리소스 크기를 줄이지 않는다. 즉, 메모리나 퍼포먼스에는 직접적인 영향이 없으며, 스타일 통일과 시각적 효과를 위한 기법이다.
• _PixelSize는 텍스처를 몇 개의 픽셀로 나눌지를 결정한다.
  예를 들어 _PixelSize = 8이면, 1단위 UV를 8등분하여 8x8 픽셀 블록처럼 처리한다. 값이 커질수록 도트 크기가 커지고, 이미지가 더 뭉개져 보인다. 반대로 작을수록 원래 텍스처와 가까워진다.
• 텍스처는 UV 좌표(0~1)를 기반으로 색을 샘플링한다.
  도트 셰이더는 UV 좌표를 일정 블록 단위로 강제로 끊어서 동일한 픽셀 위치만 샘플링하도록 한다. 이렇게 하면 텍스처가 일정 간격의 격자로 나뉘고, 각 격자(픽셀 블록)가 하나의 색으로 채워진다.
• 도트 셰이더는 고해상도 이미지를 낮은 해상도로 보이게 하여 도트 이미지처럼 보이도록 픽셀화하는 효과를 낸다. 실제 이미지의 해상도를 줄이는 것이 아니라, 셰이더에서 텍스처 샘플링 방식만 바꿔서 시각적으로 픽셀 느낌을 주는 것이 핵심이다.

주의점

픽셀사이즈가 너무 크면 이미지가 모두 뭉게지거나, 이미 도트로된 이미지를 픽셀화 하면 이중으로 픽셀화가 되어 몹시 이상할 수 있다.