카테고리 없음

[URPShaderGraph] Post Process Edge Outline.

구찬애 2023. 8. 24. 16:13
반응형
가장자리 감지기술을 사용하여 Screen의 Object에 얇은 Outline을 오버레이 하는 쉐이더

URP Samole Buffer node

 

URP Sample Buffer를 이용한다.

  • NormalWorldSpace 각 표면의 모든 필셀에서 Normal Vector을 가져온다
  • MotionVectors 카메라에서 오브젝트가 얼마나 멀리 이동하는지를 프레임 단위로 벡터를 제공한다.
  • BlitsSource 모든 오브젝트의 색상을 제공한다.
자.. 이 URP Sample Buffer Node에서 주어진 정보로 어떻게 가장자리를 감지 할까? 생각해 보자

이미지의 각 픽셀에 인접한 픽셀이 어떤 색상인지 확인 하고 서로 얼마나 다른지 알아내고

그 차이가 임계값보다 높으면 이 픽셀에 Outline이 있는 것으로 표시한다.

하지만 장면이 각 개체에 대해 블록 색상을 사용하는 경우(픽셀당 색상의 차이가 크다면)에는 잘 작동하지만

매우 세밀한 질감 개체에는 적합하지 않을 수 있다.

마찬가지로 현재 픽셀의 Normal Vector와 인접한 픽셀 간의 차이를 확인 하고 임계값보다 높으면 Json 픽셀을 Outline으로 표시하는 방식이다.

 

먼저 인접한 픽셀에 대한 정보를 얻으려면 X방향의 화면 픽셀 너비에 대해 1의 Offset 값을 더하거나 빼거나

Y방향의 화면 픽셀 높이에 대해 Offset 값 1을 더하거나 빼주어 offset에 의한 4개의 샘플링을 구하게 된다.

 

Normal Edge

1. X

offset이 +X방향에 있으면 이를 Screen Position에 Add 한 다음 URP Sample Buffer Node에 넣어 준다.

이번에는 오프셋을 빼서 -X 방향에서 픽셀을 확인하고 하나의 버퍼값을 다른 버퍼 값에서 빼고 Length node를 사용하여 X방향에서 NormalVector가 얼마나 다른지 측정한다.

 

2. Y

X축 방향의 샘플링을 구한 것 처럼 마찬가지로Y축 방향으로도 비슷한 작업을 수행한다.

 

이렇게 나온 X축 방향의 결과값과 Y축 방향의 결과값을 Add하여 최종 Normal Vector의 Outline값을 얻는다.

Normal

여기까지만 해도 기본적인 NormalVector 값을 이용한 Edge Outline을 구할수 있다 

하지만 색상의 차이를 구별할수 없다.

 

그래서 색상 기반 가장자리(Edge) 감지를 추가 하자.

 

Color Edge

이는 더욱 간단하다. Normal Edge 구한 방법에서 URP Sample Buffer Node의 옵션만 바꾸어 주면 된다.

NormalWorldSpace를 BlitSource로 바꾸어 주면 끝..

이렇게 추가된 2개의 컬러 샘플링을 진행 했다.

 

Color

이렇게 각 Normal Edge단계 2개와 Color Edge단계 2개 샘플링된 데이타를 모두(4개의 샘플링) 합쳐 놓으면...

 

결과물

4개의 샘플링 된 데이타가 합쳐져서 나오는 결과물을 만들수 있다.

 

노드는

FullScreen

현재까지는 FullScreen 형태로 만들어져서 일반 오브젝트 쉐이더 쪽으로 빼볼 생각이다.

 

 

 

반응형