UDN
Search public documentation:

DevelopmentKitGemsSobelEdgeDetectionKR
English Translation
日本語訳
中国翻译

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 홈 > UDK 젬 > 소벨 에지 디텍션 포스트 프로세스 이펙트
UE3 홈 > 포스트 프로세스 이펙트 > 소벨 에지 디텍션 포스트 프로세스 이펙트

소벨 에지 디텍션 포스트 프로세스 이펙트


문서 변경내역: James Tan 작성. 홍성진 번역.
UDK 2011년 3월 버전으로 최종 테스팅, PC 호환

개요


소벨 에지 디텍션(Sobel Edge Detection)이란 이미지의 각 픽셀별 명암도의 그러데이션 차이를 계산하여 에지를 찾아내는 방법입니다. 최종 결과는 각 픽셀이 얼마나 급작스럽게 바뀌는지 그 상관관계 값으로 나타납니다. 씬 뎁스에 이 작업을 해 주면 에지를 쉽게 찾아낼 수 있는 것입니다. 여기서는 소벨 연산 자체에 대해 너무 깊이 들어가지 않겠으며, 자세한 정보는 영문 위키피디아 페이지를 참고해 주십시오. 일단 이 포스트 프로세스 이펙트가 언제 필요한가! 바로 툰 렌더링에서 에지 라인을 덧그릴 때입니다. 폴리곤으로 생성된 앨리어싱(계단현상)을 제거하기 위해 에지에 블러 필터를 하고자 할 때도 좋겠습니다.

머티리얼 셰이더


머티리얼 셰이더는 여러 단계로 이루어져 있습니다.

오프셋 계산하기

각 픽셀마다 주변 8 개의 픽셀 샘플을 뽑아줘야 하기에, 씬 깊이를 뽑아낼 때는 찾아볼 UV를 약간 오프셋(조정)해 줘야 합니다. 왜냐면 화면 좌표는 폭 / 높이 해상도에 대해 0 초과 1 이하의 값으로 정렬되어 있는데 셰이더는 상대적 픽셀 차이를 계산해야 하기 때문입니다. 오프셋 스텝을 조절하여 최종 에지의 크기를 조절할 수 있는 것이죠. 최적의 결과를 얻기 위해서는 일단 ResolutionX 와 ResolutionY 를 현재 해상도로 설정해 줘야 합니다.

SobelEdgeUVLookupOffset.jpg

오프셋 사용하기

구슬이 서말, 샘플 스텝을 계산해 놨습니다. 꿰어야 보배, 사용을 하기 위해서는 Append 머티리얼 노드로 꿰어 Vector2 를 만듭니다. 그런 다음 그 Vector2 에 상대적 화면 위치를 더해줍니다. 상대적 화면 위치는 0.f 에서 1.f 사이 범위로 제한시키는데, 래핑때문에 깊이를 찾아보는 것이 엇나가지 않도록 하기 위해서입니다. 씬 깊이를 정규화(역주: [0..1] 같은 범위로 정렬)할 필요는 없는데, 원래 범위 값을 갖고 있는 것이 낫기 때문입니다. 이 작업은 어떤 식의 조합으로도 가능합니다:

  • UV02 (X = +offset, Y = -offset)
  • UV12 (X = +offset, Y = 0)
  • UV22 (X = +offset, Y = +offset)
  • UV01 (X = 0, Y = -offset)
  • UV21 (X = 0, Y = +offset)
  • UV00 (X = -offset, Y = -offset)
  • UV10 (X = -offset, Y = 0)
  • UV20 (X = -offset, Y = +offset)

SobelEdgeUVOffset.jpg

X 값 계산하기

X 값 계산 공식은: 0 - UV00 - (UV01 * 2) - UV02 + UV20 + (UV21 * 2) + UV22

SobelEdgeCalculatingX.jpg

Y 값 계산하기

Y 값 계산 공식은: 0 - UV00 + UV02 - (UV10 * 2) + (UV12 * 2) - UV20 + UV22.

SobelEdgeCalculatingY.jpg

거리 제곱 계산하기

거리 제곱 계산 공식은: (X * X) + (Y * Y). 거리 제곱 값을 사용하여 에지를 검출해낼 수 있습니다.

SobelEdgeDistance.jpg

거리 제곱 값 비교하기

여기서 거리와 스칼라 파라미터 사이의 비교를 합니다. 씬 깊이에 급작스런 변화가 있다면, 거리 제곱 값이 더 클 것입니다. 고로 단순 비교를 통해 에지가 있는 곳과 없는 곳을 찾아낼 수 있습니다.

SobelEdgeEdgeDetection.jpg

대비 (contrast) 패스

대비를 사용하면 높은 값은 늘리고 낮은 값은 내려서 에지 검출 '정밀도'를 높여야 할 때 도움이 될 수 있습니다. 깊이가 약간만 차이나는 부분에 좋습니다.

SobelEdgeContrast.jpg

최소 명암도 (minimum intensity) 패스

