# I have an overlay on a video when two chromakey videos are played simultaneously

**URL:** <https://discourse.threejs.org/t/i-have-an-overlay-on-a-video-when-two-chromakey-videos-are-played-simultaneously/59529>\
**Category:** Questions\
**Tags:** video-texture, shaders, transparent-material\
**Created:** [December 21, 2023, 1:41pm UTC](https://discourse.threejs.org/t/i-have-an-overlay-on-a-video-when-two-chromakey-videos-are-played-simultaneously/59529 "2023-12-21T13:41:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dzmitry\_Haiduk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dzmitry_haiduk/32/8998_2.png) [@Dzmitry\_Haiduk](https://discourse.threejs.org/u/Dzmitry_Haiduk)\
**Post date:** [December 21, 2023, 1:41pm UTC](https://discourse.threejs.org/t/i-have-an-overlay-on-a-video-when-two-chromakey-videos-are-played-simultaneously/59529/1 "2023-12-21T13:41:47Z")

</div>

Hi everyone.  
I have an overlay on a video when two chroma key videos are played simultaneously. I use a standard shader for chromakey. Both planes use the same shader. I’m using a-frame but I’m using a component that has a three.js GLSL shader

const chromaKeyShader = {  
schema: {  
src: {type: ‘map’},  
color: {default: {x: 0.1, y: 0.9, z: 0.2}, type: ‘vec3’, is: ‘uniform’},  
opacity: {default: 1.0},  
transparent: {default: true, is: ‘uniform’},  
},  
init(data) {  
const videoTexture = new THREE.VideoTexture(data.src)  
videoTexture.minFilter = THREE.LinearFilter  
this.material = new THREE.ShaderMaterial({  
uniforms: {  
color: {  
type: ‘c’,  
value: data.color,  
},  
myTexture: {  
type: ‘t’,  
value: videoTexture,  
},  
opacity: {  
type: ‘f’,  
value: data.opacity,  
},  
},  
vertexShader: this.vertexShader,  
fragmentShader: this.fragmentShader,  
})  
this.material.opacity = data.opacity  
},  
update(data) {  
this.material.color = data.color  
this.material.src = data.src  
this.material.transparent = data.transparent  
this.material.opacity = data.opacity  
this.material.uniforms.opacity.value = data.opacity  
this.material.uniformsNeedUpdate = true  
},  
vertexShader: [  
‘varying vec2 vUv;’,  
‘void main(void)’,  
‘{’,  
‘vUv = uv;’,  
‘vec4 mvPosition = modelViewMatrix \* vec4( position, 1.0 );’,  
‘gl\_Position = projectionMatrix \* mvPosition;’,  
‘}’,  
].join(‘\n’),  
fragmentShader: [  
‘uniform sampler2D myTexture;’,  
‘uniform vec3 color;’,  
‘uniform float opacity;’,  
‘varying vec2 vUv;’,  
‘void main(void)’,  
‘{’,  
‘vec3 tColor = texture2D( myTexture, vUv ).rgb;’,  
‘float a = (length(tColor - color) - 0.5) \* 7.0;’,  
‘gl\_FragColor = vec4(tColor, a \* opacity);’,  
‘}’,  
].join(‘\n’),  
}

export {chromaKeyShader}

 ![Screenshot 2023-12-21 at 16.32.22](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/c/3c4f8e4634f273e4aa299da460a2936671dd109b.png)  
 ![Screenshot 2023-12-21 at 16.42.51](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/5/9572089b363b828e909007b821377b71d66b7a31.png)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [December 21, 2023, 7:07pm UTC](https://discourse.threejs.org/t/i-have-an-overlay-on-a-video-when-two-chromakey-videos-are-played-simultaneously/59529/2 "2023-12-21T19:07:26Z")

</div>

What is the question?