ChromaKeyMaterial

A THREE.JS ShaderMaterial that removes a specified color (e.g. green screen) from a video or image texture.

Shader code by https://github.com/Mugen87 on THREE.js forum. Inspired by https://github.com/hawksley/Threex.chromakey

Source

ChromaKeyMaterial.js is in /js directory.

Code in /ts directory is for the demo app.

Source code is vanilla JS. Typescipt types in /types directory are autogenerated with tsc.

Video file is from MixKit

Demo

View a live demo.

Usage/Example

import ChromaKeyMaterial from '../js/ChromaKeyMaterial';

// Assumes basic THREE.js camera/scene/renderer setup.
const heightAspectRatio = 9 / 16;
const geometry: THREE.BufferGeometry =
    new THREE.PlaneGeometry(1, heightAspectRatio);
// 0x19ae31 is the green color to key out. The last three arguments are
// similarity, smoothness, and spill, respectively and are used to fine
// tune the color key.
const greenScreenMaterial = new ChromaKeyMaterial(
    './assets/myVideo.mp4', 0x19ae31, 1920, 1080, 0.159, 0.082, 0.214);
const plane = new THREE.Mesh(geometry, greenScreenMaterial);
scene.add(plane);

Demo

To run the demo in this package:

1. Clone this repo
2. cd into repo root
3. Install with npm install
4. Run demo server with npm run dev
5. Open http://localhost:1234 + browser Dev Tools.
6. Use dat.gui controls to pause/play video and fine tune color key.