Skip to main content
DOCUMENTATION MOVED

Go to the new version of this page at https://docs.gmetri.com/metaverse/workflows/green-screen

Add a Green Screen Effect with Videos

Description​

The use of Green Screens has come a long way in the past decade. Technology that was primarily used in hollywood movies is now being used by everyone, including our favorite youtubers and insta-celebs. Here we'll go through the entire process required to enable green screen effect on your XR experience.

Before we dive into how to enrich virtual reality with green screen effect, let's familiarize ourselves with a few key terms.

Definitions​

Green Screen​

Refers to a colored background that you want to remove from your shot. This is usually single colored backdrop that can be of any color. Usually, a bright green color is used because it is the furthest away from a human's skin color. In past times, blue colored screens were also popular. When there is a green colored prop required in the shot, a bright blue colored screen is used instead.

Chroma Key​

Goes hand-in-hand with green screen. It is the technique of compositing two images/videos together based on color hues. All colors have a chroma component, hence the name.

Keying​

Refers to the process of removing the green screen background from the shot while post processing the shot. The portions of the video which match the pre-selected color are replaced by transparent pixels which can be later filled in with another image or video.

note

Even though webm video format is supported in major browsers, it still suffers from potential failure points.

  • The internal spec is still shaky. Transparency doesn't work at times on certain devices.
  • Encoding a webm video is hassle. Getting the right codec and media settings can be tricky. Encoding a webm video doesn't follow the well known approaches used by designers and VFX artists. It requires special knowledge of ffmpeg and/or blender.
  • Safari doesn't support transparency in webm videos!
GMetri SUPPORTS GREEN SCREEN EFFECT

All GMetri XR Experiences support applying the green screen effect on virtual reality (VR) videos. You worry about shooting and perfecting those vacation candids, we do the job of heavy processing on it.

Create a Demo Experience​

Let's take a look at how you can add a green screen effect to a video using the GMetri Virtual Reality Platform.

  1. Add a video element into your scene. Select a video from the file browser with the green background applied to it.

Green Screen Effects on VR with GMetri XR

  1. Now click the Green Screen Icon to apply the filter and select the background color using the integrated color picker.

Chroma Key Green Screen Backgrounds

  1. Open up the preview and see the magic!

How to do Green Screen for Videos on GMetri XR

Here's an example using blue background instead of a green background:

Blue Background instead of Green screen effect

Test​

  • That's it! It now time to test the application. You can do that by clicking the green Play button in Right bar.
  • A QR Code shall appear. Scan this from your phone to preview your green screen experience or just open the link in a new tab. The changes you make in the editor will be available in the preview as soon as you make them after refreshing the page!

Deploy​

  • For other to view this app, you must deploy it. To do this head over to the Publish section to know more.