리얼타임 컴포짓 퀵스타트

가장 기본적인 컴포짓은 세 가지 컴포로 이뤄지는데, 바로 CG 배경, 중간 미디어 (비디오) 플레이트 그리고 CG 전경입니다. 이 튜토리얼에서는 컴포셔를 사용하여 기본적인 세 가지 컴포를 빌드하는 방법을 살펴봅니다.

1 - 컴포셔 로드

단계

1. 컴포셔(Composure) 플러그인을 활성화합니다.

   

2. 버추얼 프로덕션(Virtual Production) 섹션 아래에 있는 창(Window) 메뉴에서 컴포셔 컴포짓(Composure Compositing) 메뉴를 클릭하여 컴포짓 트리 패널을 엽니다.

   

2 - 루트 컴포 엘리먼트 추가

다음으로 컴포짓 트리에 루트 엘리먼트를 추가합니다. 

단계

1. 컴포짓 트리 패널에서 우클릭 후 메뉴에서 새 컴포 생성(Create New Comp) 을 선택합니다. 그런 다음 컴포 클래스 선택(Pick a Comp Class) 대화창에서 빈 컴포 샷(Empty Comp Shot) 을 선택합니다. 

   

   이 엘리먼트는 최종 컴포짓을 나타내기 때문에 아무것도 즉시 렌더링하지 않습니다. 이 엘리먼트는 다른 모든 엘리먼트를 결합하는 역할을 합니다.

   이식성을 위해 엘리먼트가 자체 하위 레벨에 추가되어 있는지 확인하세요. 엘리먼트는 레벨 액터이므로 다른 맵에서 컴포짓 트리를 로드하여 실행할 수도 있습니다.

3 - 미디어/비디오 엘리먼트 추가

상위 레벨 컴포 엘리먼트가 갖춰졌다면 이제 자손 엘리먼트를 추가해야 합니다. 자손 엘리먼트는 컴포짓에 대해 부모에 피딩합니다.

단계

1. 컴포짓 트리에 미디어 플레이트(Media Plate) 를 추가합니다.
   컴포짓 트리 패널의 컴포 엘리먼트를 우클릭하고 메뉴에서 레이어 엘리먼트 추가(Add Layer Element) 를 선택합니다. 엘리먼트 타입을 선택하라는 알림이 표시되면 미디어 플레이트(Media Plate) 를 선택합니다.

   

   미디어 소스가 없는 경우 미디어 플레이트 엘리먼트는 비어 있게 됩니다. 하지만 디폴트 스틸 이미지를 위의 GIF에서와 같이 게임 환경설정 파일에 구성할 수 있습니다.
   [/Script/Composure.ComposureGameSettings] StaticVideoPlateDebugImage="/Game/Path/To/My/TextureAsset"

2. 미디어 소스(Media Source) 를 설정합니다. 
   기본적으로 미디어 엘리먼트는 스트리밍 비디오 같은 미디어 소스에 연결되어 있지 않습니다. 하지만 엘리먼트의 '디테일(Details)' 패널에서 미디어 텍스처를 입력으로 작동하도록 적용할 수 있습니다. 새 미디어 엘리먼트를 선택합니다. 그런 다음 '디테일' 패널의 컴포셔 > 입력(Inputs) 아래에서 미디어 소스 섹션을 찾습니다. 미디어 소스(MediaSource) 텍스처 프로퍼티가 비어 있는 것으로 표시됩니다.

   

   캡처 카드를 통해 언리얼 엔진에 라이브 비디오 피드를 피딩하면 미디어 텍스처(Media Texture) 가 생성됩니다. 따라서 정확히 동일한 방식으로 컴포짓 시스템에 연결할 수 있습니다. 더 자세한 구성 방식에 대해서는 언리얼 엔진에서 미디어 번들로 캡처 카드를 사용하는 방법을 참고하세요.

