게임잼에서 Unity로 Pixel 3D개발 이야기 - 2) 아트풍에 맞는 셰이더짜기

https://figix.tistory.com/147

게임잼에서 Unity로 3D개발 이야기 - 1) 아트풍 결정하기

 

지난번 포스트에서는 아트풍 설정이었습니다. 이번 포스트는 어떻게 구현할 것인가에 이야기입니다.

저희팀의 생각하는 아트풍은 아래와 같다고 이야기를 했습니다.

저 아트풍에서 제가 해야했던 역할은 화면 픽셀화, 포그처리입니다.

 

기본적으로 저는 픽셀화를 이미 한번 작업을 해봤던 사람이었기에 문제도 없고,

포그처리하는 것도 해봤기에 어려운 사항이 아닌줄 알았습니다.

하지만 여기서 가장 크게 간과했던 사실이 있는데,

제가 2개를 동시에 핸들링을 안해봤단 사실입니다.

오른쪽 그림처럼 이슈가 나왔습니다.

일단 문제의 원인 파악부터 들어갔습니다.

 

 

 

 

 

 

 

 

---

원인 파악을 위해서는 사전 지식이 필요하니 그림과 함께 아래 Depth의 개념에 대해 잡고 가야합니다.

 

Depth Prepass는 Rasterizer 단계에서 삼각형을 평면화하면서 Depth를 먼저 확정하는 패스이며,

이때 SceneDepth가 만들어진다. 색은 없고 깊이만 있다.
래스터라이저에서 항상 Depth는 계산되지만, Prepass는 그 결과를 먼저 기록하는 전략을 취한다.
1.Pixel Shader가 비쌀 때, 2.안정적인 SceneDepth가 '일찍' 필요할 때가 이 전략을 활용한다.
필자는 이번 작업을 할 때 2번의 이유로 사용을 하게 되었다.
그러면 그 기록된 정보는 어디로 가는가? - Depth Buffer

Depth Buffer = 각 픽셀마다 “가장 앞에 있는 프래그먼트의 깊이 값 1개”
✔️ 픽셀당 1값
✔️ 가장 가까운 표면만
❌ 뒤에 가려진 정보 없음
❌ 여러 레이어 없음

---

우리는 뎁스를 기반[카메라와 오브젝트의 거리]으로 Fog효과를 Shader에서 구현을 진행했습니다. 

 

Q). 근데 Unity Lighting[Ctrl+9]->Environment->Fog에서 Fog효과를 쓸 수도 있는거 아니에요? 왜 직접 셰이더로 짠거죠?

A). Unity의 기본 내장 Fog는 메쉬들끼리는 정상적으로 작동을 했지만, SkyBox에는 Fog가 걸리지 않습니다. 나중에 가서는 유니티 Fog도 같이 혼합하여 사용했지만, 제대로 기능을 다 구현 후 넣으면 좋겠다라는 추가적인 판단으로 넣었습니다.

 

그럼 이제 픽셀화의 개념에 대해 집고 가겠습니다.

https://figix.tistory.com/103

회전하는 픽셀 이펙트 셰이더 짜기

위 글에서 상세히 픽셀화하는 과정에 대해 서술했는데,

요약하면 픽셀화는 UV를 제어후, 텍스쳐에 넣어서 왜곡하는 행위를 하는 것이 픽셀화 셰이더의 핵심입니다.

이걸 다시말하면 픽셀화는 PixelShader 단계에서 이루어지는 과정입니다.

 

즉 왜곡하지 않은 Depth값을 SceneColor Texture를 왜곡한 결과에 동시에 적용해보니 위처럼 나오는 현상이 일어났습니다.

Depth값도 왜곡하면 되는 것 아니냐 할 수 있지만, 이외로 그 과정이 간단하지 않았습니다.

왜냐면 맨처음 그걸 고려해서 만든게 저 위 나무 그림이기 때문입니다.즉 왜곡하는 방식에 문제가 있던 것입니다. 

 

저 왜곡을 다시 재조정하는데 실험의 반복으로 시간이 좀 소요되었지만,

결국 하나의 포스트프로세싱 머티리얼 안에서 해결할 수 있었습니다.

 

쉽게는 Depth기반 RenderTexture를 뽑으면 되는 일이라고 생각할 수 있지만, 그건 문제를 회피하고 돌아가는 길이고 패스가 2단계가 되어서 드로우콜이 하나더 늘어나느 구조라 좋은 구조로 생각하지 않았기에 고생을 하게 되었습니다.

---

여담으로 포스트프로세싱을 진행하면서 유니티에서 포스트 프로세싱에 대한 팁을 나누겠습니다.

먼저 커스텀한 포스트프로세싱을 적용하기 위해서는 Camera컴포넌트의 Rendering섹션에서 Render를 바꾸어야합니다.

Render는 기본 값인으로 0: PC_Renderer가 존재하고, 그 외의 요소를 보통 추가하는 방식으로 진행합니다.

 

그럼 이걸 어디서 추가하는가? 이게 궁금한 포인트입니다.

Assets/Settings/PC_RPAsset.asset의 파일에서 진행합니다.

그림처럼 Renderer List를 추가하면됩니다.

다음과 같이 Full Screen Pass Renderer Feature를 추가해서, 직접만든 머티리얼을 넣어주시면 정상적으로 동작됩니다.

 

다른 팁으로 Camera 컴포넌트의 Rendering 섹션의 Renderer의 번호를 바꾸는 스크립트는 아래 추가해두겠습니다.

private Camera cam;
private UniversalAdditionalCameraData cameraData;
private void Awake()
{
	cam = GetComponent<Camera>();
	cameraData = cam.GetComponent<UniversalAdditionalCameraData>();
	cameraData.SetRenderer(int number);
}

---

다음 포스트는 Terrain에 대해서 다룰 예정입니다. 기대해주세요.