언리얼엔진, 노트북 웹캠으로 리얼타임 합성하기
언린이의 버추얼 스튜디오 촬영 준비(5)
개요
리얼타임 엔진을 활용하여 노트북 웹캠으로 실시간 합성이 가능한지 알아본 프로젝트
목적
1. 언리얼 엔진(UE4)에서 사용하는 리얼타임 촬영 도구(기능)의 종류를 알아본다
2. 소박한 장비로도 최첨단 기술을 구현할 수 있을까? 노트북 웹캠 테스트
3. 리얼타임 촬영의 기본 지식을 습득
결과
교훈
1. 하고 싶어? 그럼 일단 해보자!
방송 일을 할 땐 예산이 모자라서 촬영 세팅 때마다 애 먹었는데, VRAR 산업은 그보다 더하다
뭐든지 비싼 장비가 필수적이라서 간단한 시뮬레이션 조차도 못한다.
그래도 지구는 둥글다고(?) 몇날며칠 고민하다 보면 길은 다 통한다.
내가 가진 작고 소중한 친구들로도 용의 꼬리 정도는 만드니
2. 파라미터화와 Over/Multifly 노드의 이해
(맨 밑에 공부한 내용을 자세히 적어두었다. 이번 프로젝트에서 제일 재밌었던 부분!)
다음 스터디
1. 판교 스튜디오에서 뮤직비디오 촬영을 마쳤다. 기획 단계에서 무엇을 준비해야 하는지, 언리얼 엔진에서 레벨을 제작할 때 무엇을 고려해야 하는지, 블루프린트 노드는 어떻게 준비해 가야 하는지를 배웠다. 이 경험을 브런치에 어떻게 연재할지 고민 중이다.
2. 내가 리얼타임 촬영에 매력을 느끼는 이유
'이 분야에서 일하고 싶다'라고 느낀 이유를 내가 본 뉴스와 핫한 작품들을 정리해서 공유하고 싶다.
3. 다른 산업에 N년간 현직자로 일했음에도 이 산업으로 넘어오려는 분들을 인터뷰하고 싶다.
그들은 어떤 현장에서 무슨 일을 하면서 살아왔을까? 어떤 전문성을 갖고 있을까?
나와 다른 이유로 이 산업에 매력을 느낀 걸까?
반짝반짝 빛나는 사람들을 더 많이 만나고 싶다.
한번 따라해보세요~
실시간 합성 플러그인 'Composure'를 활성화한다 (체크하면 재부팅 안내가 뜸)
한글판에선 '컴포셔 컴포짓 중'이란 창을, 영문판에선 'Composure Compositing' 창을 띄우고
마우스 우클>컴포 클래스 선택>일반 클래스의 Empty Comp Shot을 클릭
0010_comp 생성 확인
(모든 클래스에서는 많이 사용되는 기능들을 미리 세팅해 둔 컴포져가 있지만, 나는 어떻게 사용해야 할지 모르므로 빈 컴포로 진행한다)
0010_comp를 오른쪽 클릭하여 레이어 엘리먼트를 추가한다
cg 엘리먼트, media 엘리먼트를 추가하면 missing camera라는 창이 뷰포트 하단에 뜸
시네 카메라 액터를 배치하면 자동으로 cg엘리먼트에 연동되어, 시네 카메라가 비추는 배경이 화면에 뜬다
미디어 생성 : 웹캠과 언리얼을 연결시키자
콘텐츠 브라우저>우클>미디어>미디어 브라우저 생성
노트북 웹캠 켜주기!!
미디어 플레이어에 들어가서 왼쪽 상단에 작은 폴더 모양을 클릭>미디어>내가 킨 웹캠 선택
내 얼굴이 뿅 나옴
미디어 플레이어를 생성했을 때 같이 만들어진 미디어 텍스쳐에도 내 얼굴이 뜨는 걸 확인
미디어 텍스쳐를 Media 엘리먼트>디테일>Composure>input>MediaSource>Media Source에 넣는다
미디어 텍스쳐의 키 값을 빼주자!
Media 엘리먼트>디테일>Composure>Transform/Compositing Passes
기존에 세팅되어 있는 3가지 Transformpasses 있음
나는 어떻게 활용하는지 모르므로 다 삭제하고, 새로운 TransformPass를 하나 만듬
Multi Pass Chroma Keyer 선택>key Colors 선택하면 웹캠 창이 뜰 텐데, 배경 색을 클릭해주면 그 키 값이 빠진다
나같은 경우 집 벽지에서 촬영해서 아이보리 색으로 키값을 빼줬다
키값을 뺐는데 배경이 지저분하다고? 나같은 경우 벽에 붙어있는 사진들이 아이보리가 아니라서 키값이 빠지지 않았다. 원하면 키 색상을 추가해서 마저 키값을 빼줄 수도 있지만 추천 X머터리얼 제작 : 배경(cg엘리먼트)과 인물(media엘리먼트)를 합성해보자
새 머터리얼을 생성하고 머터리얼 도메인을 Postprocess로 설정
TextureSample 2D를 2개 생성하고 이름을 편의상 Me, Background라고 설정
Over노드로 이미시브 컬러에 연결
0010_comp>디테일>Composure>Transform/Compositing Passes>TransformPass>Material
제작한 머터리얼을 해당 루트에 삽입
입력 엘리먼트>Me에 media_plate1을 설정
입력 엘리먼트>Background에 cg_element1을 설정
합성 끝!!!
뷰포트 설정을 시네 카메라로 설정
뷰포트와 cg엘리먼트 화면이 같이 움직여서 보기 편하다
왜 Over 노드를 사용하는가?
Over 노드는 입력 A의 불투명도!!를 입력 B에 오버레이하여 두 노드를 합치는 기능이기 때문이다.
언리얼엔진 문서에 따르면, Over 노드는 입력 A를 취하고 A의 불투명도를 사용하여 입력 B로 오버레이하여 두 노드를 함께 혼합합니다. 노드는 flaot4 RGBA 벡터를 가져와 RGB 채널에 알파 값과 미리 곱할 것으로 예상합니다.
처음에 나는 A와 B를 합치면 거면 Multiply를 사용해도 똑같잖아?라고 생각했다.
바로 멀티플라이를 사용해보니, 웬걸 영상이 포토샵 오버레이로 찐하게 블렌드 된 모양새가 되었다.
다시 언리얼엔진 문서로 돌아가서 Over와 Multiply의 차이점을 고민해보니...
Multiply는 A와 B 값을 전부 곱해준다는 데에 포인트가 있다.
A의 R값과 B의 R값을 곱해주고, A의 G값과 B의 G값을 곱해주고 B도 마찬가지로 곱해준 다음
최종적으로 출력하는 노드였다.
반면, Over는 정말 포토샵의 오버레이 기능처럼 A의 검정색(알파값)을 빼주고 B와 합쳐준다는 것!
국비교육에서 포토샵 교육을 시켜준 이유를 날이 갈수록 이해하게 된다.
교육과정이 잘 짜여져 있다는 걸 새삼 느낀다. 넘 재밌다~
TextureSample 2D를 Multiply시킨 결과왜 TextureSample 2D를 사용하는가?
그동안 공부한 내용으로 생각해봤다.
우선 TextureSample을 사용해보니 평범한 텍스쳐 머터리얼이 되었다. 왜 이럴까?
TextureSample 2D를 자세히 보니까 Param이라고 써있더라.
TextureSample을 파라미터화 해보니 TextureSample 2D이 되었다.
머터리얼 인스턴스를 만들면 부모의 값을 인스턴스(자식)에서 바꾸기 위해서
부모의 노드를 파라미터화 하는데
텍스쳐 역시 같은 방법으로 응용할 수 있다는 거다!
Me를 Media엘리먼트와, Bacground를 cg엘리먼트와 연결시켰던 이유는
앞서 두 미디어 텍스쳐(웹캠)을 합성하기 위함이었다.
즉 이 머터리얼은 그 미디어 텍스쳐 2개를 하나로 합성시키기 위해서 파라미터화를 시켜줘야 했던 거다!
Texture Sample을 연결해줬을 때, 평범한 텍스쳐일뿐참고 자료
Math 표현식 | 언리얼 엔진 문서 (unrealengine.com)
실시간 합성 도구 | 언리얼 엔진 문서 (unrealengine.com)
