Video Green Scene Shadow

I found an issue while debugging shadows. After deducting the green screen, I found that the shadow is not the shadow of the green screen, but a rectangle. Do I need to make any changes

            const texture = new THREE.VideoTexture(this.videoElement)
            texture.minFilter = THREE.LinearFilter
            texture.magFilter = THREE.LinearFilter
            texture.format = THREE.RGBAFormat

            const tempCoverImageColor = this.tempSourceData.backgroundColor
                //  Chroma Key 
                const chromaKeyShader = {
                    uniforms: {
                        'tDiffuse': {value: texture},
                        'color': {value: new THREE.Color(tempCoverImageColor.r / 255.0, tempCoverImageColor.g / 255.0, tempCoverImageColor.b / 255.0)},
                        'range': {value: tempCoverImageColor.tolerance / 255.0},
                        'smoothing': {value: 0},
                    vertexShader: [
                        'varying vec2 vUv;',
                        'void main() {',
                        'vUv = uv;',
                        'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
                    fragmentShader: [
                        'uniform sampler2D tDiffuse;',
                        'uniform vec3 color;',
                        'uniform float range;',
                        'uniform float smoothing;',
                        'varying vec2 vUv;',
                        'void main() {',
                        'vec4 texel = texture2D( tDiffuse, vUv );',
                        'if (length(texel.rgb - color.rgb) < range) {',
                        'float d = abs(length(texel.rgb - color.rgb));',
                        'float edge = smoothstep(range, range + smoothing, d);',
                        'gl_FragColor = texel * edge;',

                    transparent: true,
                    alphaTest: 1,
                    clipping: true
                const chromaKeyMaterial = new THREE.ShaderMaterial(chromaKeyShader)
                this.material = chromaKeyMaterial

What green screen?
Are you using the three.js shadow makers?

as far as i understand the shadows are drawn from the meshes geometry, not texture. you’ll have to find some sort of workaround, for example drawing another plane as the shadow

Using directional lights to display shadows

Okay, I’ll check the information again to see if there’s a way to implement it. Thank you!

Just to make sure, are you displaying the image on a flat plane and have now made the green part invisible? And you have defined the plane to cast shadows - but you want to cast a shadow of only the girl?

There is a material called “Shadow Material”, that is transparent and receives shadows. But it sounds like you want the opposite of that.

The answer may be in this discussion.

1 Like

I would try it with alphaTest: 0.5, for example. Wrong

As you use ShaderMaterial with discard, you have to implement the same thing for MeshDepthMaterial.

Here is a very rough and simplified example, from scratch, of what I mean.