Remove Background from a Video
MyWebAR allows you to create impressive augmented reality experiences with hologram effect. This feature can be used in employee training experiences, political campaigns and all types of product presentations.
To achieve it, you can leverage the built-in color keyer and AI segmentation features to remove the background from your video content.
Color Keyer
Green screens are a fantastic way to achieve clean background removal, especially if you can control your filming environment.
Here's how to use it in MyWebAR:
Here's how to use it in MyWebAR:
- If you haven't already, create a new project or open an existing one.
- Locate the Objects panel on the left side of the editor interface.
- Click the plus icon (+) next to the video object type in the Objects panel. This will open the content library panel.
- At the bottom of the content library panel, click on the Upload button and select a video shot in front of a solid color background on your computer.
Once your file is uploaded you will see a window prompting you to customize its settings. Enable the Color Keyer toggle to remove the solid color background from your video.
You can specify which color you want to remove using its HEX code or select it manually using the color palette.
Once you have selected the color click on the Apply button at the bottom of the color palette, then click Next.
Your video appear on the scene of your experience with a transparent backround. You can change the keying color at any point using the Properties panel on the right side of the editor.
Note: The no-code color keyer uses preset settings designed to work for a wide range of scenarios. In some cases, these presets might not perfectly capture the exact variations of the green color you want to remove.
If you need more precise control over the color keying process, you can fine-tune the settings in the Code Editor. The Code Editor allows you to adjust the keying parameters for a cleaner removal of the green background.
Remove Background from a Video with Three.js
If you need more precise control over the color keying process, you can fine-tune the settings in the Code Editor. The Code Editor allows you to adjust the keying parameters for a cleaner removal of the green background.
Remove Background from a Video with Three.js
AI Background Remover
The AI Background Remover is a powerful tool that lets you easily remove the background from your videos, giving you more creative freedom in editing.
In this case you don't need to have your video recorded in front of a green screen, the only requirement is good contrast between the subject and the background.
Here's how to use it in MyWebAR:
In this case you don't need to have your video recorded in front of a green screen, the only requirement is good contrast between the subject and the background.
Here's how to use it in MyWebAR:
- If you haven't already, create a new project or open an existing one.
- Locate the Objects panel on the left side of the editor interface.
- Click the plus icon (+) next to the video object type in the Objects panel. This will open the content library panel.
- At the bottom of the content library panel, click on the Upload button and select the video from your computer.
Once your file is uploaded you will see a window prompting you to customize its settings. Enable the AI Background Remover toggle to remove the background using AI segmentation.
Click on the Next button to start the segmentation process.
Click on the Next button to start the segmentation process.
Note: During AI segmentation, your video's audio track might be separated from the visuals. If you want the audio to be included in your final experience, you can extract the audio from the original video file and upload it as a separate object to your scene.
Once your video is processed it will appear with a transparent background on the scene of your experience.
Related articles
Photo and Video Capture Mode
Learn more about camera mode allowing users to shoot photos and videos with your AR content
Best Practices for Image Recognition
Discover the basic guidelines for creating a stable marker for image-based experiences
Remove Background from a Video with Three.js
Learn how to design a scrollable menu that will allow users to switch between different items in your experience