UE4 - 포스트 프로세스로 외곽선(OutLine)효과 내기

참조:https://www.youtube.com/watch?v=YVTcH6da32Y

 

포스트 프로세스의 세팅은 https://unrealstudy.tistory.com/7에 기재했다.

 

우선 먼저 Custom Stencil을 사용해서 외곽선을 만들어본다.

프로젝트 세팅에서 렌더링 - 포스트 프로세싱에 Enabled with Stencil을 표기하면 Custom Stencil을 쓸 수 있게 된다.

원하는 액터의 CustomDepth Stencil Value를 올리면 깊이버퍼에서 스텐실버퍼로 수치화 되어 표기 된다.(커스텀 스텐실 뷰)

스텐실 수치를 올리려면 Render CustomDepth Pass를 활성화 시켜야한다.

 

외곽선 그리기는 대부분 상 하 좌 우로 캐릭터를 그리는 예제가 주로 보인다.

4번이나 그리므로 비용이 많이 들어서인지 참조영상에서는 두개만 가지고 외곽선을 표시했다.

단 이렇게 할경우 특정각도에서 제대로 나오지 않는다.

 

우선 개념 이해를 위해 단일방향으로 시도해본다.

왼쪽으로만 외곽선을 적용시켜본다

SceneTexelSize는 텍셀 크기만큼 이동시킬때 사용한다고 한다. Constant2Vector로 x,y좌표를 조작 할 수 있다.

5,0만큼 이동시켜서 그리도록 하고 Multiply한다.(1,0이 티가 잘 안나서)

ScreenPosition은 현재 위치를 가리키는데, 둘을 더하면 현재 위치로부터 5,0만큼 UV를 이동시킨다는 의미이다.

 

여기서의 UV는, 스크린 텍스쳐(스크린샷)을 하나의 텍스쳐로 생각하고 UV를 이동시킨다는 의미이므로

대충 렌더타겟을 5픽셀 옆으로 이동시킨다고 생각하면 된다.(스크린샷이 2d스프라이트라고 생각하고 5픽셀 옆으로)

 

커스텀 스텐실은 SceneTexture을 만들고 메뉴에서 선택하면 된다.5픽셀 이동한 스텐실 버퍼와,

이동하지 않은 스텐실 버퍼를 준비한다. 값비교에 RGB 값이 다 필요하지는 않으므로

R값만 가지고 비교를 한다.

5픽셀 이동한 스텐실버퍼와 기존 스텐실버퍼를 MAX 시켰을 경우

다 MAX 시킨 채로 원본 스텐실을 Distance 할 경우 5픽셀 이동한 외곽만 그려진다

왼쪽으로만 외곽선을 적용시켜본다 2

이제 1번의 결과물을 IF의 A에 넣고, B에다 기존 스텐실 값을 넣는다(맨 처음에 2로 넣었으니 2로 집어넣는다)

값이 2랑 같다면 2를 반환해주고, 값이 다르다면 0을 반환해준다.

전체를 더한다음 기존 Stencil의 위치를 뺐기 때문에 외곽부분만 2가 되어있는 상태이다.

색상은 Contant3Vector을 사용하면 된다. 이제 값이 다른경우에는,

SceneTexture:PostProcessInput0의 RGB값을 가져오면 원본을 그대로 그린다.

 

대충 이런 원리로 4번을 반복하면 된다.그나마 다행인건 스텐실 버퍼를 이용해 포스트 프로세스에서

한번에 계산을 할것이기 때문에 객체마다 외곽선을 적용시키는 것보다는 부담이 덜할것으로 보인다.

 

이제 4번을 할 경우이다.

 

오른쪽은 (왼쪽으로만 외곽선을 적용시켜본다 2)와 동일하다

x로 2,0으로 간것과, 그걸 반전시킨거로 CustomStencil을 준비.

y로 2,0으로 간것과, 그걸 반전시킨거로 CustomStencil을 준비.

그리고 전부 MAX 시키면 4개가 합쳐진 모양이 나오는데 거기서 기존의 Stencil을 이용해서 구멍을 낸다.

 

그렇게 하면 외곽선이 완성된다.

 

1픽셀 단위로 지정하면 깔끔한데..

상하좌우로 그려주는 꼼수라서 인지 값을 키우면 이상해진다.

 

벽에다 Custom Depth를 넣어주면 외곽선이 뚫리는 문제가 해결이 되기는 하는데..

벽을 Custom Depth하지 않으면 외곽선이 벽을 뚫어버리는 문제가 생겨버렸다.

 

이번엔 Stencil을 쓰지않고 Custom Depth를 사용해서

벽을 뚫지 않게 외곽을 만들어보기로 했다.

https://unrealstudy.tistory.com/7

UE4 - 벽에 가려진 캐릭터 특정 색상으로 표시

의 응용이다.

앞부분은 똑같다.

커스텀 Depth와 SceneDepth를 뺀다. 벽면 뒤에있는 Custom Depth의 모양이 나온다.

방향 별로 SubStract 한걸 Min으로 전부 합치면 Custom Depth로 나온 모양이 두꺼워진 형태가 나온다.

마지막으로 아무런 이동도 하지않은 뺀 결과값을 반전시켜서 MAX로 합치면 가운데 구멍이 생긴다.

 

이렇게 4가지를 다 적용시킨다. 거리를 재는 연산까지 해주어야 하기 때문에 너무 거대해진다.

오른쪽은 (왼쪽으로만 외곽선을 적용시켜본다 2)와 동일하다

 

적용시킬 경우 벽을 custom Depth 했을때와 같은 결과가 나온다.

똑같은 방식으로 아래쪽도 외곽을 줄순있는데 너무 비용이 많이 들 것 같다..일단 아래 기재

기왕 하는김에 최대한 원하는 모양을 만들어보았다.

CustomDepth의 깊이를 체크해서 계산한 애들을 전부 MAX로 더한다음 마지막에 Min으로 합친다.

구멍을 낼 원본 데이터는 0으로 강제 초기화 시켜준다.마지막에 위의 데이터와 MAX로 합치면 외곽선만 빠져나온다.