Chrome 동영상의 알파 투명도
이제 Chrome 31에서는 WebM에서 동영상 알파 투명도를 지원합니다.
즉, Chrome은 알파 채널을 통해 WebM (VP8 및 VP9)으로 인코딩된 '그린 스크린' 동영상을 재생할 때 알파 채널을 고려합니다. 즉, 웹페이지, 이미지 또는 다른 동영상에서 배경이 투명한 동영상을 재생할 수 있습니다.
simpl.info/videoalpha에서 데모를 볼 수 있습니다. 말 그대로 다소 비현실적이고 약간 다듬어졌지만 어느 정도는 이해가 되셨을 것입니다.
알파 동영상 만드는 방법
여기서 설명하는 방법은 오픈소스 도구인 Blender와 ffmpeg를 사용합니다.
- 밝은 녹색 커튼과 같은 단색 배경 앞에서 피사체를 촬영합니다.
- 동영상을 처리하여 투명도 데이터가 포함된 PNG 정적 이미지의 배열을 빌드합니다.
- 동영상 형식 (이 경우 WebM)으로 인코딩합니다.
동일한 작업을 실행하는 Adobe After Effects와 같은 독점적 도구가 더 간단할 수도 있습니다.
1. 그린 스크린 동영상 만들기
먼저, 후속 처리를 통해 배경의 모든 요소를 '삭제' (투명하게) 할 수 있는 방식으로 피사체를 촬영해야 합니다.
가장 쉬운 방법은 스크린이나 커튼과 같이 단일 색상 배경 앞에서 촬영하는 것입니다. 녹색 또는 파란색은 가장 자주 사용되는 색상이며, 주로 피부색과 차이가 있기 때문입니다.
그린 스크린 동영상 (크로마 키라고도 함) 촬영에 관한 여러 온라인 가이드 온라인과 녹색 및 블루 스크린 배경화면을 구매할 수 있는 많은 장소가 있습니다. 또는 크로마 키 페인트로 배경을 칠할 수 있습니다.
The Great Gatsby VFX 릴은 그린 스크린으로 얼마나 많은 성과를 낼 수 있는지 보여줍니다.
촬영을 위한 팁:
- 피사체에 배경과 색상이 같은 옷이나 물체가 없어야 합니다. 그렇지 않으면 최종 동영상에서 '구멍'으로 표시됩니다. 작은 로고나 장신구도 문제가 될 수 있습니다.
- 일관되고 균일한 조명을 사용하고 그림자를 피합니다. 목표는 배경에 가능한 한 최소 범위의 색상을 만들어 나중에 투명하게 만들어야 하는 것입니다.
- 확산 광원을 여러 개 사용하면 그림자와 배경 색상 변화를 피하는 데 도움이 됩니다.
- 반짝이는 배경은 피하세요. 무광택 표면은 빛을 더 잘 분산시킵니다.
2. 그린 스크린 동영상에서 원시 알파 동영상 만들기
다음 단계에서는 그린 스크린 동영상에서 원시 알파 동영상을 만드는 한 가지 방법을 설명합니다.
- 그린 스크린 동영상을 촬영했다면 Blender와 같은 오픈소스 도구를 사용하여 알파 데이터가 있는 PNG 파일 배열로 동영상을 변환할 수 있습니다. 블렌더의 컬러 키를 사용하여 녹색 화면을 삭제하고 투명하게 만듭니다. PNG는 필수가 아니며 알파 채널 데이터를 보존하는 형식은 괜찮습니다.
ffmpeg와 같은 오픈소스 도구를 사용하여 PNG 파일의 배열을 원시 YUVA 동영상으로 변환합니다.
ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw또는 다음과 같은 ffmpeg 명령어를 사용하여 파일을 WebM으로 직접 인코딩합니다.
ffmpeg -i image%04d.png output.webm
오디오를 추가하려면 다음과 같은 명령어로 ffmpeg를 사용하여 mux할 수 있습니다.
ffmpeg -i image%04d.png -i audio.wav output.webm
3. 알파 동영상을 WebM으로 인코딩
원본 알파 동영상은 두 가지 방법으로 WebM으로 인코딩할 수 있습니다.
ffmpeg를 사용한 경우: WebM 알파 동영상을 인코딩하기 위한 ffmpeg 지원을 추가했습니다.
알파 데이터가 포함된 입력 동영상에 ffmpeg를 사용하고 출력 형식을 WebM으로 설정하면 인코딩이 사양에 따라 올바른 형식으로 자동 처리됩니다. (참고: 현재 이 작업을 실행하려면 git 트리에서 최신 버전의 ffmpeg를 다운로드해야 합니다.)
샘플 명령어:
ffmpeg -i myAlphaVideo.webm output.webmwebm-tools 사용:
git clone https://chromium.googlesource.com/webm/libvpxwebm-tools는 WebM 관련 간단한 오픈소스 도구 모음으로, WebM 프로젝트 작성자가 유지관리하며 알파 투명도의 WebM 동영상을 만들기 위한 도구가 포함되어 있습니다.
alpha_encoder에서 지원하는 옵션 목록을 보려면
--help로 바이너리를 실행합니다.
4. Chrome에서 재생
Chrome에서 인코딩된 WebM 파일을 재생하려면 해당 파일을 동영상 요소의 소스로 설정하기만 하면 됩니다.
어떻게 된 건가요?
Google 엔지니어인 Vignesh Venkatasubramanian은 이 프로젝트에 대한 자신의 연구에 관해 이야기를 나누었습니다. 그는 관련된 주요 과제를 요약했습니다.
- VP8 비트스트림은 알파 채널을 지원하지 않았습니다. 따라서 VP8 비트스트림을 중단하지 않고 기존 플레이어를 중단하지 않고 알파를 통합해야 했습니다.
- Chrome의 렌더기는 알파로 동영상을 렌더링할 수 없었습니다.
- Chrome에는 여러 하드웨어/GPU 기기를 위한 여러 렌더링 경로가 있습니다. 알파 동영상 렌더링을 지원하도록 모든 렌더링 경로를 변경해야 했습니다.
동영상 알파 투명도에 관한 흥미로운 사용 사례는 게임, 양방향 동영상, 협동 스토리텔링 (배경 동영상/이미지에 내 동영상 추가), 대체 캐릭터나 줄거리가 있는 동영상, 오버레이 동영상 구성요소를 사용하는 웹 앱 등입니다.
즐겁게 영화를 만들어 보세요. 알파 투명도로 놀라운 결과물을 만들고 있다면 Google에 알려 주세요.