chromakey shader from webcam

chromakey shader from webcam onBeforeCompile

by Henrique Barone

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/7/Stats.js"></script>


<video id="video" width="320" height="240" preload autoplay loop muted></video>

CSS

body {
   overflow: hidden;
   margin: 0px;
 }

JavaScript

let camera, controls, gridHelper, scene, renderer, stats;
    let container, webcam, webcamCanvas, webcamTexture, canvasCtx, chromakeyMaterial;
    let ambientLight, pointLight, pointlightHelper, spotLight, spotlightHelper;
    let videoPhong, videoChroma;

    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 7;

        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.minDistance = 5;
        controls.maxDistance = 20;
        //controls.enablePan = false;
        controls.enableDamping = true;
        controls.dampingFactor = 0.5;

        gridHelper = new THREE.GridHelper(10, 10);

        gridHelper.position.y = -1.5;
        scene.add(gridHelper);

        ambientLight = new THREE.AmbientLight( 0xffffff, 0.3 );
        scene.add( ambientLight );

        pointLight = new THREE.PointLight( 0xff0000, 2, 100 );
        pointLight.intensity = 1.5;
        //pointLight.castShadow = true;
        pointLight.position.set( 50, 50, 50 );
        scene.add( pointLight );

        spotLight = new THREE.SpotLight( 0xffffff, 1 );
        spotLight.position.set( 15, 40, 35 );
        spotLight.rotation.y = 45;
        spotLight.intensity = 1.5;
        spotLight.angle = 1;
        spotLight.penumbra = 0.4;
        spotLight.decay = 1.4;
        spotLight.distance = 600;

        spotLight.castShadow = true;
       ...