[고도엔진 게임 개발 공부] 뷰포트 Viewport 분할을 통한 레이어 마스크 및 cull mode 지정 방법

Viewport 분할을 통한 레이어 마스크 처리 방법

고도 엔진에서는 직접 객체를 렌더링할 수는 없기 때문에 제공되는 방법을 통해서 렌더링되는 텍스처를 조절하고 객체를 조절해야하는 것으로 보인다. 예를 들어 GL에서는 같은 객체에 대해서 두번 쉐이딩을 하거나, 서로 다른 메트리얼로 쉐이딩을 하기 위해 렌더링을 두 번 해주었으면 되었으나, 여기서는 그런 작업이 따로 없는 것으로 보인다. 예를 들어 그림자 맵 처리를 위해서 배경을 제외한 객체만 렌더링해야 할 때, 다른 객체는 제거하여 렌더링하였으나, 여기서는 Layer mask 개념을 사용해서 처리할 수 있을 것으로 보인다. 뷰 포트를 두 개 만들어주고 각각의 객체에 대해서 별개 렌더링하는 방법이다.

결과적으로 똑같은 하나의 장면을 두 번 렌더링하기 위해서 뷰 포트에 각각 불러오고 뷰 포트의 컬링 수준을 조절하면 된다.

우선 메인 게임 공간에, 보라색 배경이 존재하고 오브젝트 객체 2개가 존재한다고 가정한다. 위에서는 캐릭터 그림을 실제 오브젝트 객체 2개라고 가정한다. 여기서 그림자 처리를 위해서 캐릭터만 처리된 텍스처가 필요하다고 가정한다. 먼저 게임 월드는 그대로 내비두고 장면을 처리할새로운 월드를 만든다.

world2 장면은 실제 게임 구성요소가 존재하는 장면이 아니라, 화면을 가져와서 그대로 플레이어 컴퓨터 모니터에 띄워주는 역할을 하는 디스플레이용 장면인 것이다. 이 공간은 Control 을 루트 노드로 생성한다.

그리고 이 공간 안에 게임 전체를 표시하는 ForeGroundView 를 생성하고, 객체만을 렌더링하는 BackgroundView를 생성한다. 이 공간에 각각 우리 게임 월드를 렌더링하기 위해서 단순히 게임 월드 tscn 파일을 뷰 포트에 드래그하면 안에 압축이 해제되듯 장면이 임포트 된다. 즉 장면 안에 또 다른 장면을 임포트한 것 이다.

각각 두 개의 뷰는 동일한 장면을 임포트했기 때문에 미리 보기에 보여지는 장면은 동일하다. 하지만 뷰 포트 자체는 가상의 뷰 공간이기 때문에 화면에 직접 띄워지는 것은 아니다. 게임의 전체 표시를 위한 ForegroundView 뷰포트는 화면에 뿌려줘야 하므로, Control 노드 하위에 SubViewportContainer 을 생성하여 부착하고, 그 안에 ForegroundView를 넣어준다.

즉 위 이미지에서, ForegroundView 게임 전체를 렌더링하는 뷰 포트는 SubviewportContainer 에 의해 장면에 그대로 뿌려지고 있는 것이다. 화면 크기 조절을 하면 자동으로 맞춰지도록 앵커 프리셋을 공간 전체로 변경하고, 늘리기 모드를 활성화 한다.

즉 컨테이너는 화면 크기에 맞춰서 자동으로 조절될 것이다.

한편 뷰 포트의 인스펙터 창을 보면 Canvas Cull Mask라는 것이 보인다. 레이어에서 어떤 레이어를 렌더링할 것인지에 대한 옵션이다. 현재는 각 뷰 포트가 모든 넘버가 선택되어 있다. 잠시, 게임 월드 공간 장면으로 돌아와서 각 객체의 Visibility Layer을 본다.

각 객체는 기본적으로 '1'번으로 지정되어 있는데, 1번 Cull Mode가 활성화되는 경우에만 이 객체를 렌더링한다는 의미이다.

예를 들어 2번으로 조절하는 경우, 2번에 대해 cull mode를 지정한 뷰포트에서만 렌더링된다.

나의 경우, 우선 게임 월드 공간에서 부모 노드, 각 렌더링되는 객체는 1,2 번 둘다 체크해주고, 보라색 배경은 `1`번 레이어만 체크한다. 그리고 장면의 뷰포트에서 게임 전체를 렌더링하는 ForegroundView 뷰포트는 1, 2번 둘다 cull mode 를 체크하고, BackgroundView 뷰포트는 2번 cull mode만 체크하면 BackgroundView에서는 배경이 렌더링되지 않는 것을 확인할 수 있다.

이 뷰 포트는 나중에 쉐이더로 가져와 작업할 수 있다.

한편 장면 정보만 그대로 가져온 것이기 때문에 카메라 위치 등은 동기화되지 않는다. 이러한 부분은 소스코드로 동기화해야하는 것으로 보인다. 게다가 여기서 각 게임 월드 공간을 두번 인스턴스화 했으므로 사실상 ForegroundView 뷰포트의 월드와 BackgroundView 뷰포트에 추가된 월드는 궁극적으로 서로 다른 월드이다. 보이는 것만 같을뿐이다. 이는 동적인 처리를 수행할 때 문제가 발생할 수 있으므로 하나만 로드한 뒤 참조하는 형식으로 코드를 변경해줘야 한다. 이 부분은 다음 게시글에서 수행하는 것으로 한다.