상세 컨텐츠

본문 제목

[포니 게임 개발] 37. 외곽선 그리기 완결

프로그래밍/포니게임개발

by ∫2tdt=t²+c 2013. 10. 29. 02:12

본문

 

 

 

 

 

 

 

 

 

 

 

며칠 고민한 끝에 깔끔한 외곽선을 그리는데 성ㅋ공! 했습니다.

의외로 해결책은 단순했어요. 노말맵 그릴때 여분의 알파채널에 Material ID도 같이 새겨넣고, 외곽선을 추출할때 두 정보를 모두 이용하는것이죠! 이를 통해 보다 확실한 외곽선 그리기가 가능해졌답니다.

더불에 소벨 필터는 근방 9개 지점의 텍스쳐를 가져와야 하므로 훨씬 단순한 코드는 없을까 고민하다 상하좌우와 현재지점까지 해서 총 5개의 지점만 참조하여 외곽선을 구분하도록 코드를 수정했습니다.

 

 

 

 

수정한 셰이더 코드는 다음과 같아요.

sampler에는 MatID가 알파채널에 그려진 노말맵이 들어옵니다.

상하좌우의 MatID가 다르면 외곽선이구요,

노말값의 기울기(변화량)가 급변하면 외곽선입니다.

 

노말값의 기울기는 (왼쪽 픽셀 - 중앙 픽셀) 과 (중앙 픽셀 - 오른쪽 픽셀) 값을 비교하여 구합니다.

이 두 값이 유사하면 기울기가 거의 변동이 없는 것이므로 외곽선이 아니고,

이 두 값의 차가 특정 값(threshold) 이상 나면 외곽선인것으로 검출하도록 한거죠.

이는 가로로 뿐만아니라 세로로도 검출해주어야 합니다. 그래서 가로 세로의 기울기 변화량을 제곱해서 합했습니다.

 

단 문제는 외곽선 굵기가 기껏해야 1픽셀~2픽셀로 밖에 나오지 않는다는건데, 굵기를 어떻게 조절할지 고민이네요. 더 굵게 하고 싶으면 상하좌우 1텍셀이 아니라 주변에 더 넓은 범위의 텍셀을 참조하면 되긴 할텐데 너무 느려질 것이고, 아니면 렌더 패스를 한 번 더 늘려서 외곽선만 따로 그려주고, 그 외곽선에 블러를 먹여서 두껍게한다음 그려줘도 될텐데...

 

 

 

 

 

태그

관련글 더보기

댓글 영역

  • 프로필 사진
    2013.10.29 11:17
    우왕 카툰렌더!!
  • 프로필 사진
    2013.10.29 11:19
    깊이에 따라 두께가 틀려진다면 금상첨화!!
  • 프로필 사진
    2022.04.27 04:24
    비밀댓글입니다
  • 프로필 사진
    2022.04.28 18:15
    비밀댓글입니다
    • 프로필 사진
      2022.04.28 20:42 신고
      네 tex는 uv좌표이고, tex2D함수는 텍스쳐 상 특정 좌표의 픽셀 값을 반환해주는 함수입니다. (참조: https://docs.microsoft.com/en-us/windows/win32/direct3dhlsl/dx-graphics-hlsl-tex2d)

      이미지 픽셀은 rgba로 구성되어 있는 float4 타입이죠. 관련해서 더 공부해보고 싶으시다면 HLSL이나 셰이더 프로그래밍 등의 키워드로 검색해보시길 추천드립니다.