텍스처의 가장자리 패딩하기

발생한 이슈

스프라이트 애니메이션 셰이더를 작성하던 중, 잘라낸 텍스처의 가장자리 부분이 의도대로 출력되지 않는 이슈가 발생했다

---

이슈 상세

예를 들면 아래와 같이 잘라온 부분의 가장자리가 옆 픽셀과 블렌딩된 상태가 된다

 

참고로 텍스처의 원본은 제대로 나눠져 있다

---

발생 원인

원인은 텍스처 샘플링에 의한 보간이라는 사실 자체 금방 눈치 챘다

(텍스처 샘플링에 대한 설명은 생략)

그렇다고 해결책이 금방 떠오르는 건 아니지만...

 

참고로 샘플링 필터 모드를 point로 변경해도 이슈가 해소되긴 하지만 근본적인 해결책은 아니다

---

해결법

딱히 가장자리가 필요 없을 예정이었기 때문에 1셀의 크기를 약간 크게 하고, 시작 위치를 약간 움직여서 잘라내는 로직을 추가해서 해결했다

 

소스 코드는 다음과 같다

Varyings vert(Attributes IN)
{
    Varyings OUT = (Varyings)0;
    OUT.PositionHCS = TransformObjectToHClip(IN.PositionOS.xyz);

    // 1개의 셀이 나오도록 조정
    const float2 col_row = float2(_Column, _Row);

    // UV Edge Padding
    const float2 max_col_row = float2(1.0, 1.0) / float2(_Column, _Row);
    float2 cell = IN.UV / col_row;
    cell = cell * (max_col_row - _BaseMap_TexelSize.xy * _Padding) / max_col_row;
    
    const uint index = uint(_Fps * _Time.y) % (_Column * _Row);
    // 열 인덱스
    uint column_index = index % _Column;
    // 행 인덱스
    uint row_index = _Row - (index /_Column) % _Row - 1;

    // UV Edge Padding
    const float2 offset = (float2(column_index, row_index) / col_row) + (_BaseMap_TexelSize.xy * (0.5 * _Padding));
    
    OUT.UV = cell + offset;
    return OUT;
}

---

마무리

이번엔 딱히 없음

아무튼 이걸로 해결!