대비 패스 이후에도 애매한 그러데이션(색이 서서히 변하는) 부분이 남아있을 수 있는데, 없애려면 일정 값 이상의 픽셀은 1 로 설정하고 나머지는 0 으로 설정해 보면 됩니다. 이런 식으로 그러데이션은 없앨 수 있지만, 앨리어싱(aliasing, 계단현상)이나 검정 땜빵같은 부작용이 생길 수 있습니다.

SobelEdgeMinimumIntensityPass.jpg

깊이 제외 (depth exclusion) 패스

지금까지의 셰이더는 스카이 돔이나 매우 멀리있는 오브젝트에 부작용이 생길 수 있습니다. 또한 스카이 돔에 에지가 절대 발생할 리가 없다! 확실히 아는 경우라면 그냥 생략하는 편이 더 빠르겠죠.

SobelEdgeDepthExclusion.jpg

합성 (commposite) 패스

위의 패스를 모두 거치면 회색조 텍셀이 생성됩니다. 여기에 씬 텍스처를 곱해주기만 하면 에지를 덧그릴 수 있습니다.

SobelEdgeCompositePass.jpg

완성!

셰이더를 온전한 크기로 보시려면 클릭!

SobelEdgeShaderThumbnail.jpg

소벨 에지 포스트 프로세스 이펙트로 렌더해 본 레벨 스크린샷입니다.

SobelEdgeFinalRender.jpg

포스트 프로세스 이펙트 조정하기


합성 패스 끄기

합성 패스를 끄면 셰이더가 소벨 에지 디텍션 결과와 씬 샘플 텍스처 노드를 곱하는 단계를 건너뜁니다. 비실사(실제 사진같지 않은) 렌더링을 할 때 좋습니다.

SobelEdgeNoCompositePass.jpg

최소 명암도 패스 끄기

최소 명암도 패스를 끄면 셰이더가 일정한 값 이하의 픽셀을 지우는 단계를 건너뜁니다. 비실사 렌더링 씬에다 입체감을 더하고자 할 때 좋습니다.

SobelEdgeNoMinimumIntensityPass.jpg

대비 패스 끄기

대비 패스를 끄면 셰이더가 지수적으로(부익부 빈익빈 식으로) 픽셀 값을 조절하는 단계를 건너뜁니다. 중간부분 값을 밀어내기 보단 값을 그냥 날로 사용하고자 할 때 좋습니다.

SobelEdgeNoContrastPass.jpg

깊이 제외 패스 끄기

깊이 제외 패스를 끄면 셰이더가 입력 값보다 뎁스 값이 큰 픽셀을 생략하던 단계를 건너뜁니다. 보통 이 단계는 놔둬야 스카이 돔에 부작용이 생기지 않습니다.

SobelEdgeNoDepthExclusionPass.jpg

깊이 제외 거리 조절하기

이 (depth exclusion distance) 값을 조절하면 입력 값보다 뎁스 값이 큰 픽셀을 생략할 수 있습니다. 이 값을 너무 낮게 잡으면 셰이더가 픽셀을 너무 많이 생략하는 반면, 너무 높게 잡으면 다른 곳에 부작용이 너무 많이 생길 수 있습니다. 과유불급이라, 게임 아트 스타일이나 씬에 잘 맞는 적당한 값을 찾는 것이 좋겠습니다.

SobelEdgeAdjustingTheDepthExclusionDistance.jpg

대비 강도 조절하기

이 (contrast strength) 값을 조절하면 보통 0.5f 인 픽셀 중간점 값을 밖으로 밀어낼 수 있습니다. 값이 0.f 쪽에 가까우면 이 방향, 1.f 쪽에 가까우면 저 방향으로 밀려나게 됩니다.

SobelEdgeAdjustingTheContrastFactor.jpg

최소 명암도 조절하기

이 (minimul intensity) 값을 조절하면 이 입력 값 아래의 픽셀 값을 포함하거나 제외할 수 있습니다. 즉 선을 얇상하게 하고 싶으면 최소 명암도 값을 낮추고, 좀 더 짙게 더덕더덕 붙이고 싶으면 값을 높이면 됩니다.

SobelEdgeAdjustingTheMinimumIntensity.jpg

배경 명암 조절하기

이 (ambient brightness / brightness) 값을 조절하면 씬의 전체적인 명도/암도를 빡빡하게 하거나 느슨하게 할 수 있습니다.

SobelEdgeAdjustingAmbientBrightness.jpg

SobelEdgeAdjustingAmbientDarkness.jpg

소벨 픽셀 오프셋 조절하기

이 (sobel pixel offset) 값을 조절하면 현재 픽셀 좌표에서 더 멀리 떨어진 픽셀의 샘플을 뽑을 수 있습니다. 실제로는 에지를 두껍게 하거나 얇게 하는 효과를 냅니다.

SobelEdgeAdjustingSobelPixel.jpg

사용법


이 머티리얼은 Post Process Chain 에서 MaterialEffect 노드 안에서 사용되는 것입니다. 머티리얼을 포스트 프로세스 이펙트로 사용하는 법에 대해서는, Post Process Materials KR 페이지를 참고하시기 바랍니다.

관련 토픽


결론


잘 키운 머티리얼 에디터 하나, 열 코딩 안부럽다!

내려받기