Chrome 동영상의 알파 투명도
이제 Chrome 31에서 WebM의 동영상 알파 투명도를 지원합니다.
즉, Chrome은 알파 채널이 있는 WebM (VP8 및 VP9)으로 인코딩된 '그린 스크린' 동영상을 재생할 때 알파 채널을 고려합니다. 즉, 웹페이지, 이미지 또는 다른 동영상 위에 배경이 투명한 동영상을 재생할 수 있습니다.
simpl.info/videoalpha에서 데모를 확인할 수 있습니다. 다소 초현실적이고 약간 거칠지만 (실제로) 아이디어는 전달됩니다.
알파 동영상을 만드는 방법
설명하는 방법에서는 오픈소스 도구인 Blender와 ffmpeg를 사용합니다.
- 밝은 녹색 커튼과 같은 단색 배경 앞에서 피사체를 촬영합니다.
- 동영상을 처리하여 투명도 데이터가 포함된 PNG 정지 이미지 배열을 빌드합니다.
- 동영상 형식 (이 경우 WebM)으로 인코딩합니다.
Adobe After Effects와 같이 동일한 작업을 수행하는 독점 도구도 있습니다. 이 도구는 더 간단할 수 있습니다.
1. 그린 스크린 동영상 만들기
먼저 후속 처리를 통해 배경의 모든 항목을 '삭제' (투명하게 만들 수 있는) 방식으로 피사체를 촬영해야 합니다.
가장 쉬운 방법은 화면이나 커튼과 같은 단색 배경 앞에서 촬영하는 것입니다. 녹색이나 파란색은 피부색과 다르다는 이유로 가장 많이 사용되는 색상입니다.
그린 스크린 동영상 (크로마키라고도 함) 촬영에 관한 온라인 가이드가 여러 개 있으며 그린 및 블루 스크린 배경을 구매할 수 있는 장소도 많습니다. 또는 크로마 키 페인트로 배경을 칠할 수도 있습니다.
그레이트 개츠비 VFX 릴은 그린 스크린으로 얼마나 많은 작업을 할 수 있는지 보여줍니다.
촬영을 위한 몇 가지 팁은 다음과 같습니다.
- 피사체에 배경과 같은 색상의 옷이나 물체가 없어야 합니다. 그렇지 않으면 최종 동영상에 '구멍'이 생깁니다. 작은 로고나 주얼리도 문제가 될 수 있습니다.
- 일관되고 고른 조명을 사용하고 그림자를 피하세요. 배경에서 나중에 투명하게 만들어야 하는 색상 범위를 최대한 작게 하는 것이 목표입니다.
- 여러 개의 확산 조명을 사용하면 그림자와 배경 색상 변화를 방지할 수 있습니다.
- 반짝이는 배경은 피하세요. 무광 표면은 빛을 더 잘 분산합니다.
2. 그린 스크린 동영상에서 원시 알파 동영상 만들기
다음 단계에서는 그린 스크린 동영상에서 원시 알파 동영상을 만드는 한 가지 방법을 설명합니다.
- 그린 스크린 동영상을 촬영한 후에는 Blender와 같은 오픈소스 도구를 사용하여 동영상을 알파 데이터가 포함된 PNG 파일 배열로 변환할 수 있습니다. Blender의 색상 키잉을 사용하여 그린 스크린을 삭제하고 투명하게 만듭니다. 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 동영상을 만드는 도구를 포함합니다.
--help를 사용하여 바이너리를 실행하여 alpha_encoder에서 지원하는 옵션 목록을 확인합니다.
4. Chrome에서 재생
Chrome에서 인코딩된 WebM 파일을 재생하려면 파일을 동영상 요소의 소스로 설정하기만 하면 됩니다.
어떻게 했나요?
Google 엔지니어 비그네스 벤카타수브라마니아어와 프로젝트에 참여한 경험에 관해 이야기했습니다. 그는 관련된 주요 문제를 요약했습니다.
- VP8 비트 스트림은 알파 채널을 지원하지 않았습니다. 따라서 VP8 비트 스트림을 중단하지 않고 기존 플레이어를 중단하지 않고도 알파를 통합해야 했습니다.
- Chrome의 렌더러가 알파가 있는 동영상을 렌더링할 수 없었습니다.
- Chrome에는 여러 하드웨어/GPU 기기의 렌더링 경로가 여러 개 있습니다. 알파 동영상 렌더링을 지원하기 위해 모든 렌더링 경로를 변경해야 했습니다.
동영상 알파 투명성에는 게임, 양방향 동영상, 공동작업 스토리텔링 (배경 동영상/이미지에 자체 동영상 추가), 대체 캐릭터 또는 줄거리가 있는 동영상, 오버레이 동영상 구성요소를 사용하는 웹 앱 등 흥미로운 사용 사례가 많이 있습니다.
즐거운 영화 제작 되세요. 알파 투명도로 멋진 무언가를 만들었다면 알려주세요.