Add opacity to chromakey shader in aframe - three.js

Question

I'm using this shader to chromakey a video. I would like to add opacity to the same video. I've been trying to add the opacity component to the shader but something more must be missing (don't know what).
I've added opacity in the schema:
opacity: {type: 'number', is: 'uniform', default: 0.5}
And in the update function:
this.material.uniforms.opacity = data.opacity
Here's all the shader code:
AFRAME.registerShader('chromakey', {
schema: {
src: {type: 'map'},
color: {default: {x: 0.1, y: 0.9, z: 0.2}, type: 'vec3', is: 'uniform'},
transparent: {default: true, is: 'uniform'},
opacity: {type: 'number', is: 'uniform', default: 0.5}
},
init: function (data) {
var videoTexture = new THREE.VideoTexture(data.src)
videoTexture.minFilter = THREE.LinearFilter
this.material = new THREE.ShaderMaterial({
uniforms: {
color: {
type: 'c',
value: data.color
},
texture: {
type: 't',
value: videoTexture
}
},
vertexShader: this.vertexShader,
fragmentShader: this.fragmentShader
})
},
update: function (data) {
this.material.color = data.color
this.material.src = data.src
this.material.transparent = data.transparent
this.material.uniforms.opacity = data.opacity
},
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 texture;',
'uniform vec3 color;',
'varying vec2 vUv;',
'void main(void)',
'{',
'vec3 tColor = texture2D( texture, vUv ).rgb;',
'float a = (length(tColor - color) - 0.5) * 7.0;',
'gl_FragColor = vec4(tColor, a);',
'}'
].join('\n')
})

Answer 1

When you update the value of the uniform (function update), the you have to set the value property and you have to set the notification, that the uniforms of the material needs to be updated (needsUpdate):
this.material.uniforms.opacity.value = data.opacity
this.material.needsUpdate = true
Further you have to add the uniform opacity to the fragment shader. See the following fragment shader which multiplies the opacity uniform to the alpha channel:
uniform float opacity;
uniform sampler2D texture;
uniform vec3 color;
varying vec2 vUv;
void main(void)
{
vec3 tColor = texture2D( texture, vUv ).rgb;
float a = (length(tColor - color) - 0.5) * 7.0;
gl_FragColor = vec4(tColor, a * opacity);
}
Note, if opacity is set to 0.0, the output will disappear completely.

Answer 2

You would need to add an opacity uniform to the shader in order for it to support what you want.
Try the following code (I haven't tested it) and see if it behaves how you want
fragmentShader: [
'uniform sampler2D texture;',
'uniform vec3 color;',
'uniform float opacity;', // add the uniform to the shader
'varying vec2 vUv;',
'void main(void)',
'{',
'vec3 tColor = texture2D( texture, vUv ).rgb;',
'float a = (length(tColor - color) - 0.5) * 7.0;',
'gl_FragColor = vec4(tColor, a*opacity);', // add the opacity multiplier to the alpha channel
'}'
].join('\n')