JSFiddle - React, Tailwind, and code Playground

by Ibe Vanmeenen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.min.js"></script>
<figure id="video-canvas-container"></figure>

CSS

figure {
    display: block;
    width: 720px;
    height: 720px;
    
    margin: 0;
    padding: 0;
}

figure canvas {
    display: block;
}

JavaScript

// FILTER
function ChromaFilter() {
    const vertexShader = null;
    const fragmentShader = [
        "varying vec2 vTextureCoord;",

        "uniform float thresholdSensitivity;",
        "uniform float smoothing;",
        "uniform vec3 colorToReplace;",
        "uniform sampler2D uSampler;",

        "void main() {",
            "vec4 textureColor = texture2D(uSampler, vTextureCoord);",

            "float maskY = 0.2989 * colorToReplace.r + 0.5866 * colorToReplace.g + 0.1145 * colorToReplace.b;",
            "float maskCr = 0.7132 * (colorToReplace.r - maskY);",
            "float maskCb = 0.5647 * (colorToReplace.b - maskY);",

            "float Y = 0.2989 * textureColor.r + 0.5866 * textureColor.g + 0.1145 * textureColor.b;",
            "float Cr = 0.7132 * (textureColor.r - Y);",
            "float Cb = 0.5647 * (textureColor.b - Y);",

            "float blendValue = smoothstep(thresholdSensitivity, thresholdSensitivity + smoothing, distance(vec2(Cr, Cb), vec2(maskCr, maskCb)));",
            "gl_FragColor = vec4(textureColor.rgb, textureColor.a * blendValue);",
        "}"
    ].join('\n');

    let uniforms = {};

    PIXI.Filter.call(this,
        vertexShader,
        fragmentShader,
        uniforms
    );

    this.uniforms.thresholdSensitivity = 0.4;
    this.uniforms.smoothing = 0.1;
    this.uniforms.colorToReplace = [(0/255), (167/255), (62/255)];
}

ChromaFilter.prototype = Object.create(PIXI.Filter.prototype);
ChromaFilter.prototype.constructor = ChromaFilter;



// PIXI STAGE
const stage = new PIXI.Container();

const renderer = PIXI.autoDetectRenderer(720, 374, {
    preserveDrawingBuffer: true,
    clearBeforeRender: true,
    transparent: true
});

document.getElementById('video-canvas-container').appendChild(renderer.view);



// DEMO IMG
var chromaSprite = PIXI.Sprite.fromImage('http://i.imgur.com/H33FSlv.jpg');
chromaSprite.width = 720;
chromaSprite.height = 374;

stage.addChild(chromaSprite);

var filter = new...