(펌)[메터리얼]엣지있는(카툰렌터) 포스트 이펙트 메터리얼 제작
출처 : http://udn.epicgames.com/Three/DevelopmentKitGemsSobelEdgeDetectionKR.html
문서 변경내역: James Tan 작성. 홍성진 번역.
UDK 2011년 3월 버전으로 최종 테스팅, PC 호환개요
소벨 에지 디텍션(Sobel Edge Detection)이란 이미지의 각 픽셀별 명암도의 그러데이션 차이를 계산하여 에지를 찾아내는 방법입니다. 최종 결과는 각 픽셀이 얼마나 급작스럽게 바뀌는지 그 상관관계 값으로 나타납니다. 씬 뎁스에 이 작업을 해 주면 에지를 쉽게 찾아낼 수 있는 것입니다. 여기서는 소벨 연산 자체에 대해 너무 깊이 들어가지 않겠으며, 자세한 정보는 영문 위키피디아 페이지를 참고해 주십시오. 일단 이 포스트 프로세스 이펙트가 언제 필요한가! 바로 툰 렌더링에서 에지 라인을 덧그릴 때입니다. 폴리곤으로 생성된 앨리어싱(계단현상)을 제거하기 위해 에지에 블러 필터를 하고자 할 때도 좋겠습니다.
머티리얼 셰이더
머티리얼 셰이더는 여러 단계로 이루어져 있습니다.
오프셋 계산하기
각 픽셀마다 주변 8 개의 픽셀 샘플을 뽑아줘야 하기에, 씬 깊이를 뽑아낼 때는 찾아볼 UV를 약간 오프셋(조정)해 줘야 합니다. 왜냐면 화면 좌표는 폭 / 높이 해상도에 대해 0 초과 1 이하의 값으로 정렬되어 있는데 셰이더는 상대적 픽셀 차이를 계산해야 하기 때문입니다. 오프셋 스텝을 조절하여 최종 에지의 크기를 조절할 수 있는 것이죠. 최적의 결과를 얻기 위해서는 일단 ResolutionX 와 ResolutionY 를 현재 해상도로 설정해 줘야 합니다.
오프셋 사용하기
구슬이 서말, 샘플 스텝을 계산해 놨습니다. 꿰어야 보배, 사용을 하기 위해서는 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)
X 값 계산하기
X 값 계산 공식은: 0 - UV00 - (UV01 * 2) - UV02 + UV20 + (UV21 * 2) + UV22
Y 값 계산하기
Y 값 계산 공식은: 0 - UV00 + UV02 - (UV10 * 2) + (UV12 * 2) - UV20 + UV22.
거리 제곱 계산하기
거리 제곱 계산 공식은: (X * X) + (Y * Y). 거리 제곱 값을 사용하여 에지를 검출해낼 수 있습니다.
거리 제곱 값 비교하기
여기서 거리와 스칼라 파라미터 사이의 비교를 합니다. 씬 깊이에 급작스런 변화가 있다면, 거리 제곱 값이 더 클 것입니다. 고로 단순 비교를 통해 에지가 있는 곳과 없는 곳을 찾아낼 수 있습니다.
대비 (contrast) 패스
대비를 사용하면 높은 값은 늘리고 낮은 값은 내려서 에지 검출 '정밀도'를 높여야 할 때 도움이 될 수 있습니다. 깊이가 약간만 차이나는 부분에 좋습니다.
최소 명암도 (minimum intensity) 패스
대비 패스 이후에도 애매한 그러데이션(색이 서서히 변하는) 부분이 남아있을 수 있는데, 없애려면 일정 값 이상의 픽셀은 1 로 설정하고 나머지는 0 으로 설정해 보면 됩니다. 이런 식으로 그러데이션은 없앨 수 있지만, 앨리어싱(aliasing, 계단현상)이나 검정 땜빵같은 부작용이 생길 수 있습니다.
깊이 제외 (depth exclusion) 패스
지금까지의 셰이더는 스카이 돔이나 매우 멀리있는 오브젝트에 부작용이 생길 수 있습니다. 또한 스카이 돔에 에지가 절대 발생할 리가 없다! 확실히 아는 경우라면 그냥 생략하는 편이 더 빠르겠죠.
합성 (commposite) 패스
위의 패스를 모두 거치면 회색조 텍셀이 생성됩니다. 여기에 씬 텍스처를 곱해주기만 하면 에지를 덧그릴 수 있습니다.
완성!
셰이더를 온전한 크기로 보시려면 클릭!
소벨 에지 포스트 프로세스 이펙트로 렌더해 본 레벨 스크린샷입니다.
포스트 프로세스 이펙트 조정하기
합성 패스 끄기
합성 패스를 끄면 셰이더가 소벨 에지 디텍션 결과와 씬 샘플 텍스처 노드를 곱하는 단계를 건너뜁니다. 비실사(실제 사진같지 않은) 렌더링을 할 때 좋습니다.
최소 명암도 패스 끄기
최소 명암도 패스를 끄면 셰이더가 일정한 값 이하의 픽셀을 지우는 단계를 건너뜁니다. 비실사 렌더링 씬에다 입체감을 더하고자 할 때 좋습니다.
대비 패스 끄기
대비 패스를 끄면 셰이더가 지수적으로(부익부 빈익빈 식으로) 픽셀 값을 조절하는 단계를 건너뜁니다. 중간부분 값을 밀어내기 보단 값을 그냥 날로 사용하고자 할 때 좋습니다.
깊이 제외 패스 끄기
깊이 제외 패스를 끄면 셰이더가 입력 값보다 뎁스 값이 큰 픽셀을 생략하던 단계를 건너뜁니다. 보통 이 단계는 놔둬야 스카이 돔에 부작용이 생기지 않습니다.
깊이 제외 거리 조절하기
이 (depth exclusion distance) 값을 조절하면 입력 값보다 뎁스 값이 큰 픽셀을 생략할 수 있습니다. 이 값을 너무 낮게 잡으면 셰이더가 픽셀을 너무 많이 생략하는 반면, 너무 높게 잡으면 다른 곳에 부작용이 너무 많이 생길 수 있습니다. 과유불급이라, 게임 아트 스타일이나 씬에 잘 맞는 적당한 값을 찾는 것이 좋겠습니다.
대비 강도 조절하기
이 (contrast strength) 값을 조절하면 보통 0.5f 인 픽셀 중간점 값을 밖으로 밀어낼 수 있습니다. 값이 0.f 쪽에 가까우면 이 방향, 1.f 쪽에 가까우면 저 방향으로 밀려나게 됩니다.
최소 명암도 조절하기
이 (minimul intensity) 값을 조절하면 이 입력 값 아래의 픽셀 값을 포함하거나 제외할 수 있습니다. 즉 선을 얇상하게 하고 싶으면 최소 명암도 값을 낮추고, 좀 더 짙게 더덕더덕 붙이고 싶으면 값을 높이면 됩니다.
배경 명암 조절하기
이 (ambient brightness / brightness) 값을 조절하면 씬의 전체적인 명도/암도를 빡빡하게 하거나 느슨하게 할 수 있습니다.
소벨 픽셀 오프셋 조절하기
이 (sobel pixel offset) 값을 조절하면 현재 픽셀 좌표에서 더 멀리 떨어진 픽셀의 샘플을 뽑을 수 있습니다. 실제로는 에지를 두껍게 하거나 얇게 하는 효과를 냅니다.
사용법
이 머티리얼은 Post Process Chain 에서 MaterialEffect 노드 안에서 사용되는 것입니다. 머티리얼을 포스트 프로세스 이펙트로 사용하는 법에 대해서는, Post Process Materials KR 페이지를 참고하시기 바랍니다.
관련 토픽
- Post Process Editor User Guide KR
- Post Process Materials KR
- Post Process Technical Guide KR
- Post Process Effect Reference KR
결론
잘 키운 머티리얼 에디터 하나, 열 코딩 안부럽다!
내려받기
- 이 젬에 사용된 콘텐츠 SobelEdgeContent.zip 내려받기
