⬅
Remove Background from a Video
You can download the sample scene and import it into the PRO Editor to use it as a template

Download JSON↓
In this guide you'll learn how to remove solid color background from your videos using color keyer in the PRO Editor.

First of all, click on the Add button in the top bar of the PRO Editor and select Plane in the dropdown menu.
Once the plane appears on the scene, you'll need to adjust its size to match the aspect ratio of the video you're going to play.
You can use the following values for the most common aspect ratios:

16:9 - 1.770 x 1.000 x 1.000

9:16 - 1.000 x 1.770 x 1.000

4:3 - 1.300 x 1.000 x 1.000

3:4 - 1.000 x 1.300 x 1.000
Select the plane on the layers panel on the right, then go to the Object tab on the left panel and adjust the values next to the Scale attribute.
Once the aspect ration is set, you'll need to add the script that will play your video.

Click on the NEW button under the SCRIPT section to assign a new script to the plane.

Set the name of your script and click EDIT to open the code editor.
Paste the following code into the code editor window:

/* USER DATA */

const videoLink = 'https://mywebar-a.akamaihd.net/9168/226989/green-screen-sample.mp4';
const videoVolume = 1;
const chromaKeyColor = new THREE.Color(0x00ff00);

/* END OF USER DATA */

/* Scene Logic */
let video, videoPromise, videoTexture, videoMaterial;
function init(json, init_callbacks) {
	const removeColor = new THREE.Color(0x00ff00); // Set the color to remove (green)
	const removeColorUniform = { value: removeColor }; // Create a uniform for the color to remove

	videoPromise = init_callbacks
		.loadVideo(videoLink, {
		autoplay: true,
		loop: true,
	})
		.then((v) => {
		video = v;
		video.volume = videoVolume;
		videoTexture = new THREE.VideoTexture(video.target);
		videoTexture.minFilter = THREE.LinearFilter;
		videoTexture.magFilter = THREE.LinearFilter;

		const vertexShader = `
				varying vec2 vUv;

				void main() {
				  vUv = uv;
				  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
				}
			`;
		const fragmentShader = `
			uniform sampler2D tex;
			uniform float texWidth;
			uniform float texHeight;

			uniform vec3 keyColor;
			uniform float similarity;
			uniform float smoothness;
			uniform float spill;

			varying vec2 vUv;
			vec2 RGBtoUV(vec3 rgb) {
			  return vec2(
				rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,
				rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5
			  );
			}

			vec4 ProcessChromaKey(vec2 texCoord) {
			  vec4 rgba = texture2D(tex, texCoord);
			  float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));

			  float baseMask = chromaDist - similarity;
			  float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);
			  rgba.a = fullMask;

			  float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);
			  float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);
			  rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);

			  return rgba;
			}

			void main(void) {
			  vec2 texCoord = vUv;
			  gl_FragColor = ProcessChromaKey(texCoord);
			}
		`;

		videoMaterial = new THREE.ShaderMaterial({
			uniforms: {
				tex: {
					value: videoTexture,
				},
				keyColor: {value: chromaKeyColor},
				similarity: {value: 0.1},
				smoothness: {value: 0.2},
				spill: {value: 0.1},

			},
			vertexShader: vertexShader,
			fragmentShader: fragmentShader,
			transparent: true,
		});
		
		this.material = videoMaterial;
	});
}


function mywebar_fill_init_promises(init_promises) {
	init_promises.push(videoPromise);
}

function mywebar_fill_medias(medias) {
	medias.push(video);
}

/**
 * Start/resume playing scene
 */
function start() {
	video.play();
}

/**
 * End/pause playing scene
 */
function stop() {
	video.pause();
}

/**
 * Unload event, free up memory
 */
function mywebar_destroy() {
	video.destroy();
	videoTexture.dispose();
}
You can use your own video by replacing the sample video link with a link to your video file:

const videoLink = 'https://threejs.org/examples/textures/sintel.mp4';
You can change the color that will be removed from your video by specifying the color code in HEX format in the THREE.Color value.

For example, the code for pure green would be pure red - 0xff0000, pure green - 0x00ff00, pure blue - 0x0000ff.

const chromaKeyColor = new THREE.Color(0x00ff00);
You can adjust the values of similarity, smoothness and spill to improve the keying of your particular video.

videoMaterial = new THREE.ShaderMaterial({
			uniforms: {
				tex: {
					value: videoTexture,
				},
				keyColor: {value: chromaKeyColor},
				similarity: {value: 0.1},
				smoothness: {value: 0.2},
				spill: {value: 0.1},
Once your scene is complete, you need to export your scene from the PRO Editor. You can do it by clicking on the File option on the top bar, then selecting Export.
A .zip archive will be downloaded on your computer. Extract it into any folder and find the app.json file inside.
Go back to your MyWebAR dashboard, create a new project or open an existing one and find the JSON MAE object type on the left panel.
Click on the + icon next to it and select the app.json file you've extracted from the archive to import it into your project.