3. 크로마 키 컬러(Chroma Key Color) 를 환경설정합니다.
   미디어 플레이트 엘리먼트는 일련의 미리 정의된 트랜스폼 패스를 갖추고 있습니다. 이러한 패스는 미디어 이미지를 컴포짓하기 전에 조정하는 데 사용됩니다. 그러한 패스 중 첫 번째는 바로 크로마 키 지정(Chroma Keying) 에 대한 것입니다. 크로마 키 컬러 를 선택하려면 트랜스폼 패스(Transform Passes) 에서 키 지정 패스로 이동하여 크로마 키 지정 을 찾습니다. 크로마 키 지정 를 펼치면 키 컬러(Key Colors) 프로퍼티를 찾을 수 있습니다. 컬러 박스 옆 색 선택 툴 버튼으로 새 키 컬러 를 추가합니다.

   

   색 선택 툴 버튼을 클릭하면 큰 색 선택 툴 창이 열려 컬러를 선택할 수 있습니다. 컬러를 선택하려면 이미지 아무 곳에나 마우스를 클릭하여 해당 픽셀을 샘플링합니다. 클릭하고 드래그하면 함께 선택된 여러 픽셀들의 평균값을 구할 수 있어 보다 균등한 크로마 컬러를 구할 수 있습니다. 결과물이 만족스러우면 수락(Accept) 을 클릭합니다.

   키 컬러는 원하는 만큼 추가할 수 있습니다. 따라서 백드롭에 여러 녹색 셰이드가 있는 경우와 컬러 하나만 키 지정하는 것으로는 부족한 경우에 도움이 됩니다. 하지만 키 컬러 를 추가할 떄마다 엘리먼트는 전체 패스를 수행하여 목록에 있는 컬러마다 머티리얼에 키를 지정하는 작업을 한 번씩 실행합니다. 따라서 퍼포먼스 문제가 생길 수도 있습니다.

   키 컬러 외에도 키 지정을 완벽하게 조정하는 데 사용할 수 있는 세팅은 다양합니다. 자세한 내용은 패스 내 머티리얼 파라미터(Material Parameters) 섹션을 참고하세요.

   

   내장 키어는 선형 컬러 스페이스 이미지를 필요로 합니다. 이미지가 logC 같은 다른 컬러 포맷인 경우 키 지정이 완료되기 전에 컬러 스페이스 트랜스폼을 추가해야 합니다. 또는 키어를 자체 머티리얼로 교체할 수도 있습니다.

   서브젝트에서 녹색 바운스를 제거하는 용도로는 크로마 키 패스(Chroma Keying Pass) 뿐만 아니라 디스필 패스(Despill Pass) 가 별도로 존재합니다. 크로마 키와 디스필에 대한 자세한 내용은 이 블로그 포스트를 참고하세요.

4. 결과를프리뷰합니다.
   경우에 따라 키어가 수행하는 작업이 제대로 되고 있는지 파악하기가 어려울 수 있습니다. 모든 엘리먼트에 대해 프리뷰 창을 열고 해당 이미지에 대한 각 컬러 채널을 살펴볼 수 있습니다.

   

   키 선택 툴(Key Picker) 창과 레벨 에디터(Level Editor) 프리뷰 패널 역시 이 기능을 갖추고 있습니다.

   프로세스의 이 단계에서는 결과물이 완벽하지 않아도 걱정할 필요는 없습니다. 컴포짓된 씬 전체를 프리뷰할 때 언제든지 조정할 수 있기 때문입니다.

4 - CG 엘리먼트 추가

미디어 엘리먼트를 추가하는 것과 마찬가지로 전경 및 배경 레이어에 엘리먼트를 추가해야 합니다.

단계

1. CG 레이어(CG Layer) 를 추가합니다.
   트리 패널의 최상위 컴포 엘리먼트를 우클릭하고 메뉴에서 레이어 엘리먼트 추가 를 선택한 다음 CG 레이어 를 고릅니다.

   

   CG 엘리먼트 두 개를 추가합니다. 각각 전경 및 배경 오브젝트용으로 'fg_element'와 'bg_element' 같이 적절하게 명명합니다.

