[📜일지] 프리렌더링 2D 배경과 3D 캐릭터 합치기

[아무이네(elbow4873)]

원래 만들던 겜에서 벗어나서 마음 가는걸 사이드로 만들어보기로 하면서 일지를 쓰기로 했어요.

여기에는 처음 쓰는 글이고 필력도 없지만 잘 봐주세요.

일단 정보글이 아니라 일지기도 하고 잡다한건 넘어가면서 설명할게요.

그리고 본 글에서는 MoonWorks 프레임워크를 사용했어요. 

원래는 유니티 쓰려고 했는데 유니티 렌더 파이프라인이랑 쉐이더랩으로 이렇게 하는법을 공부하기 싫었어요.

구조적으로 마음에 안들고 이쪽이 더 재밌기도 하고

일단 들어가기 전 깊이버퍼를 아주 짧게 설명할게요.

깊이 버퍼는 기본적으로 픽셀마다 0.0부터 1.0까지로의 값으로 이루어진 흑백 이미지에요.

여기서 픽셀의 값은 기본적으로 멀수록 1.0에 가깝고 가까울수록 0.0에 가까워요.

프로그램이 렌더링을 할 때 어떤 픽셀이 앞에 그려져야 하는지, 아니면 가려져서 그려지면 안 되는지 확인할 때

이 값을 이용해서 확인하는거에요.

더 얘기할 것도 많지만 깊이 버퍼는 대략 이런거다만 알아두시면 될 것 같아요.

그럼 넘어가서 위에서 말한걸 생각해보면, 사전에 준비한 2D 이미지라도 깊이 버퍼가 있다면

일일이 이미지를 잘라내면서 고생 안해도 3D마냥 깊이를 표현할 수 있다는게 되요.

그래서 오늘 간단하게 보여드릴 거는 그걸 이용해서 2D 배경이 3D 캐릭터랑 어우러지는 것을 보여드릴 거에요.

우선 기본이 되는 3D가 없으면 안되니 간단하게 블렌더로 만들었어요.

이제 렌더링 프로그램마다 다르겠지만 블렌더 같은 경우에는

여기에 있는 Z를 패스 데이터에 포함시키면 픽셀의 값이 0부터 1까지가 아닌, 카메라부터 그 픽셀까지의 거리를 표현한 이미지를 같이 출력시켜줘요.

Mist값은 0부터 1까지 압축시킨채로 내보내주지만 컨트롤하기가 귀찮아서 여기서는 Z를 쓸거에요.

(그리고 Depth값 이미지 출력은 EXR을 사용했습니다. 뭘 잘못 했는지 PNG로 출력했었는데도 픽셀값이 정확하지가 않았어요.)

그래서 나온 깊이 버퍼를 열어보면 이렇게 생겼어요.

아까 말했듯이 카메라부터 픽셀까지의 '거리'값이기에 대부분 1을 넘어가기에 그냥 보면 이렇게 하얀색 이미지로만 보여요.

이제 이걸 게임 안에서 0부터 1까지의 거리로 바꾸어 줄거에요.

우선 그전에 한가지 해야 할게 있는데 블렌더 내부의 카메라랑 프로그램 내에서 쓰는

카메라의 위치, 각도, FOV값, Z Near, Z Far값등을 통일시켜줘야 해요.

여기서 Z Near, Z Far값은 카메라의 최소, 최대 렌더 거리를 뜻한다고만 생각해주세요.

그럼 이제 저 두 이미지를 프로그램으로 가져가서 써야해요.

여기서부터는 RenderDoc 이미지랑 설명할게요.

우선 첫번째 렌더패스에서는 아까의 두 이미지를 써서

컬러 버퍼에는 렌더링한 이미지를,

깊이 버퍼에는 아까 같이 추출한 깊이 이미지를 써서 그대로 값을 씌워줬어요.

여기서 아까 0부터 1이 아닌 거리값을 추출한 이미지였기에 0부터 1까지 맞춰주는 과정을 거쳐야 해요.

값 이름이 정직하지 않지만 대략 이런식으로 0부터 1까지의 값으로 바꿔줬어요.

이제 그 다음 렌더패스에서는 캐릭터라던가 다른 3D 모델이라던거 이것저것 평소처럼 렌더링을 해줘요.

여기서는 간단하게 하나만 넣었어요.

그러면 일단 끝이에요. 엄청 간단하지 않나요. 말 그래도 깊이값을 써주기만 하면 끝인 작업이라 복잡한것도 없어요.

그러면 이렇게 3D 모델이 2D 이미지 배경이 3D인것마냥 깊이값 테스트를 해주는 것들을 볼 수 있어요.

여기까지만 있으면 별로니까 저기 있는 그림자도 어떻게 했는지 간단하게만 훑고 갈게요.

깊이 버퍼는 카메라와의 거리값을 0부터 1까지 나타낸거기에 깊이 버퍼만으로도 픽셀의 월드 위치를 재구성하는게 가능해요.

우리가 픽셀을 그릴 때 행렬들을 곱해서 월드 위치를 화면 내의 위치로 바꾸는 과정을 반대로 하면 월드 위치를 다시 얻을 수 있어요.

대략 계산은 이런식이네요. 그럼 이제 월드 위치값을 알았으니 여기부터는 평소처럼 그림자 맵핑을 하는 과정을 그대로 따라갔어요.

그냥 평소 그림자 맵핑하고 같은 방식으로, 이렇게 그림자 맵을 렌더링하고 월드 위치를 그림자 맵의 픽셀 위치로 광원의 행렬값을 이용해서 바꾼 다음

픽셀의 Z값과 그림자 맵의 Z값을 대조해서 그림자에 가려져야 하는지 안가려져야 하는지 구해서 어둡게 해준거에요.

여기서 단점이 있다면 그림자맵에는 2D 배경 오브젝트의 Z값이 없기에 그림자가 오브젝트를 뚫고 드리운다는거에요.

이런식으로. 이거는 주변에서 그림자맵도 미리 구하는게 어떠냐는 조언을 받았었지만 그건 정적광원에만 해당되기에 일단은

라이트맵도 준비해서 그림자를 지우고 알아서 잘 숨기는 쪽으로 갈 것 같아요.

배경을 잘 그릴 수 있다면 이런식으로 위에 덧그려서 그림이 3D인것처럼 표현할 수도 있겠지만 추구하는 방향이 아니기에

저는 이렇게 안할 것 같네요. 그림도 못그리는 편이기도 하고.

하나 알려드리자면 디스코 엘리시움이 같은 방식에다가 위에 이렇게 덧그려서 표현한 쪽에 속해요.

잘 가린 편이지만 아까 말한 그림자가 2D 배경인 오브젝트를 뚫는것도 그대로 확인하실 수 있어요.

오늘날에 와서는 할 이유도 없고 굳이 이런걸 싶지만 재밌을 것 같아서 올렸어요.

여기서는 블렌더를 썼지만 충돌처리할 지오메트리 제외하면 앞으로는 Bryce3D로 엄청 옛날 렌더링 느낌 내는식으로 가고싶어요.

간단하게 끝날거 엄청 길게 설명한 것 같지만 봐주셔서 감사해요.

궁금하신거 남겨주시면 저 바보라 질문 대답 못해줘요.

남는 시간으로 만드는 부게임 같은거라 어떻게 될진 모르겠지만 잘 지켜봐줘요.

[비월(lunar1228)]

셰이더 코드 으렵다...

[Indie 1(123.214)]

오 재밌네요.. 다만 카메라가 고정되어야 한다는게 좀 제약이 쎄네요 - dc App