WebGL2

[AndreySkyFoxSidorov]

Fix shader on WebGL2:

`

    uniform sampler2D texture1;

    varying vec2 vUv;
		
    void main() {			
		vec4 FragColor = texture2D( texture1, vUv);
		gl_FragColor = vec4(FragColor.r, FragColor.g, FragColor.b, ( FragColor.g > (keyG - percent) && FragColor.g < (keyG + percent) && FragColor.r > (keyR - percent) && FragColor.r < (keyR + percent) && FragColor.b > (keyB - percent) && FragColor.b < (keyB + percent)) ? 0.0 : 1.0);
    }

</script>

<script id="vertexShaderLoader" type="x-shader/x-vertex">
    varying vec2 vUv;

    void main()
    {
        vUv = uv;

        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
    }
</script>`

Code in JS:

			const chromakeycolor = new THREE.Color( 0x4ec25b );
			var uniformsMove = {
					percent: { type: "f", value: 0.22 },
					keyR: { type: "f", value: chromakeycolor.r },						
					keyG: { type: "f", value: chromakeycolor.g },						
					keyB: { type: "f", value: chromakeycolor.b },						
					texture1: { type: "t", value: videoTexture} 
				};

			var material = new THREE.ShaderMaterial( {
				uniforms: uniformsMove,
				vertexShader: document.getElementById( 'vertexShaderLoader' ).textContent,
				fragmentShader: document.getElementById( 'fragmentShaderLoader' ).textContent

			} );
			material.transparent = true;