2. 씬 카메라에 연결합니다.
   CG 엘리먼트는 큐를 가져올 월드 내 카메라를 필요로 하며, 이 카메라는 렌더링할 뷰 포인트를 알려줍니다. 씬에 카메라가 없는 경우 CG 엘리먼트에서 '카메라 누락' 경고 메시지를 표시합니다. 이 문제를 해결하려면 씬에 카메라 액터를 하나 추가하면 됩니다.

   

   씬에 카메라가 여러 개 있는 경우 해당 엘리먼트의 '디테일' 패널에서 입력(Input) > 카메라 소스(Camera Source) 로 이동하여 어떤 카메라를 레퍼런스할지 지정할 수 있습니다.

3. 액터 레이어를 구성합니다.
   이제 CG 엘리먼트가 전경에 하나, 배경에 하나 모두 두 개가 갖춰졌으므로 각각에 렌더링되어야 하는 씬 액터를 지정해야 합니다.
   여기에서는 레벨 에디터의 레이어 시스템을 활용합니다. 테스트 씬에서는 큐브, 원뿔, 구체, 원기둥 같은 기본적인 프리미티브를 몇 개 추가했습니다. 여기에서는 원뿔과 원기둥은 전경에, 나머지는 전부 배경에 배치하려고 합니다. 먼저 원뿔과 원기둥에 대해서만 에디터 레이어를 생성합니다.

   

   이제 전경 엘리먼트(fg_element)에서 컴포셔 > 입력 으로 이동하여 액터 캡처(Capture Actors) 프로퍼티를 찾아 여기에 항목을 하나 추가합니다. 이 액터 캡처(Capture Actors) 목록은 어떤 CG 엘리먼트를 렌더링할지 지정합니다.

   

   새 캡처 액터 항목에서 ActorSet 프로퍼티를 방금 만든 ConeAndCylinder 레이어에 설정합니다. 항목의 InclusionType 이 포함(Include) 으로 설정되어 있기 때문에 해당 액터들만 렌더링합니다.

   프로퍼티	설명
   포함(Include)	지정된 레이어의 액터만 렌더링합니다.
   제외(Exclude)	지정된 레이어의 액터를 제외한 모든 항목을 렌더링합니다.

   캡처 액터 레이어는 엘리먼트에 원하는 만큼 추가할 수 있습니다. '포함'과 '제외'는 섞거나 통일해도 됩니다.
   배경 엘리먼트의 경우 ConeAndCylinder 레이어를 제외하고 모두 필요합니다. 따라서 동일한 레이어를 사용하되 InclusionType 을 제외 로 변경합니다.

   CG 렌더가 컴포짓에 적절한 오파시티를 갖추려면 '프로젝트 세팅(Project Settings'의 포스트 프로세싱에서 알파 채널 지원 활성화(Enable alpha channel support in post processing) 를 선형 컬러 공간만(Linear color space only) 으로 활성화합니다.

   이미지를 클릭하면 확대됩니다.

5 - 컴포짓 머티리얼 구성

이제 최상위 레벨 컴포, 미디어 플레이트 , CG 엘리먼트 두 개 총 4개의 엘리먼트가 갖춰졌으므로 모두 레이어링하여 컴포를 제작할 수 있습니다. 최상위 레벨 컴포 엘리먼트는 다른 모든 엘리먼트를 모두 병합하는 역할을 합니다. 컴포 엘리먼트에 트랜스폼 패스를 추가하고 나머지 세 레이어를 컴포짓하도록 구성할 것입니다.

단계

1. 컴포 트랜스폼 패스를 추가합니다.
   컴포 엘리먼트를 선택하고 '디테일' 패널에서 트랜스폼 패스 프로퍼티를 찾습니다. 트랜스폼 패스 목록에 항목을 추가합니다. 디폴트 항목은 지금 필요한 커스텀 머티리얼 패스(Custom Material Pass) 입니다.

   

