Chrome 동영상의 알파 투명도

Chrome 동영상의 알파 투명도

이제 Chrome 31에서 WebM의 동영상 알파 투명도를 지원합니다.

즉, Chrome에서 'green screen'을 재생할 때 알파 채널을 고려합니다. 와 함께 WebM (VP8VP9)으로 인코딩된 동영상 알 수 있습니다. 따라서 웹페이지, 이미지 또는 다른 동영상에서 배경이 투명한 동영상을 재생할 수 있습니다.

이 사이트의 데모: simpl.info/videoalpha 약간 초현실적이고 말 그대로 가장자리가 약간 거칠지만 이해할 수 있습니다.

알파 동영상 만드는 방법

여기서 설명하는 방법에서는 오픈소스 도구인 Blender와 ffmpeg를 사용합니다.

  1. 밝은 톤의 배경과 같이 단색의 배경 앞에서 피사체를 촬영하세요. 초록색 커튼으로 장식되어 있습니다.
  2. 동영상을 처리하여 투명도의 PNG 스틸 이미지 배열을 만듭니다. 데이터를 수집하는 데 사용됩니다
  3. 동영상 형식 (이 경우 WebM)으로 인코딩합니다.

현재 Adobe After Effects와 같은 독점 도구를 사용해 동일한 작업을 수행할 수도 있습니다. 간소화합니다.

1. 그린 스크린 동영상 만들기

우선, 사진 속의 모든 요소가 자연적으로 표현되는 방식으로 배경을 '삭제'할 수 있습니다. 처리되어 투명해집니다.

가장 쉬운 방법은 단색 배경 앞에서 촬영하는 것입니다. 빛을 냅니다. 녹색 또는 파란색이 가장 자주 사용되는 색상이며, 주로 피부색과 다르기 때문입니다.

그린 스크린 동영상 촬영에 대한 여러 가이드가 크로마키)과 친환경 제품을 구매할 수 있는 많은 장소에서 표시될 수 있습니다. 또는 크로마 키 페인트로 배경을 칠할 수 있습니다.

위대한 개츠비 VFX 영상은 그린 스크린으로 얼마나 많은 것을 달성할 수 있는지 보여줍니다.

촬영 팁:

  • 피사체가 동일한 색상의 옷이나 물체를 사용하지 않도록 합니다. 포함하지 않을 경우 '구멍'으로 표시됩니다. 설명하겠습니다. 작은 로고나 장신구도 문제가 될 수 있습니다.
  • 일관되고 균일한 조명을 사용하고 그림자를 피하세요. 목표는 배경에서 가능한 가장 작은 범위의 색상 범위를 지정하여 투명하게 만들어야 합니다
  • 확산된 광원을 여러 개 사용하면 그림자와 배경 색상을 방지하는 데 도움이 됩니다. 있습니다.
  • 반짝이는 배경은 피하세요. 매트한 표면에서 빛을 더 잘 확산시킬 수 있습니다.

2. 그린 스크린 동영상에서 원본 알파 동영상 만들기

다음 단계에서는 그린 스크린 동영상에서 원본 알파 동영상을 만드는 한 가지 방법을 설명합니다.

  1. 그린 스크린 동영상을 촬영한 후 믹서기와 같은 오픈소스 도구를 사용해 동영상을 변환할 수 있습니다. 알파 데이터가 있는 PNG 파일의 배열로 변환합니다. 블렌더의 색상 키 지정을 사용하여 녹색 화면을 제거하고 투명하게 만듭니다. PNG는 필수: 알파 채널 데이터를 보존하는 모든 형식은 괜찮습니다.)
  2. 오픈소스 도구를 사용하여 PNG 파일 배열을 원본 YUVA 동영상으로 변환 예를 들면 다음과 같습니다.

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    또는 ffmpeg 명령어를 사용하여 파일을 WebM으로 직접 인코딩합니다. :

    ffmpeg -i image%04d.png output.webm

오디오를 추가하려면 ffmpeg를 사용하여 다음과 같습니다.

ffmpeg -i image%04d.png -i audio.wav output.webm

3. 알파 동영상을 WebM으로 인코딩

원본 알파 동영상은 두 가지 방법으로 WebM에 인코딩할 수 있습니다.

  1. ffmpeg를 사용하여 WebM 알파 동영상을 인코딩하는 ffmpeg 지원을 추가했습니다.

    알파 데이터가 포함된 입력 동영상에 ffmpeg를 사용하고 출력 형식을 WebM을 다운로드하고 인코딩하는 작업은 사양입니다. (참고: 현재 다음 명령어로 git 트리에서 최신 버전의 ffmpeg를 가져와야 합니다. 작동됩니다.)

    명령어 샘플:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. webm-tools 사용:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools는 WebM과 관련된 간단한 오픈소스 도구 모음으로, WebM 프로젝트 작성자가 관리합니다. 여기에는 알파 투명도를 사용하여 WebM 동영상을 만들기 위한 도구가 포함되어 있습니다.

    --help로 바이너리를 실행하여 alpha_encoder에서 지원하는 옵션 목록을 확인합니다.

4. Chrome에서 재생

인코딩된 WebM 파일을 Chrome에서 재생하려면 파일을 있습니다.

어떻게 했을까요?

우리는 Google 엔지니어 비그네시 벤카타수브라마니안과 그의 살펴보겠습니다 그는 관련된 주요 과제를 요약했습니다.

  • VP8 비트스트림은 알파 채널을 지원하지 않습니다. 그래서 이러한 도구들을 VP8 비트스트림을 중단하지 않고 기존 있습니다.
  • Chrome의 렌더기는 알파 버전을 사용하여 동영상을 렌더링할 수 없었습니다.
  • Chrome에는 여러 하드웨어/GPU 기기에 대한 여러 렌더링 경로가 있습니다. 반복 주기 알파 동영상의 렌더링을 지원하도록 렌더링 경로를 변경해야 했습니다.

동영상 알파 투명도에 대한 흥미로운 사용 사례를 많이 생각해 볼 수 있습니다. 동영상, 양방향 동영상, 협동 스토리텔링 (채널에 자신의 동영상을 배경 동영상/이미지), 대체 캐릭터나 줄거리가 있는 동영상, 웹 앱 동영상 구성요소를 사용합니다.

즐거운 영화 제작이 되시길 바랍니다. 알파 버전으로 멋진 앱을 빌드하면 알려주세요. 있습니다.

유용한 리소스