[Unity] 셰이더 처리 후 텍스처 테두리가 번져 보이는 문제

---

간단한 가우시안 블러(Gaussian Blur) 코드를 올리고 보니 테두리의 색상이 번져있는 것을 제보를 받고 알게 됨. 원인은, 가우시안 블러 셰이더 처리 중, UV 값이 0보다 작거나 1보다 큰 영역까지 침범했기 때문.

[Unity] 간단한 가우시안 블러(GaussianBlur) 셰이더 코드

아래는 침범된 코드 스니펫.

// Horizontal blur pass
for (int x = -5; x <= 5; x++)
{
    float2 offset = float2(x, 0) * texelSize * _BlurRadius;
    color += tex2D(_MainTex, i.uv + offset) * Gaussian(x, _BlurRadius);
    totalWeight += Gaussian(x, _BlurRadius);
}

 

침범된 결과는 아래와 같은 모양으로 보이게 됨. 블러의 offset을 좌/우 로만 주었기 때문에 좌우 컬러만 번져보이는 상황. 테두리는 잘 보면 좌측 상단에 우측 끝 컬러인 노란색이 침범해있음.

 

해결방법

간단한 해결방법인데, 소스 텍스처의 Wrap Mode 를 Clamp로 변경해주면 된다. 기존 셋팅이 기본값인 Repeat 으로 설정돼있을 것. 텍스처의 WrapMode 를 Clamp 로 변경하고 Apply 버튼 클릭. 다시 확인해보면 아래와 같이 좌우 끝이 잘 잘려있는 걸 확인할 수 있다.

 

아래 그림은 비교. 왼쪽 이미지는 WrapMode가 Repeat일 때 모습, 우측은 Clamp일 때 모습.

 

-끝

---

게임 개발에 필수적인 내용을 담는 명서들을 소개합니다.

 

<유니티 교과서 개정6판>(유니티 최신 버전)
https://link.coupang.com/a/be3P0t

유니티 교과서 개정6판

 

<대마왕의 유니티 URP 셰이더 그래프 스타트업>

https://link.coupang.com/a/bs8qyC

대마왕의 유니티 URP 셰이더 그래프 스타트업

<리얼-타임 렌더링(REAL-TIME RENDERING) 4/e>
https://link.coupang.com/a/8VWas

리얼-타임 렌더링 4/e

 

<이득우의 게임 수학:39가지 예제로 배운다! 메타버스를 구성하는 게임 수학의 모든 것>
https://link.coupang.com/a/9BqLd

이득우의 게임 수학:39가지 예제로 배운다! 메타버스를 구성하는 게임 수학의 모든 것

 

유니티 에셋 스토어 링크
https://assetstore.unity.com?aid=1011lvz7h

에셋스토어

(링크를 통해 도서/에셋 구입시 일정액의 수수료를 지급받습니다.)

---