2. 컴포 머티리얼을 생성합니다.

   • 새 패스는 렌더링에 사용할 머티리얼을 필요로 합니다. 패스의 '디테일' 패널을 펼쳐 머티리얼(Material) 프로퍼티에 새 머티리얼을 생성합니다.
   
   • 새 머티리얼을 포스트 프로세스(Post Process) 머티리얼로 설정합니다. 그러면 결과를 정확한 채널로 출력할 수 있게 됩니다.
   
   • 새 머티리얼은 하위 엘리먼트 세 개에 각각 텍스처 샘플러를 필요로 합니다. 이렇게 하려면 텍스처 샘플러 파라미터 세 개를 생성하고 각각 자손 엘리먼트와 일치하는 이름을 지어 줍니다. 이 텍스처 파라미터는 세 자손 엘리먼트에서 나온 결과로 자동으로 채워집니다. 엘리먼트 세 개를 합치는 데는 Over 노드 몇 개만 있으면 됩니다. Over 노드는 입력 A 를 취해, 입력 A 의 알파를 사용하여 B 에 레이어링합니다. 미디어 플레이트는 이 CG 레이어 둘 사이에 끼워야 합니다.
   

3. • Over 노드 하나를 설정하여 미디어 플레이트 A 가 배경 엘리먼트 B 에 렌더링되도록 합니다.

   • 다음은 Over 노드의 결과물을 사용하여 다른 Over 노드의 B 에 연결합니다.

   • 마지막으로 fg 엘리먼트를 맨 위에 놓고 두 번째 Over 노드의 A 에 연결합니다.

   • 두 번째 Over 노드의 출력은 머티리얼의 이미시브 컬러(Emissive Color) 채널에 연결되어야 합니다.

   • 저장하고 머티리얼을 적용합니다.

컴포짓 창에서 결과를 다시 검토합니다. 엘리먼트 세 개가 컴포짓된 단일 이미지가 있어야 합니다.

Over 노드에는 float4 입력이 필요하므로 상위 RGB 핀이 아니라 텍스처 샘플러의 RGBA 출력 핀을 사용합니다.

Over 노드는 입력 A 의 알파를 블렌딩에 사용합니다. 기본적으로 프로젝트는 포스트 프로세스 파이프라인을 통해 알파 데이터를 연결하도록 구성되어 있지 않습니다. 따라서 CG 레이어를 작동시키려면 이 프로젝트 세팅을 활성화시켜야 합니다.

이미지를 클릭하면 확대됩니다.

6 - 컴포 출력

에디터에서의 컴포 프리뷰가 만족스러운 경우 이 마지막 단계는 무시해도 좋습니다. 하지만 컴포의 결과물을 디스크로 라우팅하거나 캡처 카드를 통해 실행해야 하는 경우 출력 패스(Output Pass) 를 사용해야 합니다.

이 샘플에서는 캡처 카드를 통해 컴포를 브로드캐스트합니다.

단계

1. 최상위 레벨 컴포 엘리먼트의 '디테일' 패널을 선택하고 출력(Outputs) 프로퍼티를 찾아 목록에 항목을 하나 추가합니다. 디폴트는 지금 필요한 미디어 캡처(Media Capture) 입니다.

   

2. 새 출력 패스에서는 패스의 캡처 출력(Capture Output) 프로퍼티에서 타깃을 지정한 다음 이에 대한 새 에셋을 생성해야 합니다.

   

   캡처 타깃에 이 에셋을 환경설정하면 모든 작업이 끝난 것입니다. 컴포 엘리먼트는 브로드캐스트를 시작합니다.

시퀀서 사용하기

언리얼 엔진에서 제공하는 시네마틱 에디터인 시퀀서를 사용하여 컴포와 AOV를 렌더링할 수도 있습니다. 자세한 내용은 시퀀서를 사용한 리얼타임 컴포짓 페이지를 참고하세요.