CodyJasonBennett/index.css

## index.css
body {
  margin: 0;
}

canvas {
  display: block;
}

video {
  display: none;
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <script type="module" src="index.js"></script>
  </body>
</html>

## index.js
import {
  WebGLRenderer,
  PerspectiveCamera,
  Scene,
  Color,
  VideoTexture,
  ShaderMaterial,
  PlaneBufferGeometry,
  Mesh,
} from 'https://unpkg.com/three/build/three.module.js';

const renderer = new WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(2);
document.body.appendChild(renderer.domElement);

const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 2;

const scene = new Scene();

// https://krpano.com/releases/1.20.9/viewer/examples/chromakey/video.mp4
const video = document.createElement('video');
video.src = 'video.mp4';
video.autoplay = true;
video.loop = true;

const material = new ShaderMaterial({
  uniforms: {
    video: {
      type: 't',
      value: new VideoTexture(video)
    },
    color: {
      type: 'c',
      value: new Color(0x238E54)
    }
  },
  vertexShader: `
    varying vec2 vUv;

    void main(void) {
      vUv = uv;
      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

      gl_Position = projectionMatrix * mvPosition;
    }
  `,
  fragmentShader: `
    uniform sampler2D video;
    uniform vec3 color;

    varying vec2 vUv;

    void main(void) {
      vec3 tColor = texture2D(video, vUv).rgb;
      float a = (length(tColor - color) - 0.2) * 7.0;

      gl_FragColor = vec4(tColor, a);
    }
  `,
  transparent: true
});

const geometry = new PlaneBufferGeometry(1, 2);
const plane = new Mesh(geometry, material);
scene.add(plane);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});
	body {
	margin: 0;
	}

	canvas {
	display: block;
	}

	video {
	display: none;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="index.css" />
	</head>
	<body>
	<script type="module" src="index.js"></script>
	</body>
	</html>
	import {
	WebGLRenderer,
	PerspectiveCamera,
	Scene,
	Color,
	VideoTexture,
	ShaderMaterial,
	PlaneBufferGeometry,
	Mesh,
	} from 'https://unpkg.com/three/build/three.module.js';

	const renderer = new WebGLRenderer({ alpha: true, antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(2);
	document.body.appendChild(renderer.domElement);

	const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
	camera.position.z = 2;

	const scene = new Scene();

	// https://krpano.com/releases/1.20.9/viewer/examples/chromakey/video.mp4
	const video = document.createElement('video');
	video.src = 'video.mp4';
	video.autoplay = true;
	video.loop = true;

	const material = new ShaderMaterial({
	uniforms: {
	video: {
	type: 't',
	value: new VideoTexture(video)
	},
	color: {
	type: 'c',
	value: new Color(0x238E54)
	}
	},
	vertexShader: `
	varying vec2 vUv;

	void main(void) {
	vUv = uv;
	vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

	gl_Position = projectionMatrix * mvPosition;
	}
	`,
	fragmentShader: `
	uniform sampler2D video;
	uniform vec3 color;

	varying vec2 vUv;

	void main(void) {
	vec3 tColor = texture2D(video, vUv).rgb;
	float a = (length(tColor - color) - 0.2) * 7.0;

	gl_FragColor = vec4(tColor, a);
	}
	`,
	transparent: true
	});

	const geometry = new PlaneBufferGeometry(1, 2);
	const plane = new Mesh(geometry, material);
	scene.add(plane);

	renderer.setAnimationLoop(() => {
	renderer.render(scene, camera);
	});