drinkspiller / threejs_chromakey_video_material Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

HTML 3.63% JavaScript 30.40% SCSS 8.98% TypeScript 56.99%

threejs_chromakey_video_material's Introduction

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);