aframe-chromakey-material

Fork of nikolaiwarner/aframe-chromakey-material with improved chroma keying quality.

A high-quality chromakey material for green screen effects in A-Frame. Provided a color, this material will remove that color from the video or image source using smoothstep-based alpha with gamma correction and anti-halo darkening.

Improvements over upstream

• tolerance / smoothness uniforms for fine-tuned keying
• Anisotropic filtering for sharp edges in AR
• smoothstep + gamma-corrected alpha for cleaner edges
• Anti-halo colour darkening to eliminate green fringing
• Proper texture recreation on source change

Installation

Browser

Install and use by directly including the browser files:

  <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

See this example for usage.

npm

Install via npm/yarn:

npm install aframe-chromakey-material

Then require and use.

import 'aframe';
import 'aframe-chromakey-material';

Credits

A big thanks to the prior research on chromakey shaders in WebGL and Three.js by: https://github.com/makc/makc.github.io/tree/master/three.js/chromakey https://github.com/hawksley/Threex.chromakey